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

സന്ദർശകൻ നിലവിൽ കാണുന്ന പേജിനെക്കുറിച്ചുള്ള വസ്തുതാപരമായ വിവരങ്ങൾ — ഉൽപ്പന്ന വിശദാംശങ്ങൾ, വിലനിർണയം, അല്ലെങ്കിൽ പേജ്-നിർദിഷ്ട FAQ-കൾ — ഏജന്റിന് നൽകാൻ `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 ക്ലാസുകളെയും ഇഷ്ടാനുസൃത പ്രോപ്പർട്ടികളെയും കുറിച്ച് അറിയാൻ [സ്റ്റൈലിംഗ് ഗൈഡ്](/ml/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="/ml/widget/headless-hook">
    UI-യിൽ പൂർണ്ണ നിയന്ത്രണം വേണോ? പകരം `useThunderPhone` ഹുക്ക് ഉപയോഗിക്കുക.
  </Card>
  <Card title="സ്റ്റൈലിംഗ്" icon="palette" href="/ml/widget/styling">
    CSS കസ്റ്റം പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് നിറങ്ങൾ, വലുപ്പങ്ങൾ, ലേഔട്ട് എന്നിവ ഇഷ്ടാനുസൃതമാക്കുക.
  </Card>
</CardGroup>