---
title: "एम्बेड करता येणारे व्हॉइस विजेट"
description: "काही ओळींच्या कोडसह कोणत्याही वेबसाइटवर व्हॉइस AI एजंट जोडा"
---

ThunderPhone एम्बेड करता येणारे व्हॉइस विजेट तुमच्या वेबसाइट अभ्यागतांना ब्राउझरमधून थेट AI एजंटशी बोलू देते. फोन कॉलची गरज नाही -- वापरकर्ते बटणावर क्लिक करतात आणि ThunderPhone द्वारे समर्थित रिअल-टाइम व्हॉइस संभाषण सुरू करतात.

हे विजेट ग्लासमॉर्फिक बार म्हणून रेंडर होते, जे सानुकूल करता येणारे अॅक्सेंट रंग आणि पोझिशनिंगसह लाइट व डार्क थीमशी जुळवून घेते. हे `@thunderphone/widget` npm पॅकेज म्हणून वितरित केले जाते आणि नॉन-बंडलर वातावरणांसाठी CDN द्वारेही उपलब्ध आहे.

<Frame>
  <img src="/images/widget-showcase.png" alt="विविध अॅक्सेंट रंगांसह लाइट आणि डार्क थीममधील ThunderPhone विजेट" />
</Frame>

## पूर्वअटी

विजेट एम्बेड करण्यापूर्वी, [ThunderPhone डॅशबोर्ड](https://app.thunderphone.com) मध्ये या तीन पायऱ्या पूर्ण करा:

<Steps>
<Step title="प्रकाशनयोग्य API की तयार करा">
  डॅशबोर्ड सेटिंग्जमधील **विकासक** विभागात जा आणि प्रकाशनयोग्य की तयार करा. प्रकाशनयोग्य की `pk_live_` ने सुरू होतात आणि क्लायंट-साइड कोडमध्ये समाविष्ट करणे सुरक्षित असते.
</Step>

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

<Step title="वेब विजेट तयार करा">
  डॅशबोर्डमधील **वेब विजेट्स** विभागात जा आणि विजेट तयार करा. तुम्हाला उपलब्ध करून द्यायचा एजंट आणि वापरायची प्रकाशनयोग्य की निवडा. तुमच्या प्रकाशनयोग्य की कॉन्फिगरेशनमधून एजंट आपोआप निश्चित केला जातो.
</Step>
</Steps>

<Warning>
  प्रकाशनयोग्य की (`pk_live_...`) तुमच्या गुप्त API टोकन्ससारख्या **नाहीत**. प्रकाशनयोग्य की क्लायंट-साइड वापरासाठी डिझाइन केलेल्या आहेत आणि तुमच्या अनुमत डोमेन्सवरील विजेट सेशन्सपुरत्या मर्यादित असतात. क्लायंट-साइड कोडमध्ये तुमचे गुप्त API टोकन कधीही वापरू नका.
</Warning>

---

## जलद सुरुवात

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

```bash
npm install @thunderphone/widget
```

तुमच्या अॅपमध्ये विजेट जोडा:

```tsx
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 एजंटशी जोडतो.

---

## सानुकूलन

विजेटमध्ये दिसण्यासाठी चार प्रॉप्स आहेत:

| प्रॉप | डीफॉल्ट | वर्णन |
|------|---------|-------------|
| `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)
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>
```

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

आणखी तीन प्रॉप्स स्वरूपाऐवजी सेशन सानुकूलित करतात -- कॉल सुरू झाल्यावर ते सर्व सेशन विनंतीकडे फॉरवर्ड केले जातात:

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

संपूर्ण प्रॉप्स तक्त्यासाठी [React कंपोनंट संदर्भ](/mr/widget/react) पहा.

पूर्णपणे सानुकूल UI साठी, तुमचा स्वतःचा इंटरफेस तयार करताना व्हॉइस सेशन व्यवस्थापित करण्यासाठी [हेडलेस हुक](/mr/widget/headless-hook) वापरा. ऑडिओ-रिअॅक्टिव्ह व्हिज्युअलायझेशन तयार करण्यासाठी हुक रिअल-टाइम ऑडिओ पातळी उपलब्ध करून देतो.

---

## एकत्रीकरण पर्याय

तुमच्या स्टॅकला अनुरूप असलेली एकत्रीकरण पद्धत निवडा:

<CardGroup cols={3}>
  <Card title="React घटक" icon="react" href="/mr/widget/react">
    अंगभूत कॉल नियंत्रणे आणि स्थिती प्रदर्शनासह पूर्वनिर्मित UI घटक. इंपोर्ट करा, props पास करा, झाले.
  </Card>
  <Card title="हेडलेस हुक" icon="code" href="/mr/widget/headless-hook">
    UI वर पूर्ण नियंत्रण. तुम्ही तुमचा स्वतःचा इंटरफेस तयार करत असताना `useThunderPhone` हुक व्हॉइस सत्र व्यवस्थापित करतो.
  </Card>
  <Card title="CDN / स्क्रिप्ट टॅग" icon="globe" href="/mr/widget/cdn-script-tag">
    बंडलरची आवश्यकता नाही. स्टॅटिक साइट्स, WordPress आणि इतर non-React वातावरणांसाठी स्क्रिप्ट टॅगद्वारे विजेट लोड करा.
  </Card>
</CardGroup>

---

## स्टायलिंग

विजेटमध्ये `theme` prop द्वारे नियंत्रित अंगभूत लाइट आणि डार्क थीम्स तसेच `primaryColor` prop द्वारे नियंत्रित अॅक्सेंट रंग उपलब्ध आहेत. अधिक सखोल सानुकूलनासाठी, तुम्ही CSS कस्टम प्रॉपर्टीज आणि क्लासेस ओव्हरराइड करू शकता. तपशीलांसाठी [स्टायलिंग मार्गदर्शक](/mr/widget/styling) पहा.

<Note>
  मदत हवी आहे? [support@thunderphone.com](mailto:support@thunderphone.com) वर आमच्याशी संपर्क साधा
</Note>