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

کوڈ کی چند سطروں کے ساتھ کسی بھی ویب سائٹ میں ایک وائس AI ایجنٹ شامل کریں

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

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

پیشگی تقاضے#

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

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

   ڈیش بورڈ میں ویب ویجیٹس پر جائیں اور ایک ویجیٹ بنائیں۔ وہ ایجنٹ منتخب کریں جسے آپ ظاہر کرنا چاہتے ہیں۔ ہر ویجیٹ کی اپنی پبلش ایبل کلید (pk_live_...) ہوتی ہے، جسے کلائنٹ سائیڈ کوڈ میں شامل کرنا محفوظ ہے؛ ایجنٹ کا تعین کلید سے ہوتا ہے۔

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

   اسی ویجیٹ میں وہ ڈومینز شامل کریں جہاں اسے ایمبیڈ کیا جائے گا۔ وائلڈ کارڈز معاون ہیں (مثلاً، *.example.com)۔ یہ فہرست کسی کے آپ کی کلید کو دوسری سائٹ پر کاپی کرنے پر ویجیٹ کو کام کرنے سے روکتی ہے؛ یہ تصدیق نہیں ہے، کیونکہ براؤزر کے باہر کی اسکرپٹ کوئی بھی Origin ہیڈر بھیج سکتی ہے۔ پروڈکشن میں localhost خودکار طور پر مجاز نہیں ہوتا: پروڈکشن API کے خلاف مقامی طور پر ٹیسٹ کرنے کے لیے اسے فہرست میں شامل کریں۔

3. براؤزر اووررائیڈز منتخب کریں

   اگر آپ کا صفحہ language، voice، یا context سیٹ کرتا ہے تو براؤزر اووررائیڈز کے تحت ہر ایک کو فعال کریں۔ نئے ویجیٹس ان میں سے کوئی قبول نہیں کرتے، اور بند سیٹنگ کے ساتھ سیشن کی درخواست 400 override_not_allowed کے ساتھ ناکام ہو جاتی ہے۔ براؤزر اووررائیڈز دیکھیں۔

فوری آغاز#

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

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 ایجنٹ سے منسلک کرتی ہے۔

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

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

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

مزید تین props شکل کے بجائے سیشن کو حسبِ ضرورت بناتے ہیں -- کال شروع ہونے پر سبھی سیشن کی درخواست کو بھیجے جاتے ہیں۔ ہر ایک صرف اس وقت کام کرتا ہے جب widget کی publishable key میں براؤزر اووررائیڈز کے تحت اس کی اجازت ہو؛ بصورت دیگر سیشن کی درخواست 400 override_not_allowed کے ساتھ ناکام ہو جاتی ہے:

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

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

ہر widget گفتگو ایک کال ہے۔ یہ آپ کی تنظیم کی بیک وقت کال کی حد میں شمار ہوتی ہے (بطور ڈیفالٹ 20 جاری کالز، جو فون اور دیگر کالز کے ساتھ مشترک ہیں) اور widget کی 25 فعال سیشنز کی حد میں بھی (یا آپ کی بیک وقت کال کی حد، اگر وہ اس سے زیادہ ہو)۔ کسی بھی حد پر، کال ختم ہونے تک نئی گفتگو شروع نہیں ہو سکتی۔

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

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

اسٹائلنگ#

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