> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# वेब विजेट एम्बेड करें

> अपने मार्केटिंग या सपोर्ट साइट पर एक वॉइस एजेंट जोड़ें — फ़ोन नंबर की आवश्यकता नहीं है।

वेब विजेट आपके साइट विज़िटर्स को ब्राउज़र के माइक्रोफ़ोन का उपयोग करके
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="अनुमत डोमेन सूचीबद्ध करें">
    पब्लिशेबल की ओरिजिन-लॉक्ड होती हैं। आपको हर उस होस्टनेम का नाम देना होगा
    जो विजेट एम्बेड करेगा। लोकल डेवलपमेंट के दौरान `localhost` / `127.0.0.1` हमेशा
    अनुमत होते हैं।
  </Step>
</Steps>

## एक पब्लिशेबल की बनाएं

<CodeGroup>
  ```bash Static agent theme={null}
  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 theme={null}
  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` को 12,000 कैरेक्टर तक ट्रंकेट किया जाता है (सामान्य अंग्रेज़ी टेक्स्ट के लगभग 3,400
टोकन) और यह
[प्रॉम्प्ट-साइज़ सरचार्ज](/hi/guides/billing-and-topups) में गिना जाता है।

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

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

```json theme={null}
{
  "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>