---
title: "एम्बेड करने योग्य वॉइस विजेट"
description: "कुछ लाइनों के कोड से किसी भी वेबसाइट में वॉइस AI एजेंट जोड़ें"
---
ThunderPhone एम्बेड करने योग्य वॉइस विजेट आपकी वेबसाइट के विज़िटर्स को ब्राउज़र से सीधे AI एजेंट से बात करने देता है। किसी फोन कॉल की आवश्यकता नहीं है -- उपयोगकर्ता एक बटन पर क्लिक करते हैं और ThunderPhone द्वारा संचालित रीयल-टाइम वॉइस बातचीत शुरू करते हैं।
विजेट एक ग्लासमॉर्फिक बार के रूप में रेंडर होता है जो लाइट और डार्क थीम के अनुकूल होता है, जिसमें कस्टमाइज़ करने योग्य एक्सेंट रंग और पोज़िशनिंग होती है। इसे `@thunderphone/widget` npm पैकेज के रूप में वितरित किया जाता है और यह गैर-बंडलर एनवायरनमेंट के लिए CDN के माध्यम से भी उपलब्ध है।
## आवश्यक शर्तें
विजेट एम्बेड करने से पहले, [ThunderPhone Dashboard](https://app.thunderphone.com) में ये तीन चरण पूरे करें:
डैशबोर्ड में **वेब विजेट्स** पर जाएं और एक विजेट बनाएं। जिस एजेंट को उपलब्ध कराना चाहते हैं, उसे चुनें। हर विजेट की अपनी पब्लिशेबल की (`pk_live_...`) होती है, जिसे क्लाइंट-साइड कोड में शामिल करना सुरक्षित है; एजेंट की के आधार पर निर्धारित होता है।
उसी विजेट में वे डोमेन जोड़ें जहां इसे एम्बेड किया जाएगा। वाइल्डकार्ड समर्थित हैं (जैसे, `*.example.com`)। यह सूची किसी के आपकी की को किसी दूसरी साइट पर कॉपी करने पर विजेट को काम करने से रोकती है; यह ऑथेंटिकेशन नहीं है, क्योंकि ब्राउज़र के बाहर की कोई स्क्रिप्ट कोई भी `Origin` हेडर भेज सकती है। प्रोडक्शन में `localhost` अपने-आप अनुमति प्राप्त नहीं है: प्रोडक्शन API के विरुद्ध लोकल टेस्टिंग के लिए इसे सूची में जोड़ें।
यदि आपका पेज `language`, `voice`, या `context` सेट करता है, तो **ब्राउज़र ओवरराइड्स** में हर विकल्प को चालू करें। नए विजेट कोई भी ओवरराइड स्वीकार नहीं करते, और बंद सेटिंग वाली सेशन रिक्वेस्ट `400 override_not_allowed` के साथ विफल हो जाती है। [ब्राउज़र ओवरराइड्स](/hi/guides/embed-web-widget) देखें।
पब्लिश करने योग्य keys (`pk_live_...`) आपके सीक्रेट API टोकन जैसी **नहीं** हैं। पब्लिश करने योग्य keys क्लाइंट-साइड उपयोग के लिए डिज़ाइन की गई हैं और आपके अनुमत डोमेन पर विजेट सेशन तक सीमित हैं। क्लाइंट-साइड कोड में कभी भी अपने सीक्रेट API टोकन का उपयोग न करें।
विजेट सेशन डिफ़ॉल्ट रूप से 30 मिनट बाद समाप्त होते हैं, या यदि एजेंट की अपनी अधिकतम कॉल अवधि कम है तो उससे पहले। [पब्लिशेबल की](/api-reference/publishable-keys) पर `max_call_duration_seconds` के साथ प्रति की सीमा बदलें (6 घंटे तक), या एजेंट की अपनी सीमा का उपयोग करने के लिए इसे `null` पर सेट करें।
---
## त्वरित शुरुआत
पैकेज इंस्टॉल करें:
```bash
npm install @thunderphone/widget
```
विजेट को अपने ऐप में जोड़ें:
```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
function App() {
return (
)
}
```
बस इतना ही। आपके उपयोगकर्ताओं को एक ग्लासमॉर्फिक कॉल बार दिखाई देगा जो उन्हें एक क्लिक में आपके AI एजेंट से कनेक्ट करता है।
---
## कस्टमाइज़ेशन
विजेट में दिखावट के लिए चार props हैं:
| Prop | डिफ़ॉल्ट | विवरण |
|------|---------|-------------|
| `theme` | `'light'` | सफ़ेद ग्लास के लिए `'light'`, डार्क ग्लास के लिए `'dark'` |
| `primaryColor` | `'#000000'` (लाइट) / `'#ffffff'` (डार्क) | स्टार्ट बटन, वेवफ़ॉर्म और कनेक्टिंग इंडिकेटर के लिए एक्सेंट रंग |
| `title` | `'Voice assistant'` | विजेट में दिखाया जाने वाला टेक्स्ट |
| `position` | `'bottom-right'` | व्यूपोर्ट कॉर्नर: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |
```tsx Light theme (default)
```
```tsx Dark theme with custom color
```
तीन और प्रॉप्स लुक के बजाय सेशन को कस्टमाइज़ करते हैं -- कॉल शुरू होने पर सभी सेशन रिक्वेस्ट में फ़ॉरवर्ड किए जाते हैं। हर प्रॉप केवल तब काम करता है जब विजेट की publishable key, **ब्राउज़र ओवरराइड्स** के तहत इसकी अनुमति देती है; अन्यथा सेशन रिक्वेस्ट `400 override_not_allowed` के साथ विफल हो जाती है:
| Prop | विवरण |
|------|-------------|
| `language` | प्रति-सेशन भाषा ओवरराइड -- `en`, `es`, या `fr-FR` जैसा कोई कोड या लोकेल |
| `voice` | प्रति-सेशन वॉइस ओवरराइड -- `maria` जैसा कोई वॉइस नाम |
| `context` | एजेंट को भेजा गया तथ्यात्मक पेज या साइट कॉन्टेक्स्ट (सर्वर-साइड पर 12,000 कैरेक्टर तक ट्रंकेट किया जाता है) |
पूरी props तालिका के लिए [React कंपोनेंट रेफ़रेंस](/hi/widget/react) देखें।
पूरी तरह कस्टम UI के लिए, अपना इंटरफ़ेस बनाते समय वॉइस सेशन मैनेज करने हेतु [हेडलेस हुक](/hi/widget/headless-hook) का उपयोग करें। हुक ऑडियो-रिएक्टिव विज़ुअलाइज़ेशन बनाने के लिए रीयल-टाइम ऑडियो लेवल एक्सपोज़ करता है।
हर विजेट बातचीत एक कॉल है। यह आपके संगठन की [कन्करेंट-कॉल सीमा](/api-reference/introduction#call-limits) में गिनी जाती है (डिफ़ॉल्ट रूप से प्रगति पर 20 कॉल, जो फ़ोन और अन्य कॉल के साथ साझा होती हैं) और विजेट की 25 सक्रिय सेशन की सीमा में भी (या आपकी कन्करेंट-कॉल सीमा, यदि वह अधिक है)। किसी भी सीमा पर, कॉल समाप्त होने तक नई बातचीत शुरू नहीं हो सकती।
---
## इंटीग्रेशन विकल्प
अपनी स्टैक के लिए उपयुक्त इंटीग्रेशन विधि चुनें:
बिल्ट-इन कॉल कंट्रोल और स्टेटस डिस्प्ले के साथ पहले से बना UI कंपोनेंट। इंपोर्ट करें, props पास करें, हो गया।
UI पर पूरा नियंत्रण। आप अपना इंटरफ़ेस बनाते समय `useThunderPhone` हुक वॉइस सेशन को मैनेज करता है।
किसी बंडलर की आवश्यकता नहीं। स्टैटिक साइटों, WordPress और अन्य गैर-React एनवायरनमेंट के लिए स्क्रिप्ट टैग के माध्यम से विजेट लोड करें।
---
## स्टाइलिंग
विजेट में `theme` prop द्वारा नियंत्रित बिल्ट-इन लाइट और डार्क थीम, और `primaryColor` prop द्वारा नियंत्रित एक्सेंट रंग शामिल हैं। अधिक गहरे कस्टमाइज़ेशन के लिए, आप CSS कस्टम प्रॉपर्टीज़ और क्लासेस को ओवरराइड कर सकते हैं। विवरण के लिए [स्टाइलिंग गाइड](/hi/widget/styling) देखें।
मदद चाहिए? [support@thunderphone.com](mailto:support@thunderphone.com) पर हमसे संपर्क करें