---
title: "React ਕੰਪੋਨੈਂਟ"
description: "ThunderPhone ਵੌਇਸ ਵਿਜਿਟ ਨੂੰ React ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਐਂਬੈਡ ਕਰੋ"
---

`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` ਵਰਤੋ -- ਉਤਪਾਦ ਵੇਰਵੇ, ਕੀਮਤਾਂ ਜਾਂ ਪੰਨਾ-ਵਿਸ਼ੇਸ਼ FAQs। ਸਰਵਰ-ਸਾਈਡ ਇਸਨੂੰ 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 ਕਲਾਸਾਂ ਅਤੇ ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਜ਼ ਲਈ [ਸਟਾਈਲਿੰਗ ਗਾਈਡ](/pa/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>
  ਤੁਹਾਨੂੰ `apiBase` ਸਿਰਫ਼ ਤਦ ਹੀ ਸੈੱਟ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਜੇ ਤੁਸੀਂ ਸੈਲਫ-ਹੋਸਟਡ ਜਾਂ ਪ੍ਰੌਕਸੀ API ਐਂਡਪੌਇੰਟ ਵਰਤ ਰਹੇ ਹੋ। ਡਿਫਾਲਟ `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="/pa/widget/headless-hook">
    UI 'ਤੇ ਪੂਰਾ ਕੰਟਰੋਲ ਚਾਹੀਦਾ ਹੈ? ਇਸ ਦੀ ਬਜਾਏ `useThunderPhone` ਹੁੱਕ ਵਰਤੋ।
  </Card>
  <Card title="ਸਟਾਈਲਿੰਗ" icon="palette" href="/pa/widget/styling">
    CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਜ਼ ਨਾਲ ਰੰਗਾਂ, ਆਕਾਰਾਂ ਅਤੇ ਲੇਆਉਟ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰੋ।
  </Card>
</CardGroup>