एम्बेड करने योग्य वॉइस विजेट

कुछ लाइनों के कोड से किसी भी वेबसाइट में वॉइस AI एजेंट जोड़ें

ThunderPhone एम्बेड करने योग्य वॉइस विजेट आपकी वेबसाइट के विज़िटर्स को ब्राउज़र से सीधे AI एजेंट से बात करने देता है। किसी फोन कॉल की आवश्यकता नहीं है -- उपयोगकर्ता एक बटन पर क्लिक करते हैं और ThunderPhone द्वारा संचालित रीयल-टाइम वॉइस बातचीत शुरू करते हैं।

विजेट एक ग्लासमॉर्फिक बार के रूप में रेंडर होता है जो लाइट और डार्क थीम के अनुकूल होता है, जिसमें कस्टमाइज़ करने योग्य एक्सेंट रंग और पोज़िशनिंग होती है। इसे @thunderphone/widget npm पैकेज के रूप में वितरित किया जाता है और यह गैर-बंडलर एनवायरनमेंट के लिए CDN के माध्यम से भी उपलब्ध है।

आवश्यक शर्तें#

विजेट एम्बेड करने से पहले, ThunderPhone Dashboard में ये तीन चरण पूरे करें:

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

   डैशबोर्ड में वेब विजेट्स पर जाएं और एक विजेट बनाएं। जिस एजेंट को उपलब्ध कराना चाहते हैं, उसे चुनें। हर विजेट की अपनी पब्लिशेबल की (pk_live_...) होती है, जिसे क्लाइंट-साइड कोड में शामिल करना सुरक्षित है; एजेंट की के आधार पर निर्धारित होता है।

2. अनुमत डोमेन कॉन्फ़िगर करें

   उसी विजेट में वे डोमेन जोड़ें जहां इसे एम्बेड किया जाएगा। वाइल्डकार्ड समर्थित हैं (जैसे, *.example.com)। यह सूची किसी के आपकी की को किसी दूसरी साइट पर कॉपी करने पर विजेट को काम करने से रोकती है; यह ऑथेंटिकेशन नहीं है, क्योंकि ब्राउज़र के बाहर की कोई स्क्रिप्ट कोई भी Origin हेडर भेज सकती है। प्रोडक्शन में localhost अपने-आप अनुमति प्राप्त नहीं है: प्रोडक्शन API के विरुद्ध लोकल टेस्टिंग के लिए इसे सूची में जोड़ें।

3. ब्राउज़र ओवरराइड चुनें

   यदि आपका पेज language, voice, या context सेट करता है, तो ब्राउज़र ओवरराइड्स में हर विकल्प को चालू करें। नए विजेट कोई भी ओवरराइड स्वीकार नहीं करते, और बंद सेटिंग वाली सेशन रिक्वेस्ट 400 override_not_allowed के साथ विफल हो जाती है। ब्राउज़र ओवरराइड्स देखें।

त्वरित शुरुआत#

पैकेज इंस्टॉल करें:

npm install @thunderphone/widget

विजेट को अपने ऐप में जोड़ें:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

बस इतना ही। आपके उपयोगकर्ताओं को एक ग्लासमॉर्फिक कॉल बार दिखाई देगा जो उन्हें एक क्लिक में आपके AI एजेंट से कनेक्ट करता है।

कस्टमाइज़ेशन#

विजेट में दिखावट के लिए चार props हैं:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

तीन और प्रॉप्स लुक के बजाय सेशन को कस्टमाइज़ करते हैं -- कॉल शुरू होने पर सभी सेशन रिक्वेस्ट में फ़ॉरवर्ड किए जाते हैं। हर प्रॉप केवल तब काम करता है जब विजेट की publishable key, ब्राउज़र ओवरराइड्स के तहत इसकी अनुमति देती है; अन्यथा सेशन रिक्वेस्ट 400 override_not_allowed के साथ विफल हो जाती है:

पूरी props तालिका के लिए React कंपोनेंट रेफ़रेंस देखें।

पूरी तरह कस्टम UI के लिए, अपना इंटरफ़ेस बनाते समय वॉइस सेशन मैनेज करने हेतु हेडलेस हुक का उपयोग करें। हुक ऑडियो-रिएक्टिव विज़ुअलाइज़ेशन बनाने के लिए रीयल-टाइम ऑडियो लेवल एक्सपोज़ करता है।

हर विजेट बातचीत एक कॉल है। यह आपके संगठन की कन्करेंट-कॉल सीमा में गिनी जाती है (डिफ़ॉल्ट रूप से प्रगति पर 20 कॉल, जो फ़ोन और अन्य कॉल के साथ साझा होती हैं) और विजेट की 25 सक्रिय सेशन की सीमा में भी (या आपकी कन्करेंट-कॉल सीमा, यदि वह अधिक है)। किसी भी सीमा पर, कॉल समाप्त होने तक नई बातचीत शुरू नहीं हो सकती।

इंटीग्रेशन विकल्प#

अपनी स्टैक के लिए उपयुक्त इंटीग्रेशन विधि चुनें:

स्टाइलिंग#

विजेट में theme prop द्वारा नियंत्रित बिल्ट-इन लाइट और डार्क थीम, और primaryColor prop द्वारा नियंत्रित एक्सेंट रंग शामिल हैं। अधिक गहरे कस्टमाइज़ेशन के लिए, आप CSS कस्टम प्रॉपर्टीज़ और क्लासेस को ओवरराइड कर सकते हैं। विवरण के लिए स्टाइलिंग गाइड देखें।