---
title: "ಎಂಬೆಡ್ ಮಾಡಬಹುದಾದ ಧ್ವನಿ ವಿಜೆಟ್"
description: "ಕೆಲವು ಸಾಲುಗಳ ಕೋಡ್‌ನೊಂದಿಗೆ ಯಾವುದೇ ವೆಬ್‌ಸೈಟ್‌ಗೆ ಧ್ವನಿ AI ಏಜೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿ"
---

ThunderPhone ಎಂಬೆಡ್ ಮಾಡಬಹುದಾದ ಧ್ವನಿ ವಿಜೆಟ್ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಸಂದರ್ಶಕರಿಗೆ ಬ್ರೌಸರ್‌ನಿಂದಲೇ AI ಏಜೆಂಟ್ ಜೊತೆಗೆ ಮಾತನಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಫೋನ್ ಕರೆ ಅಗತ್ಯವಿಲ್ಲ -- ಬಳಕೆದಾರರು ಒಂದು ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ ThunderPhone ಚಾಲಿತ ನೈಜ-ಸಮಯದ ಧ್ವನಿ ಸಂಭಾಷಣೆಯನ್ನು ಆರಂಭಿಸುತ್ತಾರೆ.

ವಿಜೆಟ್ ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದಾದ ಆ್ಯಕ್ಸೆಂಟ್ ಬಣ್ಣಗಳು ಮತ್ತು ಸ್ಥಾನೀಕರಣದೊಂದಿಗೆ, ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಥೀಮ್‌ಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಗಾಜಿನಂತಹ ಬಾರ್ ಆಗಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಇದನ್ನು `@thunderphone/widget` npm ಪ್ಯಾಕೇಜ್ ಆಗಿ ವಿತರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಬಂಡ್ಲರ್ ಅಲ್ಲದ ಪರಿಸರಗಳಿಗಾಗಿ CDN ಮೂಲಕವೂ ಲಭ್ಯವಿದೆ.

<Frame>
  <img src="/images/widget-showcase.png" alt="ThunderPhone widget in light and dark themes with various accent colors" />
</Frame>

## ಪೂರ್ವಾಪೇಕ್ಷಿತಗಳು

ವಿಜೆಟ್ ಅನ್ನು ಎಂಬೆಡ್ ಮಾಡುವ ಮೊದಲು, [ThunderPhone Dashboard](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 ಘಟಕ ಉಲ್ಲೇಖ](/kn/widget/react) ನೋಡಿ.

ಸಂಪೂರ್ಣವಾಗಿ ಕಸ್ಟಮ್ UI ಗಾಗಿ, ನಿಮ್ಮದೇ ಇಂಟರ್‌ಫೇಸ್ ನಿರ್ಮಿಸುವಾಗ ಧ್ವನಿ ಸೆಷನ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು [ಹೆಡ್‌ಲೆಸ್ ಹುಕ್](/kn/widget/headless-hook) ಬಳಸಿ. ಆಡಿಯೊ-ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ದೃಶ್ಯೀಕರಣಗಳನ್ನು ನಿರ್ಮಿಸಲು ಹುಕ್ ನೈಜ-ಸಮಯದ ಆಡಿಯೊ ಮಟ್ಟಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

---

## ಏಕೀಕರಣ ಆಯ್ಕೆಗಳು

ನಿಮ್ಮ ಸ್ಟ್ಯಾಕ್‌ಗೆ ಹೊಂದುವ ಏಕೀಕರಣ ವಿಧಾನವನ್ನು ಆಯ್ಕೆಮಾಡಿ:

<CardGroup cols={3}>
  <Card title="React ಘಟಕ" icon="react" href="/kn/widget/react">
    ಅಂತರ್ನಿರ್ಮಿತ ಕರೆ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಸ್ಥಿತಿ ಪ್ರದರ್ಶನವಿರುವ ಪೂರ್ವನಿರ್ಮಿತ UI ಘಟಕ. ಇಂಪೋರ್ಟ್ ಮಾಡಿ, ಪ್ರಾಪ್ಸ್ ನೀಡಿ, ಮುಗಿಯಿತು.
  </Card>
  <Card title="ಹೆಡ್‌ಲೆಸ್ ಹೂಕ್" icon="code" href="/kn/widget/headless-hook">
    UI ಮೇಲೆ ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣ. ನೀವು ನಿಮ್ಮದೇ ಇಂಟರ್‌ಫೇಸ್ ನಿರ್ಮಿಸುವಾಗ `useThunderPhone` ಹೂಕ್ ಧ್ವನಿ ಸೆಷನ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.
  </Card>
  <Card title="CDN / ಸ್ಕ್ರಿಪ್ಟ್ ಟ್ಯಾಗ್" icon="globe" href="/kn/widget/cdn-script-tag">
    ಬಂಡ್ಲರ್ ಅಗತ್ಯವಿಲ್ಲ. ಸ್ಥಿರ ಸೈಟ್‌ಗಳು, WordPress ಮತ್ತು ಇತರ React-ಅಲ್ಲದ ಪರಿಸರಗಳಿಗಾಗಿ ಸ್ಕ್ರಿಪ್ಟ್ ಟ್ಯಾಗ್ ಮೂಲಕ ವಿಜೆಟ್ ಲೋಡ್ ಮಾಡಿ.
  </Card>
</CardGroup>

---

## ರೂಪವಿನ್ಯಾಸ

ವಿಜೆಟ್‌ನಲ್ಲಿ `theme` ಪ್ರಾಪ್ ಮೂಲಕ ನಿಯಂತ್ರಿಸಲ್ಪಡುವ ಅಂತರ್ನಿರ್ಮಿತ ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಥೀಮ್‌ಗಳು ಹಾಗೂ `primaryColor` ಪ್ರಾಪ್ ಮೂಲಕ ನಿಯಂತ್ರಿಸಲ್ಪಡುವ ಆಕ್ಸೆಂಟ್ ಬಣ್ಣವಿದೆ. ಇನ್ನಷ್ಟು ಆಳವಾದ ಕಸ್ಟಮೈಸೇಶನ್‌ಗಾಗಿ, ನೀವು CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು ಮತ್ತು ಕ್ಲಾಸ್‌ಗಳನ್ನು ಓವರ್‌ರೈಡ್ ಮಾಡಬಹುದು. ವಿವರಗಳಿಗಾಗಿ [ರೂಪವಿನ್ಯಾಸ ಮಾರ್ಗದರ್ಶಿ](/kn/widget/styling) ನೋಡಿ.

<Note>
  ಸಹಾಯ ಬೇಕೇ? [support@thunderphone.com](mailto:support@thunderphone.com) ನಲ್ಲಿ ನಮ್ಮನ್ನು ಸಂಪರ್ಕಿಸಿ
</Note>