Skip to main content
ThunderPhone एम्बेड करने योग्य वॉइस विजेट आपकी वेबसाइट के विज़िटर्स को ब्राउज़र से सीधे AI एजेंट से बात करने देता है। किसी फोन कॉल की आवश्यकता नहीं है — उपयोगकर्ता एक बटन पर क्लिक करते हैं और ThunderPhone द्वारा संचालित रीयल-टाइम वॉइस बातचीत शुरू करते हैं। विजेट एक ग्लासमॉर्फिक बार के रूप में रेंडर होता है जो लाइट और डार्क थीम के अनुकूल होता है, जिसमें कस्टमाइज़ करने योग्य एक्सेंट रंग और पोज़िशनिंग होती है। इसे @thunderphone/widget npm पैकेज के रूप में वितरित किया जाता है और यह गैर-बंडलर एनवायरनमेंट के लिए CDN के माध्यम से भी उपलब्ध है।
ThunderPhone widget in light and dark themes with various accent colors

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

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

पब्लिश करने योग्य API key बनाएँ

डैशबोर्ड सेटिंग्स में डेवलपर्स पर जाएँ और एक पब्लिश करने योग्य key बनाएँ। पब्लिश करने योग्य keys pk_live_ से शुरू होती हैं और क्लाइंट-साइड कोड में शामिल करना सुरक्षित है।
2

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

उसी डेवलपर्स सेटिंग्स में, वे डोमेन जोड़ें जहाँ विजेट एम्बेड किया जाएगा। डेवलपमेंट के लिए localhost हमेशा अनुमत होता है। वाइल्डकार्ड समर्थित हैं (उदाहरण के लिए, *.example.com)।
3

वेब विजेट बनाएँ

डैशबोर्ड में वेब विजेट्स पर जाएँ और एक विजेट बनाएँ। जिस एजेंट को एक्सपोज़ करना है और जिस पब्लिश करने योग्य key का उपयोग करना है, उसे चुनें। एजेंट आपकी पब्लिश करने योग्य key कॉन्फ़िगरेशन से स्वचालित रूप से निर्धारित होता है।
पब्लिश करने योग्य keys (pk_live_...) आपके सीक्रेट API टोकन जैसी नहीं हैं। पब्लिश करने योग्य keys क्लाइंट-साइड उपयोग के लिए डिज़ाइन की गई हैं और आपके अनुमत डोमेन पर विजेट सेशन तक सीमित हैं। क्लाइंट-साइड कोड में कभी भी अपने सीक्रेट API टोकन का उपयोग न करें।

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

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

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

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

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

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

React कंपोनेंट

बिल्ट-इन कॉल कंट्रोल और स्टेटस डिस्प्ले के साथ पहले से बना UI कंपोनेंट। इंपोर्ट करें, props पास करें, हो गया।

हेडलेस हुक

UI पर पूरा नियंत्रण। आप अपना इंटरफ़ेस बनाते समय useThunderPhone हुक वॉइस सेशन को मैनेज करता है।

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

किसी बंडलर की आवश्यकता नहीं। स्टैटिक साइटों, WordPress और अन्य गैर-React एनवायरनमेंट के लिए स्क्रिप्ट टैग के माध्यम से विजेट लोड करें।

स्टाइलिंग

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