---
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` ఉపయోగించండి -- ఉత్పత్తి వివరాలు, ధరలు లేదా పేజీ-నిర్దిష్ట 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 క్లాస్‌లు మరియు అనుకూల ప్రాపర్టీల కోసం [స్టైలింగ్ గైడ్](/te/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="/te/widget/headless-hook">
    UIపై పూర్తి నియంత్రణ కావాలా? బదులుగా `useThunderPhone` హుక్‌ను ఉపయోగించండి.
  </Card>
  <Card title="స్టైలింగ్" icon="palette" href="/te/widget/styling">
    CSS కస్టమ్ ప్రాపర్టీలతో రంగులు, పరిమాణాలు మరియు లేఅవుట్‌ను అనుకూలీకరించండి.
  </Card>
</CardGroup>