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

एका स्क्रिप्ट टॅगद्वारे तुमच्या मार्केटिंग किंवा सपोर्ट साइटवर व्हॉइस एजंट जोडा — अभ्यागत ब्राउझरमधून थेट त्याच्याशी बोलू शकतात; फोन नंबरची गरज नाही.

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

पूर्वतयारी#

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

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

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

   प्रकाशित करण्यायोग्य की origin-लॉक असतात. विजेट एम्बेड करणारे प्रत्येक hostname तुम्ही नमूद करणे आवश्यक आहे. स्थानिक डेव्हलपमेंटदरम्यान 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-आकार अधिभार मध्ये गणला जातो.

विजेट-मोड webhook#

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

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

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

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

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

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