---
title: "वेब विजेट एम्बेड करा"
description: "एका स्क्रिप्ट टॅगद्वारे तुमच्या मार्केटिंग किंवा सपोर्ट साइटवर व्हॉइस एजंट जोडा — अभ्यागत ब्राउझरमधून थेट त्याच्याशी बोलू शकतात; फोन नंबरची गरज नाही."
---

वेब विजेट तुमच्या साइटवरील अभ्यागतांना ब्राउझरचा मायक्रोफोन वापरून AI एजंटशी क्लिक-टू-टॉक संभाषण देते. हे स्वतंत्र [SDK संदर्भ](/mr/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` webhook](/mr/webhooks/call-incoming) द्वारे. लॉग-इन केलेल्या वापरकर्त्यांसाठी, A/B चाचण्यांसाठी किंवा प्रत्येक पृष्ठासाठी राउटिंगसाठी हे वापरा.
  </Step>
  <Step title="अनुमत डोमेनची यादी करा">
    प्रकाशित करण्यायोग्य की origin-लॉक असतात. विजेट एम्बेड करणारे प्रत्येक hostname
    तुम्ही नमूद करणे आवश्यक आहे. स्थानिक डेव्हलपमेंटदरम्यान `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 दस्तऐवज](/mr/widget/overview):

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

तिन्ही पर्याय समान `publishableKey` स्वीकारतात आणि मायक्रोफोन बटण
तसेच कॉलमधील ऑडिओ घटक रेंडर करतात.

विजेटचा `context` 12,000 वर्णांवर मर्यादित केला जातो (सामान्य इंग्रजी मजकुराच्या अंदाजे 3,400
टोकन्स) आणि तो
[prompt-आकार अधिभार](/mr/guides/billing-and-topups) मध्ये गणला जातो.

## विजेट-मोड webhook

`mode="webhook"` असताना, ThunderPhone प्रत्येक
सत्र सुरू होताना `web.incoming` payload सह तुमच्या `webhook_url` ला कॉल करते. त्या अभ्यागतासाठी चालवायचे असलेले एजंट
कॉन्फिगरेशन परत करा — ते फोन
कॉलसारख्याच [प्रतिसाद स्कीमा](/mr/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="/mr/widget/overview">
    React / hook / CDN इंटिग्रेशन तपशील.
  </Card>
  <Card title="प्रत्येक कॉलसाठी डायनॅमिक कॉन्फिगरेशन" icon="bolt" href="/mr/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>