---
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 கோப்பை **கட்டாயம்** import செய்ய வேண்டும். அது இல்லையெனில், விட்ஜெட்டில் ஸ்டைலிங் இருக்காது.
</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 வகுப்புகள் மற்றும் தனிப்பயன் பண்புகளுக்கு [ஸ்டைலிங் வழிகாட்டியை](/ta/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="/ta/widget/headless-hook">
    UI மீது முழுக் கட்டுப்பாடு வேண்டுமா? அதற்கு பதிலாக `useThunderPhone` ஹுக்கைப் பயன்படுத்துங்கள்.
  </Card>
  <Card title="ஸ்டைலிங்" icon="palette" href="/ta/widget/styling">
    CSS தனிப்பயன் பண்புகளுடன் நிறங்கள், அளவுகள் மற்றும் லேஅவுட்டை தனிப்பயனாக்குங்கள்.
  </Card>
</CardGroup>