---
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>

---

## Props

કોમ્પોનન્ટ `ThunderPhoneWidgetProps` દ્વારા નીચેના props સ્વીકારે છે:

| Prop | પ્રકાર | જરૂરી | ડિફૉલ્ટ | વર્ણન |
|------|------|----------|---------|-------------|
| `publishableKey` | `string` | હા | -- | Developers સેટિંગ્સમાંથી પ્રકાશિત કરી શકાય તેવી 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 ક્લાસ અને કસ્ટમ પ્રોપર્ટી માટે [સ્ટાઇલિંગ માર્ગદર્શિકા](/gu/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="/gu/widget/headless-hook">
    UI પર સંપૂર્ણ નિયંત્રણ જોઈએ છે? તેના બદલે `useThunderPhone` હૂકનો ઉપયોગ કરો.
  </Card>
  <Card title="સ્ટાઇલિંગ" icon="palette" href="/gu/widget/styling">
    CSS કસ્ટમ પ્રોપર્ટીઝ સાથે રંગો, કદ અને લેઆઉટ કસ્ટમાઇઝ કરો.
  </Card>
</CardGroup>