---
title: "वेब विजेट एम्बेड करें"
description: "एक ही स्क्रिप्ट टैग के साथ अपनी मार्केटिंग या सपोर्ट साइट पर वॉइस एजेंट जोड़ें — विज़िटर बिना किसी फोन नंबर के सीधे ब्राउज़र से उससे बात कर सकते हैं।"
---

वेब विजेट आपके साइट विज़िटर्स को ब्राउज़र के माइक्रोफ़ोन का उपयोग करके AI एजेंट के साथ क्लिक-टू-टॉक बातचीत देता है। यह अपने [SDK रेफ़रेंस](/hi/widget/overview) के साथ एक अलग JavaScript / React SDK है — यह गाइड विजेट के लिए आवश्यक ThunderPhone-साइड सेटअप पर केंद्रित है।

<Note>
  आप यह सब cURL के बिना कर सकते हैं: **वेब विजेट्स** डैशबोर्ड पेज
  (`/dashboard/web-widgets`) विजेट बनाता है, उसका मोड और एजेंट सेट करता है,
  अनुमत डोमेन मैनेज करता है, और आपको एम्बेड स्निपेट देता है।
</Note>

## पूर्वापेक्षाएँ

<Steps>
  <Step title="एजेंट बनाएं">
    वह एजेंट जिसका प्रॉम्प्ट और वॉइस विजेट सेशन चलाएंगे। सेट करें
    `widget_enabled: true` (डिफ़ॉल्ट)।
  </Step>
  <Step title="रूटिंग मोड तय करें">
    - `mode="agent"` — हर की के लिए एक स्टैटिक एजेंट। सबसे सरल।
    - `mode="webhook"` — आपका सर्वर
      [`web.incoming` वेबहुक](/hi/webhooks/call-incoming) के ज़रिए हर विज़िटर के लिए एजेंट चुनता है। इसका उपयोग
      लॉग-इन किए हुए यूज़र्स, A/B टेस्ट या प्रति-पेज रूटिंग के लिए करें।
  </Step>
  <Step title="अनुमत डोमेन सूचीबद्ध करें">
    विजेट एम्बेड करने वाले हर होस्टनेम का नाम दें। ब्राउज़र हर सेशन रिक्वेस्ट के साथ
    पेज का ओरिजिन भेजते हैं, इसलिए यह सूची आपकी की को किसी अन्य साइट पर कॉपी किए जाने पर
    काम करने से रोकती है। यह ऑथेंटिकेशन नहीं है: ब्राउज़र के बाहर की कोई स्क्रिप्ट कोई भी `Origin`
    हेडर भेज सकती है। प्रोडक्शन में `localhost` अपने-आप अनुमत नहीं है; प्रोडक्शन API के विरुद्ध लोकली
    टेस्ट करने के लिए, सूची में `localhost` जोड़ें।
  </Step>
  <Step title="ब्राउज़र ओवरराइड चुनें">
    तय करें कि आपका पेज कौन-सी सेशन सेटिंग्स भेज सकता है। नई कीज़ कोई भी स्वीकार नहीं करतीं;
    [ब्राउज़र ओवरराइड](#browser-overrides) देखें।
  </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"],
    "allowed_overrides": ["context"]
  }'
```

```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 डॉक्यूमेंटेशन](/hi/widget/overview) में दिए गए हैं:

<CardGroup cols={3}>
  <Card title="React कंपोनेंट" icon="react" href="/hi/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="हेडलेस हुक" icon="circle-nodes" href="/hi/widget/headless-hook">
    कस्टम UI के लिए `useThunderPhone()`।
  </Card>
  <Card title="CDN स्क्रिप्ट टैग" icon="code" href="/hi/widget/cdn-script-tag">
    नॉन-बंडलर साइट्स के लिए `ThunderPhone.mount({...})`।
  </Card>
</CardGroup>

तीनों एक ही `publishableKey` स्वीकार करते हैं और माइक बटन
के साथ इन-कॉल ऑडियो एलिमेंट रेंडर करते हैं।

## ब्राउज़र ओवरराइड्स

विजेट पेज से प्रति-सेशन चार सेटिंग भेज सकता है:

| सेटिंग | विजेट प्रॉप | यह क्या बदलता है |
|---------|-------------|-----------------|
| `context` | `context` | पेज का टेक्स्ट, रेफ़रेंस के रूप में एजेंट प्रॉम्प्ट में जोड़ा जाता है |
| `variables` | कोई नहीं (केवल रॉ `POST /v1/widget/session`) | प्रॉम्प्ट में `{{variable}}` प्लेसहोल्डर के लिए वैल्यू |
| `voice` | `voice` | इस सेशन के लिए एजेंट की आवाज़ |
| `language` | `language` | वह भाषा जिसमें सेशन शुरू होता है |

आपकी publishable key सार्वजनिक है, इसलिए जिसके पास भी यह है वह इन सेटिंग्स को भेज सकता है, जिसमें आपकी डोमेन का नकली रूप बनाने वाली स्क्रिप्ट से भेजना भी शामिल है। इसलिए हर सेटिंग तब तक बंद रहती है जब तक आप इसे key पर अनुमति नहीं देते: डैशबोर्ड में widget बनाते या संपादित करते समय **ब्राउज़र ओवरराइड्स** के अंतर्गत इसे चुनें, या
[Publishable keys API](/api-reference/publishable-keys) के माध्यम से `allowed_overrides` सेट करें। केवल वही अनुमति दें जो आपका पेज वास्तव में भेजता है।

ऐसा सेशन अनुरोध जिसमें ऐसी सेटिंग हो जिसकी key अनुमति नहीं देती,
`400` के साथ विफल होता है और उसका नाम बताता है:

```json
{
  "error": "override_not_allowed",
  "fields": ["voice"],
  "message": "This publishable key does not allow the browser to set `voice`. ..."
}
```

यह जांच दोनों मोड में लागू होती है। वेबहुक मोड में, अनुमति प्राप्त सेटिंग
आपके `web.incoming` वेबहुक को भी फॉरवर्ड की जाती है (`context`,
`website_context` के रूप में आता है)। इस सेटिंग के उपलब्ध होने से पहले बनाई गई keys सभी चारों की अनुमति देती हैं, इसलिए मौजूदा एम्बेड काम करते रहते हैं; जिनका उपयोग नहीं करते, उन्हें बंद कर दें।

विजेट `context` को 12,000 कैरेक्टर तक सीमित किया जाता है (सामान्य अंग्रेज़ी टेक्स्ट के लगभग 3,400
टोकन) और यह
[प्रॉम्प्ट-आकार सरचार्ज](/hi/guides/billing-and-topups) में गिना जाता है।
एजेंट को इसे निर्देशों के रूप में नहीं, बल्कि पेज कंटेंट के रूप में मानने के लिए कहा जाता है।

## विजेट-मोड वेबहुक्स

जब `mode="webhook"` हो, ThunderPhone हर
सेशन शुरू होने पर `web.incoming` पेलोड के साथ आपके `webhook_url` को कॉल करता है। उस विज़िटर के लिए चलाने हेतु
वांछित एजेंट कॉन्फ़िगरेशन लौटाएं — यह फ़ोन कॉल्स के समान
[रिस्पॉन्स स्कीमा](/hi/webhooks/call-incoming) का पालन करता है:

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

आप अपने सेशन का कॉन्टेक्स्ट (कौन-सा कस्टमर ब्राउज़ कर रहा है,
वे किस पेज पर हैं) प्रॉम्प्ट में मिला सकते हैं और हर रोलआउट के लिए एजेंट बदल सकते हैं।

## विजेट सेशन देखें

विजेट सेशन [`GET /v1/calls`](/api-reference/calls#list-calls) में
`direction="widget"` के साथ दिखते हैं — फोन कॉल्स जैसा ही ट्रांसक्रिप्ट, रिकॉर्डिंग, ग्रेडिंग और
बिलिंग। केवल विजेट वाला डैशबोर्ड बनाने के लिए `direction` से फ़िल्टर करें।

---

## अगले चरण

<CardGroup cols={2}>
  <Card title="विजेट SDK रेफरेंस" icon="window-maximize" href="/hi/widget/overview">
    React / hook / CDN इंटीग्रेशन विवरण।
  </Card>
  <Card title="डायनामिक प्रति-कॉल कॉन्फ़िग" icon="bolt" href="/hi/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>