شروع کریں

ایمبیڈ کیا جا سکنے والا وائس ویجیٹ

ThunderPhone کا ایمبیڈیبل وائس وجٹ آپ کی ویب سائٹ کے وزیٹرز کو براؤزر سے براہِ راست ایک AI ایجنٹ سے بات کرنے دیتا ہے۔ فون کال کی ضرورت نہیں -- صارفین ایک بٹن پر کلک کرتے ہیں اور ThunderPhone سے چلنے والی حقیقی وقت کی وائس گفتگو شروع کرتے ہیں۔

وجٹ شیشے جیسی بار کے طور پر رینڈر ہوتا ہے جو ہلکی اور گہری تھیمز کے مطابق ڈھل جاتا ہے، اور اس میں حسبِ ضرورت ایکسنٹ رنگ اور پوزیشننگ شامل ہے۔ یہ @thunderphone/widget npm پیکیج کے طور پر تقسیم کیا جاتا ہے اور نان-بنڈلر ماحول کے لیے CDN کے ذریعے بھی دستیاب ہے۔

ThunderPhone widget in light and dark themes with various accent colors

پیشگی تقاضے

وجٹ ایمبیڈ کرنے سے پہلے، ThunderPhone Dashboard میں یہ تین مراحل مکمل کریں:

  1. قابلِ اشاعت API کلید بنائیں

    ڈیش بورڈ کی سیٹنگز میں ڈویلپرز پر جائیں اور ایک قابلِ اشاعت کلید بنائیں۔ قابلِ اشاعت کلیدیں pk_live_ سے شروع ہوتی ہیں اور کلائنٹ سائیڈ کوڈ میں شامل کرنا محفوظ ہے۔

  2. اجازت یافتہ ڈومینز کنفیگر کریں

    اسی ڈویلپرز سیٹنگز میں وہ ڈومینز شامل کریں جہاں وجٹ ایمبیڈ کیا جائے گا۔ ڈیولپمنٹ کے لیے localhost کی ہمیشہ اجازت ہوتی ہے۔ وائلڈ کارڈز معاون ہیں (مثلاً، *.example.com)۔

  3. ویب وجٹ بنائیں

    ڈیش بورڈ میں ویب وجٹس پر جائیں اور ایک وجٹ بنائیں۔ وہ ایجنٹ منتخب کریں جسے آپ ظاہر کرنا چاہتے ہیں اور استعمال کی جانے والی قابلِ اشاعت کلید منتخب کریں۔ ایجنٹ آپ کی قابلِ اشاعت کلید کی کنفیگریشن سے خودکار طور پر حل ہو جاتا ہے۔

فوری آغاز

پیکیج انسٹال کریں:

npm install @thunderphone/widget

اپنی ایپ میں وجٹ شامل کریں:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

بس اتنا ہی۔ آپ کے صارفین کو شیشے جیسی کال بار نظر آئے گی جو انہیں ایک کلک سے آپ کے AI ایجنٹ سے منسلک کرتی ہے۔

حسبِ ضرورت ترتیب

وجٹ میں ظاہری شکل کے لیے چار پراپس ہیں:

پراپطے شدہوضاحت
theme'light'سفید شیشے کے لیے 'light'، گہرے شیشے کے لیے 'dark'
primaryColor'#000000' (ہلکا) / '#ffffff' (گہرا)شروع کرنے کے بٹن، ویوفارم، اور کنیکٹنگ انڈیکیٹر کے لیے ایکسنٹ رنگ
title'Voice assistant'وجٹ میں دکھایا جانے والا متن
position'bottom-right'ویوپورٹ کا کونا: 'bottom-right'، 'bottom-left'، 'top-right'، 'top-left'
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

مزید تین پراپس ظاہری شکل کے بجائے سیشن کو حسبِ ضرورت بناتے ہیں -- کال شروع ہونے پر سبھی سیشن ریکویسٹ کو فارورڈ کیے جاتے ہیں:

پراپوضاحت
languageفی سیشن زبان اووررائیڈ -- کوئی کوڈ یا لوکیل، جیسے en، es، یا fr-FR
voiceفی سیشن وائس اووررائیڈ -- وائس کا نام، جیسے maria
contextایجنٹ کو دیا جانے والا صفحے یا سائٹ کا معلوماتی سیاق (سرور سائیڈ پر 12,000 حروف تک مختصر کیا جاتا ہے)

مکمل پراپس ٹیبل کے لیے React کمپوننٹ ریفرنس دیکھیں۔

مکمل طور پر حسبِ ضرورت UI کے لیے، اپنی انٹرفیس بناتے ہوئے وائس سیشن مینیج کرنے کے لیے ہیڈلیس ہک استعمال کریں۔ ہک آڈیو کے مطابق ردِعمل دینے والی ویژولائزیشنز بنانے کے لیے حقیقی وقت کے آڈیو لیولز فراہم کرتا ہے۔

انضمام کے اختیارات

اپنے اسٹیک کے مطابق انضمام کا طریقہ منتخب کریں:

React کمپوننٹ

بلٹ اِن کال کنٹرولز اور اسٹیٹس ڈسپلے کے ساتھ پہلے سے تیار UI کمپوننٹ۔ امپورٹ کریں، props دیں، مکمل۔

ہیڈلیس ہک

UI پر مکمل کنٹرول۔ useThunderPhone ہک وائس سیشن کو منظم کرتا ہے جبکہ آپ اپنا انٹرفیس بناتے ہیں۔

CDN / اسکرپٹ ٹیگ

کسی بنڈلر کی ضرورت نہیں۔ جامد سائٹس، WordPress، اور دیگر غیر React ماحول کے لیے اسکرپٹ ٹیگ کے ذریعے وِجٹ لوڈ کریں۔

اسٹائلنگ

وِجٹ میں بلٹ اِن لائٹ اور ڈارک تھیمز شامل ہیں، جنہیں theme prop کنٹرول کرتا ہے، اور ایک ایکسنٹ رنگ شامل ہے جسے primaryColor prop کنٹرول کرتا ہے۔ مزید گہری تخصیص کے لیے، آپ CSS کی کسٹم پراپرٹیز اور کلاسز کو اووررائیڈ کر سکتے ہیں۔ تفصیلات کے لیے اسٹائلنگ گائیڈ دیکھیں۔