---
title: "ವೆಬ್ ವಿಜೆಟ್ ಅನ್ನು ಎಂಬೆಡ್ ಮಾಡಿ"
description: "ಒಂದೇ ಸ್ಕ್ರಿಪ್ಟ್ ಟ್ಯಾಗ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ಮಾರ್ಕೆಟಿಂಗ್ ಅಥವಾ ಬೆಂಬಲ ಸೈಟ್‌ಗೆ ಧ್ವನಿ ಏಜೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿ — ಭೇಟಿ ನೀಡುವವರು ಫೋನ್ ಸಂಖ್ಯೆಯ ಅಗತ್ಯವಿಲ್ಲದೆ ಬ್ರೌಸರ್‌ನಿಂದಲೇ ಅದರೊಂದಿಗೆ ಮಾತನಾಡಬಹುದು."
---

ವೆಬ್ ವಿಜೆಟ್ ನಿಮ್ಮ ಸೈಟ್ ಸಂದರ್ಶಕರಿಗೆ ಬ್ರೌಸರ್‌ನ ಮೈಕ್ರೊಫೋನ್ ಬಳಸಿ AI ಏಜೆಂಟ್‌ನೊಂದಿಗೆ ಕ್ಲಿಕ್-ಟು-ಟಾಕ್ ಸಂಭಾಷಣೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ತನ್ನದೇ ಆದ [SDK ಉಲ್ಲೇಖ](/kn/widget/overview) ಹೊಂದಿರುವ ಪ್ರತ್ಯೇಕ JavaScript / React SDK ಆಗಿದೆ
— ಈ ಮಾರ್ಗದರ್ಶಿ ವಿಜೆಟ್‌ಗೆ ಅಗತ್ಯವಿರುವ ThunderPhone-ಬದಿಯ ಸೆಟಪ್ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.

<Note>
  ನೀವು ಇದನ್ನೆಲ್ಲ cURL ಇಲ್ಲದೆ ಮಾಡಬಹುದು: **ವೆಬ್ ವಿಜೆಟ್‌ಗಳು** ಡ್ಯಾಶ್‌ಬೋರ್ಡ್
  ಪುಟ (`/dashboard/web-widgets`) ವಿಜೆಟ್ ರಚಿಸುತ್ತದೆ, ಅದರ ಮೋಡ್
  ಮತ್ತು ಏಜೆಂಟ್ ಹೊಂದಿಸುತ್ತದೆ, ಅನುಮತಿಸಲಾದ ಡೊಮೇನ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಎಂಬೆಡ್ ಸ್ನಿಪೆಟ್ ಅನ್ನು ನಿಮಗೆ ನೀಡುತ್ತದೆ.
</Note>

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

<Steps>
  <Step title="ಏಜೆಂಟ್ ರಚಿಸಿ">
    ವಿಜೆಟ್ ಸೆಷನ್ ಅನ್ನು ನಡೆಸುವ prompt ಮತ್ತು ಧ್ವನಿಯ ಏಜೆಂಟ್. 
    `widget_enabled: true` (ಡೀಫಾಲ್ಟ್) ಹೊಂದಿಸಿ.
  </Step>
  <Step title="ರೂಟಿಂಗ್ ಮೋಡ್ ನಿರ್ಧರಿಸಿ">
    - `mode="agent"` — ಪ್ರತಿ ಕೀಗೆ ಒಂದು ಸ್ಥಿರ ಏಜೆಂಟ್. ಅತ್ಯಂತ ಸರಳ.
    - `mode="webhook"` — ನಿಮ್ಮ ಸರ್ವರ್ ಪ್ರತಿ ಸಂದರ್ಶಕರಿಗೆ ಏಜೆಂಟ್ ಅನ್ನು
      [`web.incoming` ವೆಬ್‌ಹುಕ್](/kn/webhooks/call-incoming) ಮೂಲಕ ಆಯ್ಕೆಮಾಡುತ್ತದೆ. ಲಾಗಿನ್ ಆಗಿರುವ ಬಳಕೆದಾರರು, A/B ಪರೀಕ್ಷೆಗಳು ಅಥವಾ ಪ್ರತಿ-ಪುಟ ರೂಟಿಂಗ್‌ಗಾಗಿ ಇದನ್ನು ಬಳಸಿ.
  </Step>
  <Step title="ಅನುಮತಿಸಲಾದ ಡೊಮೇನ್‌ಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಿ">
    ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀಗಳು ಒರಿಜಿನ್-ಲಾಕ್ ಆಗಿರುತ್ತವೆ. ವಿಜೆಟ್ ಎಂಬೆಡ್ ಮಾಡುವ ಪ್ರತಿಯೊಂದು ಹೋಸ್ಟ್‌ನಾಮ್ ಅನ್ನು ನೀವು ನಮೂದಿಸಬೇಕು.
    ಸ್ಥಳೀಯ ಅಭಿವೃದ್ಧಿಯ ಸಮಯದಲ್ಲಿ `localhost` / `127.0.0.1` ಗೆ ಯಾವಾಗಲೂ ಅನುಮತಿ ಇರುತ್ತದೆ.
  </Step>
</Steps>

## ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀ ರಚಿಸಿ

<CodeGroup>
```bash Static agent
curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Marketing site (prod)",
    "mode":            "agent",
    "agent_id":        12,
    "allowed_domains": ["example.com", "*.example.com"]
  }'
```

```bash Dynamic via webhook
curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Support (dynamic)",
    "mode":            "webhook",
    "webhook_url":     "https://example.com/thunderphone/widget-hook",
    "allowed_domains": ["support.example.com"]
  }'
```
</CodeGroup>

ಪ್ರತಿಕ್ರಿಯೆಯು `pk_live_...` ನಿಂದ ಪ್ರಾರಂಭವಾಗುವ `key` ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. **ಪ್ರಕಟಿಸಬಹುದಾದ
ಕೀಗಳು ವಿನ್ಯಾಸದ ಪ್ರಕಾರ ಸಾರ್ವಜನಿಕವಾಗಿವೆ** — ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಬಂಡಲ್‌ನಲ್ಲಿ ಸೇರಿಸಲು ಸುರಕ್ಷಿತವಾಗಿದೆ.
ಎಲ್ಲ ಫೀಲ್ಡ್‌ಗಳಿಗಾಗಿ [ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀಗಳ ಉಲ್ಲೇಖ](/api-reference/publishable-keys) ನೋಡಿ.

<Warning>
  `allowed_domains` ಕನಿಷ್ಠ ಒಂದು ನಮೂದನ್ನು ಹೊಂದಿರಬೇಕು. `*.example.com`
  ಉಪಡೊಮೇನ್‌ಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ (ಉದಾ. `api.example.com`), ಆದರೆ ಬೇರ್
  ಡೊಮೇನ್‌ಗೆ **ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ**. `*` ಅಥವಾ `*.*` ನಂತಹ ಬೇರ್ ವೈಲ್ಡ್‌ಕಾರ್ಡ್‌ಗಳನ್ನು ತಿರಸ್ಕರಿಸಲಾಗುತ್ತದೆ.
</Warning>

## ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ ವಿಜೆಟ್ ಸೇರಿಸಿ

ಮೂರು ಏಕೀಕರಣ ಆಯ್ಕೆಗಳನ್ನು
[ವಿಜೆಟ್ SDK ದಸ್ತಾವೇಜುಗಳಲ್ಲಿ](/kn/widget/overview) ವಿವರಿಸಲಾಗಿದೆ:

<CardGroup cols={3}>
  <Card title="React ಘಟಕ" icon="react" href="/kn/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="ಹೆಡ್‌ಲೆಸ್ ಹುಕ್" icon="circle-nodes" href="/kn/widget/headless-hook">
    ಕಸ್ಟಮ್ UI ಗಳಿಗಾಗಿ `useThunderPhone()`.
  </Card>
  <Card title="CDN ಸ್ಕ್ರಿಪ್ಟ್ ಟ್ಯಾಗ್" icon="code" href="/kn/widget/cdn-script-tag">
    ಬಂಡ್ಲರ್-ಅಲ್ಲದ ಸೈಟ್‌ಗಳಿಗಾಗಿ `ThunderPhone.mount({...})`.
  </Card>
</CardGroup>

ಮೂರೂ ಒಂದೇ `publishableKey` ಸ್ವೀಕರಿಸುತ್ತವೆ ಮತ್ತು ಮೈಕ್ ಬಟನ್
ಜೊತೆಗೆ ಕರೆಯಲ್ಲಿರುವ ಆಡಿಯೊ ಎಲಿಮೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತವೆ.

ವಿಜೆಟ್ `context` ಅನ್ನು 12,000 ಅಕ್ಷರಗಳಿಗೆ ಕಡಿತಗೊಳಿಸಲಾಗುತ್ತದೆ (ಸಾಮಾನ್ಯ ಇಂಗ್ಲಿಷ್ ಪಠ್ಯದ ಸರಿಸುಮಾರು 3,400
ಟೋಕನ್‌ಗಳು) ಮತ್ತು ಅದು
[prompt-ಗಾತ್ರದ ಹೆಚ್ಚುವರಿ ಶುಲ್ಕ](/kn/guides/billing-and-topups) ಕಡೆಗೆ ಎಣಿಕೆಯಾಗುತ್ತದೆ.

## ವಿಜೆಟ್-ಮೋಡ್ ವೆಬ್‌ಹುಕ್‌ಗಳು

`mode="webhook"` ಆಗಿರುವಾಗ, ThunderPhone ಪ್ರತಿ ಸೆಷನ್ ಆರಂಭದಲ್ಲಿ ನಿಮ್ಮ `webhook_url` ಗೆ
`web.incoming` ಪೇಲೋಡ್‌ನೊಂದಿಗೆ ಕರೆ ಮಾಡುತ್ತದೆ. ಆ ಸಂದರ್ಶಕರಿಗಾಗಿ ನೀವು ಚಲಾಯಿಸಲು ಬಯಸುವ ಏಜೆಂಟ್
ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಿ — ಇದು ಫೋನ್
ಕರೆಗಳಂತೆಯೇ [ಪ್ರತಿಕ್ರಿಯೆ ಸ್ಕೀಮಾ](/kn/webhooks/call-incoming) ಅನುಸರಿಸುತ್ತದೆ:

```json
{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}
```

ನಿಮ್ಮ ಸ್ವಂತ ಸೆಷನ್‌ನ ಸಂದರ್ಭವನ್ನು (ಯಾವ ಗ್ರಾಹಕರು ಬ್ರೌಸ್ ಮಾಡುತ್ತಿದ್ದಾರೆ,
ಅವರು ಯಾವ ಪುಟದಲ್ಲಿದ್ದಾರೆ) prompt ಗೆ ಮಿಶ್ರಣ ಮಾಡಬಹುದು ಮತ್ತು ಪ್ರತಿ ರೋಲೌಟ್‌ಗೆ ಏಜೆಂಟ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಬಹುದು.

## ಸೆಷನ್‌ಗಳನ್ನು ಗಮನಿಸಿ

ವಿಜೆಟ್ ಸೆಷನ್‌ಗಳು
[`GET /v1/calls`](/api-reference/calls#list-calls) ನಲ್ಲಿ
`direction="widget"` ಸಹಿತ ಕಾಣಿಸುತ್ತವೆ — ಫೋನ್ ಕರೆಗಳಂತೆಯೇ ಟ್ರಾನ್ಸ್‌ಕ್ರಿಪ್ಟ್, ರೆಕಾರ್ಡಿಂಗ್, ಗ್ರೇಡಿಂಗ್ ಮತ್ತು
ಬಿಲ್ಲಿಂಗ್ ಇರುತ್ತದೆ. ವಿಜೆಟ್‌ಗೆ ಮಾತ್ರವಾದ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ನಿರ್ಮಿಸಲು `direction` ಮೂಲಕ
ಫಿಲ್ಟರ್ ಮಾಡಿ.

---

## ಮುಂದಿನ ಹಂತಗಳು

<CardGroup cols={2}>
  <Card title="ವಿಜೆಟ್ SDK ಉಲ್ಲೇಖ" icon="window-maximize" href="/kn/widget/overview">
    React / hook / CDN ಏಕೀಕರಣದ ವಿವರಗಳು.
  </Card>
  <Card title="ಡೈನಾಮಿಕ್ ಪ್ರತಿ-ಕರೆ ಕಾನ್ಫಿಗ್" icon="bolt" href="/kn/guides/dynamic-call-config">
    `mode="webhook"` ಹರಿವನ್ನು ಆರಂಭದಿಂದ ಅಂತ್ಯದವರೆಗೆ ಕಾರ್ಯಗತಗೊಳಿಸಿ.
  </Card>
  <Card title="ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀಲಿಗಳ ಉಲ್ಲೇಖ" icon="key" href="/api-reference/publishable-keys">
    ಕೀ ಸಂಪನ್ಮೂಲದಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಫೀಲ್ಡ್.
  </Card>
  <Card title="ಮೈಕ್ ಸೆಷನ್‌ಗಳ API" icon="microphone" href="/api-reference/mic-sessions">
    ವಿಜೆಟ್ ಅನ್ನು ಬಿಟ್ಟುಬಿಡಿ; ಕಸ್ಟಮ್ UIಗಳಿಗಾಗಿ LiveKit ಅನ್ನು ನೇರವಾಗಿ ನಿಯಂತ್ರಿಸಿ.
  </Card>
</CardGroup>