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

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

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

पूर्वतयारी#

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

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

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

   विजेट एम्बेड करणारे प्रत्येक होस्टनेम नमूद करा. ब्राउझर प्रत्येक सत्र विनंतीसोबत पृष्ठाचा origin पाठवतात, त्यामुळे कोणी तुमची की दुसऱ्या साइटवर कॉपी केल्यास ही यादी ती कार्य करण्यापासून थांबवते. हे प्रमाणीकरण नाही: ब्राउझरच्या बाहेरची स्क्रिप्ट कोणताही Origin हेडर पाठवू शकते. उत्पादनात localhost आपोआप अनुमत नसतो; उत्पादन API विरुद्ध स्थानिक चाचणी करण्यासाठी, यादीत localhost जोडा.

4. ब्राउझर ओव्हरराइड निवडा

   तुमचे पृष्ठ कोणत्या सत्र सेटिंग्ज पाठवू शकते ते ठरवा. नवीन की कोणतीही स्वीकारत नाहीत; ब्राउझर ओव्हरराइड पहा.

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

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"],
    "allowed_overrides": ["context"]
  }'

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 स्वीकारतात आणि मायक्रोफोन बटण तसेच कॉलमधील ऑडिओ घटक रेंडर करतात.

ब्राउझर ओव्हरराइड्स#

विजेट पृष्ठावरून प्रत्येक सत्रासाठी चार सेटिंग्ज पाठवू शकते:

तुमची प्रकाशित करण्यायोग्य की सार्वजनिक आहे, त्यामुळे ती ज्याच्याकडे आहे तो कोणीही ही सेटिंग्ज पाठवू शकतो, तुमच्या डोमेनचे भासवणाऱ्या स्क्रिप्टमधूनही. त्यामुळे तुम्ही कीसाठी परवानगी देईपर्यंत प्रत्येक सेटिंग बंद असते: विजेट तयार किंवा संपादित करताना ब्राउझर ओव्हरराइड्स अंतर्गत ते निवडा किंवा प्रकाशित करण्यायोग्य की API द्वारे allowed_overrides सेट करा. तुमचे पृष्ठ प्रत्यक्षात जे पाठवते तेवढ्यालाच परवानगी द्या.

कीने परवानगी न दिलेली सेटिंग असलेली सत्र विनंती 400 सह अयशस्वी होते आणि त्या सेटिंगचे नाव देते:

{
  "error": "override_not_allowed",
  "fields": ["voice"],
  "message": "This publishable key does not allow the browser to set `voice`. ..."
}

ही तपासणी दोन्ही मोडमध्ये लागू होते. वेबहुक मोडमध्ये, परवानगी दिलेली सेटिंग तुमच्या web.incoming वेबहुककडेही फॉरवर्ड केली जाते (context हे website_context म्हणून येते). हे सेटिंग अस्तित्वात येण्यापूर्वी तयार केलेल्या की सर्व चारना परवानगी देतात, म्हणून विद्यमान एम्बेड्स कार्यरत राहतात; तुम्ही वापरत नसलेले बंद करा.

विजेट 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 नुसार फिल्टर करा.

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