---
title: "React घटक"
description: "React अनुप्रयोगात ThunderPhone व्हॉइस विजेट एम्बेड करा"
---

`ThunderPhoneWidget` कॉम्पोनंट म्यूट करणे, कॉल समाप्त करणे आणि कनेक्शन स्थिती दाखवणे यासाठी अंगभूत नियंत्रणे असलेला ग्लासमॉर्फिक कॉल बार रेंडर करतो. React अॅपमध्ये व्हॉइस AI जोडण्याचा हा सर्वात जलद मार्ग आहे.

## स्थापना

```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"
    />
  )
}
```

<Warning>
  विजेट योग्यरीत्या रेंडर होण्यासाठी तुम्ही CSS फाइल इंपोर्ट करणे **आवश्यक** आहे. त्याशिवाय, विजेटला स्टाइल लागू होणार नाही.
</Warning>

---

## प्रॉप्स

कॉम्पोनंट `ThunderPhoneWidgetProps` द्वारे खालील प्रॉप्स स्वीकारतो:

| प्रॉप | प्रकार | आवश्यक | डीफॉल्ट | वर्णन |
|------|------|----------|---------|-------------|
| `publishableKey` | `string` | होय | -- | डेव्हलपर्स सेटिंग्जमधील प्रकाशित करता येणारी API की (`pk_live_...`). कीच्या विजेट कॉन्फिगरेशनमधून एजंट आपोआप निश्चित केला जातो. |
| `theme` | `'light' \| 'dark'` | नाही | `'light'` | रंगसंगती. विजेट रूटला `tp--light` किंवा `tp--dark` क्लास लागू करतो. |
| `primaryColor` | `string` | नाही | `'#000000'` (हलकी) / `'#ffffff'` (गडद) | अॅक्सेंट रंग म्हणून वापरली जाणारी CSS रंग स्ट्रिंग (कॉल बटण, वेव्हफॉर्म, सक्रिय निर्देशक). |
| `title` | `string` | नाही | `'Voice assistant'` | विजेट बारमध्ये दाखवला जाणारा मजकूर. |
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | नाही | `'bottom-right'` | विजेटसाठी स्थिर व्ह्यूपोर्ट स्थान. |
| `apiBase` | `string` | नाही | `'https://api.thunderphone.com/v1'` | API बेस URL ओव्हरराइड. |
| `language` | `string` | नाही | -- | प्रति-सेशन भाषा ओव्हरराइड -- `en`, `es` किंवा `fr-FR` सारखा भाषा कोड किंवा लोकेल. सेट नसल्यास, एजंटची कॉन्फिगर केलेली भाषा लागू होते. |
| `voice` | `string` | नाही | -- | प्रति-सेशन आवाज ओव्हरराइड -- `maria` सारखे आवाजाचे नाव. सेट नसल्यास, एजंटचा कॉन्फिगर केलेला आवाज लागू होतो. |
| `context` | `string` | नाही | -- | एजंटकडे पाठवला जाणारा प्रति-सेशन तथ्यात्मक पृष्ठ किंवा साइट संदर्भ (उदाहरणार्थ, अभ्यागत पाहत असलेल्या पृष्ठाचे तपशील). सर्व्हर-साइडवर 12,000 वर्णांपर्यंत संक्षिप्त केला जातो. |
| `onConnect` | `() => void` | नाही | -- | व्हॉइस सेशन यशस्वीरीत्या कनेक्ट झाल्यावर कॉल केला जातो. |
| `onDisconnect` | `() => void` | नाही | -- | सेशन समाप्त झाल्यावर कॉल केला जातो. |
| `onError` | `(error) => void` | नाही | -- | त्रुटी आल्यावर कॉल केला जातो. `error` ऑब्जेक्टमध्ये `error` (कोड) आणि `message` फील्ड असतात. |
| `className` | `string` | नाही | -- | विजेट कंटेनरला लागू होणारे अतिरिक्त CSS क्लास नाव. |
| `ringtone` | `boolean \| string` | नाही | `false` | कनेक्ट करताना रिंगटोन वाजवा. डीफॉल्ट रिंगटोनसाठी `true` किंवा सानुकूल ऑडिओसाठी URL स्ट्रिंग. |

---

## उदाहरणे

### सानुकूल रंगासह गडद थीम

```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"
      title="Talk to our AI"
    />
  )
}
```

### सानुकूल स्थान

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      position="bottom-left"
    />
  )
}
```

### प्रत्येक सेशनसाठी भाषा, आवाज आणि संदर्भ

कॉल सुरू झाल्यावर `language`, `voice`, आणि `context` props सेशन विनंतीकडे (`POST /widget/session`) पाठवले जातात, ज्यामुळे त्या सेशनसाठी एजंटचे कॉन्फिगर केलेले डीफॉल्ट बदलले जातात:

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function PricingPageWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      language="es"
      voice="maria"
      context="Page: Pricing. Plans: Starter $29/mo, Pro $99/mo. Annual billing saves 20%."
    />
  )
}
```

वापरकर्ता ज्या पृष्ठावर आहे त्याबद्दल एजंटला तथ्यात्मक माहिती देण्यासाठी `context` वापरा -- उत्पादन तपशील, किंमत किंवा पृष्ठ-विशिष्ट वारंवार विचारले जाणारे प्रश्न. सर्व्हर-साइडवर ते 12,000 वर्णांपर्यंत संक्षिप्त केले जाते.

### इव्हेंट कॉलबॅकसह

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function SupportWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      onConnect={() => {
        console.log('Voice session connected')
        analytics.track('widget_call_started')
      }}
      onDisconnect={() => {
        console.log('Voice session ended')
        analytics.track('widget_call_ended')
      }}
      onError={(error) => {
        console.error(`Widget error: ${error.error} - ${error.message}`)
      }}
    />
  )
}
```

### सानुकूल स्टाइलिंगसह

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function BrandedWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      primaryColor="#4a90d9"
      className="my-custom-widget"
    />
  )
}
```

```css
.my-custom-widget .tp-button--end {
  background-color: #e74c3c;
}
```

उपलब्ध सर्व CSS क्लासेस आणि सानुकूल गुणधर्मांसाठी [स्टाइलिंग मार्गदर्शक](/mr/widget/styling) पहा.

### रिंगटोनसह

कनेक्शन स्थापित होत असताना फोन वाजण्याचा आवाज वाजवा:

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function PhoneWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      ringtone={true}
    />
  )
}
```

ऑडिओ फाइल URL देऊन सानुकूल रिंगटोन वापरा:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  ringtone="https://example.com/my-ringtone.mp3"
/>
```

विजेट `connecting` स्थितीत असताना रिंगटोन सतत वाजते आणि एजंट कनेक्ट झाल्यावर ती सहजपणे मंद होते.

### सानुकूल API बेससह

<Tip>
  तुम्ही सेल्फ-होस्टेड किंवा प्रॉक्सी API एंडपॉइंट वापरत असाल तरच `apiBase` सेट करणे आवश्यक आहे. डीफॉल्ट `https://api.thunderphone.com/v1` कडे निर्देशित करते.
</Tip>

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  apiBase="https://your-proxy.example.com/v1"
/>
```

---

## त्रुटी हाताळणी

`onError` कॉलबॅक ट्रिगर झाल्यावर, त्याला दोन फील्ड असलेला त्रुटी ऑब्जेक्ट प्राप्त होतो:

| फील्ड | प्रकार | वर्णन |
|-------|------|-------------|
| `error` | `string` | मशीन-वाचनीय त्रुटी कोड |
| `message` | `string` | मानव-वाचनीय त्रुटीचे वर्णन |

सामान्य त्रुटी कोडमध्ये डोमेनला परवानगी नाही, एजंट सापडला नाही आणि अवैध API की यांचा समावेश होतो.

---

## पुढील पायऱ्या

<CardGroup cols={2}>
  <Card title="हेडलेस हुक" icon="code" href="/mr/widget/headless-hook">
    UI वर पूर्ण नियंत्रण हवे आहे? त्याऐवजी `useThunderPhone` हुक वापरा.
  </Card>
  <Card title="स्टाइलिंग" icon="palette" href="/mr/widget/styling">
    CSS कस्टम प्रॉपर्टीजसह रंग, आकार आणि लेआउट सानुकूलित करा.
  </Card>
</CardGroup>