ویب ویجیٹ ایمبیڈ کریں

ویب widget آپ کی سائٹ کے وزٹرز کو براؤزر کے مائیکروفون کے ذریعے ایک AI ایجنٹ کے ساتھ کلک کر کے بات کرنے کی گفتگو فراہم کرتا ہے۔ یہ اپنا الگ JavaScript / React SDK رکھتا ہے جس کا اپنا SDK حوالہ ہے — یہ گائیڈ widget کے لیے درکار ThunderPhone جانب کے سیٹ اپ پر مرکوز ہے۔

پیشگی شرائط

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

   وہ ایجنٹ جس کا prompt اور آواز widget سیشن میں چلیں گے۔ widget_enabled: true (ڈیفالٹ) سیٹ کریں۔

2. روٹنگ موڈ منتخب کریں
   • mode="agent" — ہر key کے لیے ایک مستقل ایجنٹ۔ سب سے آسان۔
   • mode="webhook" — آپ کا سرور ہر وزٹر کے لیے ایجنٹ منتخب کرتا ہے بذریعہ web.incoming webhook۔ اسے لاگ اِن صارفین، A/B ٹیسٹس، یا فی صفحہ روٹنگ کے لیے استعمال کریں۔
3. اجازت یافتہ ڈومینز کی فہرست بنائیں

   Publishable keys origin-locked ہوتی ہیں۔ آپ کو ہر وہ hostname درج کرنا ہوگا جو widget embed کرے گا۔ مقامی development کے دوران localhost / 127.0.0.1 ہمیشہ اجازت یافتہ ہوتے ہیں۔

ایک publishable key بنائیں

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Marketing site (prod)",
    "mode":            "agent",
    "agent_id":        12,
    "allowed_domains": ["example.com", "*.example.com"]
  }'

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Support (dynamic)",
    "mode":            "webhook",
    "webhook_url":     "https://example.com/thunderphone/widget-hook",
    "allowed_domains": ["support.example.com"]
  }'

جواب میں pk_live_... سے شروع ہونے والی ایک key شامل ہوتی ہے۔ Publishable keys ڈیزائن کے لحاظ سے عوامی ہوتی ہیں — انہیں اپنے front-end bundle میں شامل کرنا محفوظ ہے۔ تمام فیلڈز کے لیے Publishable keys حوالہ دیکھیں۔

اپنی سائٹ پر widget شامل کریں

انضمام کے تین اختیارات widget SDK دستاویزات میں شامل ہیں:

تینوں ایک ہی publishableKey قبول کرتے ہیں اور مائیک بٹن کے ساتھ کال کے دوران آڈیو عنصر render کرتے ہیں۔

Widget کا context 12,000 حروف تک محدود ہوتا ہے (عام انگریزی متن کے تقریباً 3,400 ٹوکنز) اور prompt-size surcharge میں شمار ہوتا ہے۔

Widget-mode webhooks

جب mode="webhook" ہو، ThunderPhone ہر سیشن کے آغاز پر آپ کے webhook_url کو ایک web.incoming payload کے ساتھ کال کرتا ہے۔ اس وزٹر کے لیے وہ ایجنٹ configuration واپس کریں جسے آپ چلانا چاہتے ہیں — یہ فون کالز کی طرح ہی response schema کی پیروی کرتا ہے:

{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}

آپ اپنے سیشن سے context (کون سا صارف براؤز کر رہا ہے، وہ کس صفحے پر ہیں) prompt میں شامل کر سکتے ہیں، اور rollout کے مطابق ایجنٹس تبدیل کر سکتے ہیں۔

سیشنز کا مشاہدہ کریں

ویجٹ سیشنز GET /v1/calls میں direction="widget" کے ساتھ ظاہر ہوتے ہیں — فون کالز جیسا ہی ٹرانسکرپٹ، ریکارڈنگ، گریڈنگ، اور بلنگ۔ صرف ویجٹ کے لیے ڈیش بورڈ بنانے کے لیے direction کے لحاظ سے فلٹر کریں۔

اگلے مراحل