वेब विजेट एम्बेड करा

वेब विजेट तुमच्या साइट अभ्यागतांना ब्राउझरचा मायक्रोफोन वापरून AI एजंटसोबत क्लिक-टू-टॉक संभाषण देते. हे स्वतःच्या SDK संदर्भासह स्वतंत्र JavaScript / React SDK आहे — हे मार्गदर्शक विजेटला आवश्यक असलेल्या ThunderPhone-वरील सेटअपवर लक्ष केंद्रित करते.

पूर्वअटी

1. एजंट तयार करा

   ज्या एजंटचा prompt आणि आवाज विजेट सत्र चालवेल तो एजंट. widget_enabled: true सेट करा (हे डीफॉल्ट आहे).

2. राउटिंग मोड ठरवा
   • mode="agent" — प्रत्येक कीसाठी एक स्थिर एजंट. सर्वात सोपे.
   • mode="webhook" — तुमचा सर्व्हर प्रत्येक अभ्यागतासाठी एजंट निवडतो web.incoming webhook द्वारे. लॉग-इन केलेले वापरकर्ते, A/B चाचण्या किंवा प्रति-पृष्ठ राउटिंगसाठी हे वापरा.
3. अनुमत डोमेनची यादी करा

   प्रकाशित करण्यायोग्य की ओरिजिन-लॉक्ड असतात. विजेट एम्बेड करणारे प्रत्येक होस्टनेम तुम्ही निर्दिष्ट करणे आवश्यक आहे. स्थानिक विकासादरम्यान localhost / 127.0.0.1 ला नेहमीच परवानगी असते.

प्रकाशित करण्यायोग्य की तयार करा

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 समाविष्ट असते. प्रकाशित करण्यायोग्य की डिझाइननुसार सार्वजनिक असतात — त्या तुमच्या फ्रंट-एंड बंडलमध्ये सुरक्षितपणे समाविष्ट करू शकता. सर्व फील्डसाठी प्रकाशित करण्यायोग्य की संदर्भ पहा.

तुमच्या साइटवर विजेट जोडा

तीन एकत्रीकरण पर्याय विजेट SDK दस्तऐवजांमध्ये समाविष्ट आहेत:

तिन्ही पर्याय एकच publishableKey स्वीकारतात आणि मायक्रोफोन बटण तसेच कॉलमधील ऑडिओ घटक रेंडर करतात.

विजेटचा context 12,000 वर्णांवर ट्रंकेट केला जातो (सामान्य इंग्रजी मजकुराच्या अंदाजे 3,400 टोकन्स) आणि तो prompt-आकार अधिभारात गणला जातो.

विजेट-मोड webhooks

mode="webhook" असताना, ThunderPhone प्रत्येक सत्र सुरू होताना web.incoming पेलोडसह तुमच्या webhook_url ला कॉल करते. त्या अभ्यागतासाठी तुम्हाला चालवायचे असलेले एजंट कॉन्फिगरेशन परत करा — ते फोन कॉल्सप्रमाणेच प्रतिसाद स्कीमा अनुसरते:

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

तुमच्या स्वतःच्या सत्रातील संदर्भ (कोणता ग्राहक ब्राउझ करत आहे, ते कोणत्या पृष्ठावर आहेत) prompt मध्ये मिसळू शकता आणि रोलआउटनुसार एजंट बदलू शकता.

सत्रांचे निरीक्षण करा

Widget सत्रे GET /v1/calls मध्ये direction="widget" सह दिसतात — फोन कॉल्सप्रमाणेच ट्रान्सक्रिप्ट, रेकॉर्डिंग, मूल्यांकन आणि बिलिंग. केवळ Widget साठी डॅशबोर्ड तयार करण्यासाठी direction नुसार फिल्टर करा.

पुढील पायऱ्या