---
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` ಪ್ರಾಪ್‌ಗಳನ್ನು ಸೆಷನ್ ವಿನಂತಿಗೆ (`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` ಬಳಸಿ -- ಉತ್ಪನ್ನದ ವಿವರಗಳು, ಬೆಲೆ ನಿಗದಿ ಅಥವಾ ಪುಟ-ನಿರ್ದಿಷ್ಟ FAQಗಳು. ಇದನ್ನು ಸರ್ವರ್-ಸೈಡ್‌ನಲ್ಲಿ 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 ಕ್ಲಾಸ್‌ಗಳು ಮತ್ತು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗಾಗಿ [ಸ್ಟೈಲಿಂಗ್ ಮಾರ್ಗದರ್ಶಿ](/kn/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="/kn/widget/headless-hook">
    UI ಮೇಲೆ ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣ ಬೇಕೇ? ಬದಲಿಗೆ `useThunderPhone` ಹುಕ್ ಬಳಸಿ.
  </Card>
  <Card title="ಶೈಲೀಕರಣ" icon="palette" href="/kn/widget/styling">
    CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ಬಣ್ಣಗಳು, ಗಾತ್ರಗಳು ಮತ್ತು ಲೇಔಟ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ.
  </Card>
</CardGroup>