> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

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

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

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

<Frame>
  <img src="https://mintcdn.com/thunderphone/4XhPaCl4RGfyS7_M/images/widget-showcase.png?fit=max&auto=format&n=4XhPaCl4RGfyS7_M&q=85&s=17fea4fe853f3548b9b2628c9d4c4fc0" alt="ThunderPhone widget in light and dark themes with various accent colors" width="1200" height="800" data-path="images/widget-showcase.png" />
</Frame>

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

विजेट एम्बेड करने से पहले, [ThunderPhone Dashboard](https://app.thunderphone.com) में ये तीन चरण पूरे करें:

<Steps>
  <Step title="पब्लिश करने योग्य API key बनाएँ">
    डैशबोर्ड सेटिंग्स में **डेवलपर्स** पर जाएँ और एक पब्लिश करने योग्य key बनाएँ। पब्लिश करने योग्य keys `pk_live_` से शुरू होती हैं और क्लाइंट-साइड कोड में शामिल करना सुरक्षित है।
  </Step>

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

  <Step title="वेब विजेट बनाएँ">
    डैशबोर्ड में **वेब विजेट्स** पर जाएँ और एक विजेट बनाएँ। जिस एजेंट को एक्सपोज़ करना है और जिस पब्लिश करने योग्य key का उपयोग करना है, उसे चुनें। एजेंट आपकी पब्लिश करने योग्य key कॉन्फ़िगरेशन से स्वचालित रूप से निर्धारित होता है।
  </Step>
</Steps>

<Warning>
  पब्लिश करने योग्य keys (`pk_live_...`) आपके सीक्रेट API टोकन जैसी **नहीं** हैं। पब्लिश करने योग्य keys क्लाइंट-साइड उपयोग के लिए डिज़ाइन की गई हैं और आपके अनुमत डोमेन पर विजेट सेशन तक सीमित हैं। क्लाइंट-साइड कोड में कभी भी अपने सीक्रेट API टोकन का उपयोग न करें।
</Warning>

***

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

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

```bash theme={null}
npm install @thunderphone/widget
```

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

```tsx theme={null}
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 हैं:

| Prop           | डिफ़ॉल्ट                                 | विवरण                                                                            |
| -------------- | ---------------------------------------- | -------------------------------------------------------------------------------- |
| `theme`        | `'light'`                                | सफ़ेद ग्लास के लिए `'light'`, डार्क ग्लास के लिए `'dark'`                        |
| `primaryColor` | `'#000000'` (लाइट) / `'#ffffff'` (डार्क) | स्टार्ट बटन, वेवफ़ॉर्म और कनेक्टिंग इंडिकेटर के लिए एक्सेंट रंग                  |
| `title`        | `'Voice assistant'`                      | विजेट में दिखाया जाने वाला टेक्स्ट                                               |
| `position`     | `'bottom-right'`                         | व्यूपोर्ट कॉर्नर: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |

<CodeGroup>
  ```tsx Light theme (default) theme={null}
  <ThunderPhoneWidget
    publishableKey="pk_live_your_publishable_key"
  />
  ```

  ```tsx Dark theme with custom color theme={null}
  <ThunderPhoneWidget
    publishableKey="pk_live_your_publishable_key"
    theme="dark"
    primaryColor="#8b5cf6"
    title="Ask our AI"
  />
  ```
</CodeGroup>

दिखावट के बजाय सेशन को कस्टमाइज़ करने के लिए तीन और props हैं -- कॉल शुरू होने पर सभी को सेशन रिक्वेस्ट में फ़ॉरवर्ड किया जाता है:

| Prop       | विवरण                                                                                                       |
| ---------- | ----------------------------------------------------------------------------------------------------------- |
| `language` | प्रति-सेशन भाषा ओवरराइड -- `en`, `es`, या `fr-FR` जैसा कोई कोड या लोकेल                                     |
| `voice`    | प्रति-सेशन वॉइस ओवरराइड -- `maria` जैसा कोई वॉइस नाम                                                        |
| `context`  | एजेंट को भेजा गया तथ्यात्मक पेज या साइट कॉन्टेक्स्ट (सर्वर-साइड पर 12,000 कैरेक्टर तक ट्रंकेट किया जाता है) |

पूरी props तालिका के लिए [React कंपोनेंट रेफ़रेंस](/hi/widget/react) देखें।

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

***

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

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

<CardGroup cols={3}>
  <Card title="React कंपोनेंट" icon="react" href="/hi/widget/react">
    बिल्ट-इन कॉल कंट्रोल और स्टेटस डिस्प्ले के साथ पहले से बना UI कंपोनेंट। इंपोर्ट करें, props पास करें, हो गया।
  </Card>

  <Card title="हेडलेस हुक" icon="code" href="/hi/widget/headless-hook">
    UI पर पूरा नियंत्रण। आप अपना इंटरफ़ेस बनाते समय `useThunderPhone` हुक वॉइस सेशन को मैनेज करता है।
  </Card>

  <Card title="CDN / स्क्रिप्ट टैग" icon="globe" href="/hi/widget/cdn-script-tag">
    किसी बंडलर की आवश्यकता नहीं। स्टैटिक साइटों, WordPress और अन्य गैर-React एनवायरनमेंट के लिए स्क्रिप्ट टैग के माध्यम से विजेट लोड करें।
  </Card>
</CardGroup>

***

## स्टाइलिंग

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

<Note>
  मदद चाहिए? [support@thunderphone.com](mailto:support@thunderphone.com) पर हमसे संपर्क करें
</Note>