Skip to main content
वेब विजेट आपके साइट विज़िटर्स को ब्राउज़र के माइक्रोफ़ोन का उपयोग करके AI एजेंट के साथ क्लिक-टू-टॉक बातचीत देता है। यह अपने SDK संदर्भ के साथ एक अलग JavaScript / React SDK है — यह गाइड विजेट के लिए आवश्यक ThunderPhone-साइड सेटअप पर केंद्रित है।
आप यह सब cURL के बिना कर सकते हैं: वेब विजेट्स डैशबोर्ड पेज (/dashboard/web-widgets) विजेट बनाता है, उसका मोड और एजेंट सेट करता है, अनुमत डोमेन प्रबंधित करता है, और आपको एम्बेड स्निपेट देता है।

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

1

एक एजेंट बनाएं

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

रूटिंग मोड तय करें

  • mode="agent" — प्रति की एक स्टैटिक एजेंट। सबसे सरल।
  • mode="webhook" — आपका सर्वर प्रति विज़िटर एजेंट चुनता है web.incoming वेबहुक के माध्यम से। लॉग-इन उपयोगकर्ताओं, A/B टेस्ट, या प्रति-पेज रूटिंग के लिए इसका उपयोग करें।
3

अनुमत डोमेन सूचीबद्ध करें

पब्लिशेबल की ओरिजिन-लॉक्ड होती हैं। आपको हर उस होस्टनेम का नाम देना होगा जो विजेट एम्बेड करेगा। लोकल डेवलपमेंट के दौरान localhost / 127.0.0.1 हमेशा अनुमत होते हैं।

​
एक पब्लिशेबल की बनाएं

रिस्पॉन्स में pk_live_... से शुरू होने वाली एक key शामिल होती है। पब्लिशेबल की डिज़ाइन के अनुसार सार्वजनिक होती हैं — इन्हें अपने फ्रंट-एंड बंडल में सुरक्षित रूप से शामिल किया जा सकता है। सभी फ़ील्ड के लिए पब्लिशेबल की संदर्भ देखें।
allowed_domains में कम से कम एक एंट्री होनी चाहिए। *.example.com सबडोमेन (जैसे api.example.com) से मेल खाता है, लेकिन बेयर डोमेन से नहीं। * या *.* जैसे बेयर वाइल्डकार्ड अस्वीकार कर दिए जाते हैं।

​
अपनी साइट पर विजेट जोड़ें

तीन इंटीग्रेशन विकल्प विजेट SDK दस्तावेज़ में शामिल हैं:

React कंपोनेंट

<ThunderPhoneWidget publishableKey="pk_live_..." />.

हेडलेस हुक

कस्टम UI के लिए useThunderPhone()।

CDN स्क्रिप्ट टैग

नॉन-बंडलर साइटों के लिए ThunderPhone.mount({...})।
तीनों समान publishableKey स्वीकार करते हैं और माइक बटन साथ ही इन-कॉल ऑडियो एलिमेंट रेंडर करते हैं। विजेट context को 12,000 कैरेक्टर तक ट्रंकेट किया जाता है (सामान्य अंग्रेज़ी टेक्स्ट के लगभग 3,400 टोकन) और यह प्रॉम्प्ट-साइज़ सरचार्ज में गिना जाता है।

​
विजेट-मोड वेबहुक

जब mode="webhook" हो, ThunderPhone हर सेशन शुरू होने पर आपके webhook_url को web.incoming पेलोड के साथ कॉल करता है। उस विज़िटर के लिए चलाने हेतु इच्छित एजेंट कॉन्फ़िगरेशन लौटाएं — यह फ़ोन कॉल की तरह ही रिस्पॉन्स स्कीमा का पालन करता है:
आप अपने सेशन का कॉन्टेक्स्ट (कौन-सा ग्राहक ब्राउज़ कर रहा है, वे किस पेज पर हैं) प्रॉम्प्ट में मिला सकते हैं, और प्रति रोलआउट एजेंट बदल सकते हैं।

​
सेशंस देखें

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

​
अगले चरण

विजेट SDK रेफ़रेंस

React / hook / CDN इंटीग्रेशन विवरण।

डायनामिक प्रति-कॉल कॉन्फ़िगरेशन

mode="webhook" फ़्लो को एंड-टू-एंड इम्प्लीमेंट करें।

पब्लिशेबल कीज़ रेफ़रेंस

की रिसोर्स का हर फ़ील्ड।

माइक सेशंस API

विजेट छोड़ें; कस्टम UI के लिए LiveKit को सीधे ड्राइव करें।