Developer cookbook

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

एक ही स्क्रिप्ट टैग के साथ अपनी मार्केटिंग या सपोर्ट साइट पर वॉइस एजेंट जोड़ें — विज़िटर बिना किसी फोन नंबर के सीधे ब्राउज़र से उससे बात कर सकते हैं।

वेब विजेट आपके साइट विज़िटर्स को ब्राउज़र के माइक्रोफ़ोन का उपयोग करके AI एजेंट के साथ क्लिक-टू-टॉक बातचीत देता है। यह अपने SDK रेफ़रेंस के साथ एक अलग JavaScript / React SDK है — यह गाइड विजेट के लिए आवश्यक ThunderPhone-साइड सेटअप पर केंद्रित है।

पूर्वापेक्षाएँ#

1. एजेंट बनाएं

   वह एजेंट जिसका प्रॉम्प्ट और वॉइस विजेट सेशन चलाएंगे। widget_enabled: true (डिफ़ॉल्ट) सेट करें।

2. रूटिंग मोड तय करें
   • mode="agent" — प्रति की एक स्टैटिक एजेंट। सबसे सरल।
   • mode="webhook" — आपका सर्वर web.incoming वेबहुक के माध्यम से प्रति विज़िटर एजेंट चुनता है। इसका उपयोग लॉग-इन यूज़र्स, 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 टोकन) और यह प्रॉम्प्ट-साइज़ सरचार्ज में शामिल होता है।

विजेट-मोड वेबहुक्स#

जब 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 */ ]
}

आप अपने सेशन का कॉन्टेक्स्ट (कौन-सा कस्टमर ब्राउज़ कर रहा है, वे किस पेज पर हैं) प्रॉम्प्ट में मिला सकते हैं और हर रोलआउट के लिए एजेंट बदल सकते हैं।

विजेट सेशन देखें#

विजेट सेशन GET /v1/calls में direction="widget" के साथ दिखते हैं — फोन कॉल्स जैसा ही ट्रांसक्रिप्ट, रिकॉर्डिंग, ग्रेडिंग और बिलिंग। केवल विजेट वाला डैशबोर्ड बनाने के लिए direction से फ़िल्टर करें।

अगले चरण#