---
title: "ਏਮਬੈਡ ਕਰਨ ਯੋਗ ਵੌਇਸ ਵਿਜੇਟ"
description: "ਕੋਡ ਦੀਆਂ ਕੁਝ ਲਾਈਨਾਂ ਨਾਲ ਕਿਸੇ ਵੀ ਵੈੱਬਸਾਈਟ ਵਿੱਚ ਵੌਇਸ AI ਏਜੰਟ ਸ਼ਾਮਲ ਕਰੋ"
---

ThunderPhone ਐਂਬੈਡ ਕਰਨ ਯੋਗ ਵੌਇਸ ਵਿਜਟ ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਦੇ ਵਿਜ਼ਿਟਰਾਂ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਸਿੱਧਾ ਇੱਕ AI ਏਜੰਟ ਨਾਲ ਗੱਲ ਕਰਨ ਦਿੰਦਾ ਹੈ। ਫ਼ੋਨ ਕਾਲ ਦੀ ਲੋੜ ਨਹੀਂ -- ਵਰਤੋਂਕਾਰ ਇੱਕ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹਨ ਅਤੇ ThunderPhone ਦੁਆਰਾ ਸੰਚਾਲਿਤ ਰੀਅਲ-ਟਾਈਮ ਵੌਇਸ ਗੱਲਬਾਤ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ।

ਵਿਜਟ ਇੱਕ ਗਲਾਸਮੋਰਫ਼ਿਕ ਬਾਰ ਵਜੋਂ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ ਜੋ ਹਲਕੇ ਅਤੇ ਗੂੜ੍ਹੇ ਥੀਮਾਂ ਅਨੁਸਾਰ ਢਲ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਅਨੁਕੂਲਿਤ ਐਕਸੈਂਟ ਰੰਗ ਅਤੇ ਸਥਿਤੀ ਹੁੰਦੀ ਹੈ। ਇਹ `@thunderphone/widget` npm ਪੈਕੇਜ ਵਜੋਂ ਵੰਡਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਗੈਰ-ਬੰਡਲਰ ਵਾਤਾਵਰਨਾਂ ਲਈ CDN ਰਾਹੀਂ ਵੀ ਉਪਲਬਧ ਹੈ।

<Frame>
  <img src="/images/widget-showcase.png" alt="ਵੱਖ-ਵੱਖ ਐਕਸੈਂਟ ਰੰਗਾਂ ਨਾਲ ਹਲਕੇ ਅਤੇ ਗੂੜ੍ਹੇ ਥੀਮਾਂ ਵਿੱਚ ThunderPhone ਵਿਜਟ" />
</Frame>

## ਪੂਰਵ-ਲੋੜਾਂ

ਵਿਜਟ ਨੂੰ ਐਂਬੈਡ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, [ThunderPhone ਡੈਸ਼ਬੋਰਡ](https://app.thunderphone.com) ਵਿੱਚ ਇਹ ਤਿੰਨ ਕਦਮ ਪੂਰੇ ਕਰੋ:

<Steps>
<Step title="ਪਬਲਿਸ਼ ਕਰਨ ਯੋਗ API ਕੁੰਜੀ ਬਣਾਓ">
  ਡੈਸ਼ਬੋਰਡ ਸੈਟਿੰਗਾਂ ਵਿੱਚ **ਡਿਵੈਲਪਰਜ਼** 'ਤੇ ਜਾਓ ਅਤੇ ਪਬਲਿਸ਼ ਕਰਨ ਯੋਗ ਕੁੰਜੀ ਬਣਾਓ। ਪਬਲਿਸ਼ ਕਰਨ ਯੋਗ ਕੁੰਜੀਆਂ `pk_live_` ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੀਆਂ ਹਨ ਅਤੇ ਕਲਾਇੰਟ-ਸਾਈਡ ਕੋਡ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਸੁਰੱਖਿਅਤ ਹਨ।
</Step>

<Step title="ਮਨਜ਼ੂਰਸ਼ੁਦਾ ਡੋਮੇਨ ਸੰਰਚਿਤ ਕਰੋ">
  ਉਸੇ ਡਿਵੈਲਪਰਜ਼ ਸੈਟਿੰਗਾਂ ਵਿੱਚ, ਉਹ ਡੋਮੇਨ ਸ਼ਾਮਲ ਕਰੋ ਜਿੱਥੇ ਵਿਜਟ ਐਂਬੈਡ ਕੀਤਾ ਜਾਵੇਗਾ। ਵਿਕਾਸ ਲਈ `localhost` ਹਮੇਸ਼ਾ ਮਨਜ਼ੂਰ ਹੁੰਦਾ ਹੈ। ਵਾਈਲਡਕਾਰਡ ਸਮਰਥਿਤ ਹਨ (ਉਦਾਹਰਨ ਲਈ, `*.example.com`)।
</Step>

<Step title="ਵੈੱਬ ਵਿਜਟ ਬਣਾਓ">
  ਡੈਸ਼ਬੋਰਡ ਵਿੱਚ **ਵੈੱਬ ਵਿਜਟਸ** 'ਤੇ ਜਾਓ ਅਤੇ ਇੱਕ ਵਿਜਟ ਬਣਾਓ। ਉਹ ਏਜੰਟ ਚੁਣੋ ਜਿਸਨੂੰ ਤੁਸੀਂ ਉਪਲਬਧ ਕਰਵਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਅਤੇ ਵਰਤਣ ਲਈ ਪਬਲਿਸ਼ ਕਰਨ ਯੋਗ ਕੁੰਜੀ ਚੁਣੋ। ਏਜੰਟ ਤੁਹਾਡੀ ਪਬਲਿਸ਼ ਕਰਨ ਯੋਗ ਕੁੰਜੀ ਦੀ ਸੰਰਚਨਾ ਤੋਂ ਆਪਣੇ ਆਪ ਨਿਰਧਾਰਤ ਹੁੰਦਾ ਹੈ।
</Step>
</Steps>

<Warning>
  ਪਬਲਿਸ਼ ਕਰਨ ਯੋਗ ਕੁੰਜੀਆਂ (`pk_live_...`) ਤੁਹਾਡੇ ਗੁਪਤ API ਟੋਕਨਾਂ ਵਰਗੀਆਂ **ਨਹੀਂ** ਹਨ। ਪਬਲਿਸ਼ ਕਰਨ ਯੋਗ ਕੁੰਜੀਆਂ ਕਲਾਇੰਟ-ਸਾਈਡ ਵਰਤੋਂ ਲਈ ਬਣਾਈਆਂ ਗਈਆਂ ਹਨ ਅਤੇ ਤੁਹਾਡੇ ਮਨਜ਼ੂਰਸ਼ੁਦਾ ਡੋਮੇਨਾਂ 'ਤੇ ਵਿਜਟ ਸੈਸ਼ਨਾਂ ਤੱਕ ਸੀਮਿਤ ਹਨ। ਕਲਾਇੰਟ-ਸਾਈਡ ਕੋਡ ਵਿੱਚ ਕਦੇ ਵੀ ਆਪਣਾ ਗੁਪਤ API ਟੋਕਨ ਨਾ ਵਰਤੋ।
</Warning>

---

## ਤੁਰੰਤ ਸ਼ੁਰੂਆਤ

ਪੈਕੇਜ ਇੰਸਟਾਲ ਕਰੋ:

```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"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}
```

ਬੱਸ ਇੰਨਾ ਹੀ। ਤੁਹਾਡੇ ਵਰਤੋਂਕਾਰਾਂ ਨੂੰ ਇੱਕ ਗਲਾਸਮੋਰਫ਼ਿਕ ਕਾਲ ਬਾਰ ਦਿਖਾਈ ਦੇਵੇਗੀ ਜੋ ਉਨ੍ਹਾਂ ਨੂੰ ਇੱਕ ਕਲਿੱਕ ਨਾਲ ਤੁਹਾਡੇ AI ਏਜੰਟ ਨਾਲ ਜੋੜਦੀ ਹੈ।

---

## ਅਨੁਕੂਲਤਾ

ਵਿਜਟ ਵਿੱਚ ਦਿੱਖ ਲਈ ਚਾਰ ਪ੍ਰਾਪ ਹਨ:

| ਪ੍ਰਾਪ | ਡਿਫਾਲਟ | ਵੇਰਵਾ |
|------|---------|-------------|
| `theme` | `'light'` | ਚਿੱਟੇ ਕੱਚ ਲਈ `'light'`, ਗੂੜ੍ਹੇ ਕੱਚ ਲਈ `'dark'` |
| `primaryColor` | `'#000000'` (ਹਲਕਾ) / `'#ffffff'` (ਗੂੜ੍ਹਾ) | ਸ਼ੁਰੂ ਬਟਨ, ਵੇਵਫਾਰਮ ਅਤੇ ਕਨੈਕਟਿੰਗ ਸੰਕੇਤਕ ਲਈ ਐਕਸੈਂਟ ਰੰਗ |
| `title` | `'Voice assistant'` | ਵਿਜਟ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਣ ਵਾਲਾ ਟੈਕਸਟ |
| `position` | `'bottom-right'` | ਵਿਊਪੋਰਟ ਕੋਨਾ: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |

<CodeGroup>
```tsx Light theme (default)
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>
```

```tsx Dark theme with custom color
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>
```
</CodeGroup>

ਤਿੰਨ ਹੋਰ ਪ੍ਰਾਪ ਦਿੱਖ ਦੀ ਬਜਾਏ ਸੈਸ਼ਨ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਦੇ ਹਨ -- ਕਾਲ ਸ਼ੁਰੂ ਹੋਣ 'ਤੇ ਸਾਰੇ ਸੈਸ਼ਨ ਬੇਨਤੀ ਨੂੰ ਅੱਗੇ ਭੇਜੇ ਜਾਂਦੇ ਹਨ:

| ਪ੍ਰਾਪ | ਵੇਰਵਾ |
|------|-------------|
| `language` | ਪ੍ਰਤੀ-ਸੈਸ਼ਨ ਭਾਸ਼ਾ ਓਵਰਰਾਈਡ -- `en`, `es`, ਜਾਂ `fr-FR` ਵਰਗਾ ਕੋਡ ਜਾਂ ਲੋਕੇਲ |
| `voice` | ਪ੍ਰਤੀ-ਸੈਸ਼ਨ ਵੌਇਸ ਓਵਰਰਾਈਡ -- `maria` ਵਰਗਾ ਵੌਇਸ ਨਾਮ |
| `context` | ਏਜੰਟ ਨੂੰ ਭੇਜਿਆ ਜਾਣ ਵਾਲਾ ਤੱਥਾਤਮਕ ਪੰਨਾ ਜਾਂ ਸਾਈਟ ਸੰਦਰਭ (ਸਰਵਰ-ਸਾਈਡ 'ਤੇ 12,000 ਅੱਖਰਾਂ ਤੱਕ ਛੋਟਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ) |

ਪ੍ਰਾਪਾਂ ਦੀ ਪੂਰੀ ਸਾਰਣੀ ਲਈ [React ਕੰਪੋਨੈਂਟ ਰੈਫਰੈਂਸ](/pa/widget/react) ਦੇਖੋ।

ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਨੁਕੂਲਿਤ UI ਲਈ, ਆਪਣਾ ਇੰਟਰਫੇਸ ਬਣਾਉਂਦੇ ਹੋਏ ਵੌਇਸ ਸੈਸ਼ਨ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਲਈ [ਹੈੱਡਲੈੱਸ ਹੁੱਕ](/pa/widget/headless-hook) ਵਰਤੋ। ਹੁੱਕ ਆਡੀਓ-ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਵਿਜ਼ੁਅਲਾਈਜ਼ੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਰੀਅਲ-ਟਾਈਮ ਆਡੀਓ ਪੱਧਰ ਉਪਲਬਧ ਕਰਵਾਉਂਦਾ ਹੈ।

---

## ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਵਿਕਲਪ

ਉਹ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਵਿਧੀ ਚੁਣੋ ਜੋ ਤੁਹਾਡੇ ਸਟੈਕ ਲਈ ਢੁੱਕਵੀਂ ਹੋਵੇ:

<CardGroup cols={3}>
  <Card title="React ਕੰਪੋਨੈਂਟ" icon="react" href="/pa/widget/react">
    ਬਿਲਟ-ਇਨ ਕਾਲ ਕੰਟਰੋਲਾਂ ਅਤੇ ਸਥਿਤੀ ਡਿਸਪਲੇ ਵਾਲਾ ਪਹਿਲਾਂ ਤੋਂ ਬਣਿਆ UI ਕੰਪੋਨੈਂਟ। ਇੰਪੋਰਟ ਕਰੋ, props ਪਾਸ ਕਰੋ, ਹੋ ਗਿਆ।
  </Card>
  <Card title="ਹੈੱਡਲੈੱਸ ਹੁੱਕ" icon="code" href="/pa/widget/headless-hook">
    UI ਉੱਤੇ ਪੂਰਾ ਕੰਟਰੋਲ। `useThunderPhone` ਹੁੱਕ ਵੌਇਸ ਸੈਸ਼ਨ ਸੰਭਾਲਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਤੁਸੀਂ ਆਪਣਾ ਇੰਟਰਫੇਸ ਬਣਾਉਂਦੇ ਹੋ।
  </Card>
  <Card title="CDN / ਸਕ੍ਰਿਪਟ ਟੈਗ" icon="globe" href="/pa/widget/cdn-script-tag">
    ਕਿਸੇ ਬੰਡਲਰ ਦੀ ਲੋੜ ਨਹੀਂ। ਸਟੈਟਿਕ ਸਾਈਟਾਂ, WordPress ਅਤੇ ਹੋਰ ਗੈਰ-React ਵਾਤਾਵਰਨਾਂ ਲਈ ਸਕ੍ਰਿਪਟ ਟੈਗ ਰਾਹੀਂ ਵਿਜੇਟ ਲੋਡ ਕਰੋ।
  </Card>
</CardGroup>

---

## ਸਟਾਈਲਿੰਗ

ਵਿਜੇਟ ਵਿੱਚ `theme` prop ਦੁਆਰਾ ਨਿਯੰਤਰਿਤ ਬਿਲਟ-ਇਨ ਹਲਕੇ ਅਤੇ ਗੂੜ੍ਹੇ ਥੀਮ, ਅਤੇ `primaryColor` prop ਦੁਆਰਾ ਨਿਯੰਤਰਿਤ ਐਕਸੈਂਟ ਰੰਗ ਸ਼ਾਮਲ ਹਨ। ਹੋਰ ਡੂੰਘੀ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਲਈ, ਤੁਸੀਂ CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਜ਼ ਅਤੇ ਕਲਾਸਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰ ਸਕਦੇ ਹੋ। ਵੇਰਵਿਆਂ ਲਈ [ਸਟਾਈਲਿੰਗ ਗਾਈਡ](/pa/widget/styling) ਵੇਖੋ।

<Note>
  ਮਦਦ ਚਾਹੀਦੀ ਹੈ? ਸਾਡੇ ਨਾਲ [support@thunderphone.com](mailto:support@thunderphone.com) 'ਤੇ ਸੰਪਰਕ ਕਰੋ
</Note>