---
title: "ویب ویجیٹ ایمبیڈ کریں"
description: "ایک ہی اسکرپٹ ٹیگ کے ذریعے اپنی مارکیٹنگ یا سپورٹ سائٹ پر ایک وائس ایجنٹ شامل کریں — وزیٹرز فون نمبر کے بغیر براہِ راست براؤزر سے اس سے بات کر سکتے ہیں۔"
---

ویب ویجٹ آپ کی سائٹ کے وزیٹرز کو براؤزر کے مائیکروفون کے ذریعے
AI وائس ایجنٹ کے ساتھ کلک کر کے بات کرنے کی گفتگو فراہم کرتا ہے۔ یہ اپنا الگ
JavaScript / React SDK ہے جس کا اپنا [SDK حوالہ](/ur/widget/overview)
ہے — یہ گائیڈ ویجٹ کے لیے درکار ThunderPhone کی طرف کی سیٹ اپ پر مرکوز ہے۔

<Note>
  آپ یہ سب کچھ cURL کے بغیر کر سکتے ہیں: **ویب ویجٹس** ڈیش بورڈ
  صفحہ (`/dashboard/web-widgets`) ویجٹ بناتا ہے، اس کا موڈ
  اور ایجنٹ سیٹ کرتا ہے، اجازت یافتہ ڈومینز کا انتظام کرتا ہے، اور آپ کو ایمبیڈ اسنیپٹ فراہم کرتا ہے۔
</Note>

## ضروری شرائط

<Steps>
  <Step title="ایک ایجنٹ بنائیں">
    وہ ایجنٹ جس کا prompt اور آواز ویجٹ سیشن چلائیں گے۔ 
    `widget_enabled: true` سیٹ کریں (یہ ڈیفالٹ ہے)۔
  </Step>
  <Step title="روٹنگ موڈ منتخب کریں">
    - `mode="agent"` — ہر کلید کے لیے ایک جامد ایجنٹ۔ سب سے آسان۔
    - `mode="webhook"` — آپ کا سرور ہر وزیٹر کے لیے ایک
      [`web.incoming` ویب ہک](/ur/webhooks/call-incoming) کے ذریعے ایجنٹ منتخب کرتا ہے۔ اسے
      لاگ ان صارفین، A/B ٹیسٹس، یا ہر صفحے کی روٹنگ کے لیے استعمال کریں۔
  </Step>
  <Step title="اجازت یافتہ ڈومینز کی فہرست بنائیں">
    شائع کرنے کے قابل کلیدیں اوریجن سے مقفل ہوتی ہیں۔ آپ کو ہر وہ 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 دستاویزات](/ur/widget/overview) میں انضمام کے تین اختیارات
شامل ہیں:

<CardGroup cols={3}>
  <Card title="React کمپوننٹ" icon="react" href="/ur/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="ہیڈلیس ہک" icon="circle-nodes" href="/ur/widget/headless-hook">
    حسب ضرورت UIs کے لیے `useThunderPhone()`۔
  </Card>
  <Card title="CDN اسکرپٹ ٹیگ" icon="code" href="/ur/widget/cdn-script-tag">
    نان بنڈلر سائٹس کے لیے `ThunderPhone.mount({...})`۔
  </Card>
</CardGroup>

تینوں ایک ہی `publishableKey` قبول کرتے ہیں اور مائیک بٹن
کے ساتھ کال کے دوران آڈیو عنصر رینڈر کرتے ہیں۔

ویجٹ کا `context` 12,000 حروف تک محدود ہوتا ہے (عام انگریزی متن کے تقریباً 3,400
ٹوکنز) اور [prompt سائز اضافی فیس](/ur/guides/billing-and-topups) میں شمار ہوتا ہے۔

## ویجٹ موڈ ویب ہکس

جب `mode="webhook"` ہو تو ThunderPhone ہر
سیشن کے آغاز پر `web.incoming` payload کے ساتھ آپ کے `webhook_url` کو کال کرتا ہے۔ اس وزیٹر کے لیے
وہ ایجنٹ کنفیگریشن واپس کریں جسے آپ چلانا چاہتے ہیں — یہ فون
کالز جیسی ہی [جواب اسکیما](/ur/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="/ur/widget/overview">
    React / hook / CDN انضمام کی تفصیلات۔
  </Card>
  <Card title="ہر کال کے لیے متحرک کنفیگ" icon="bolt" href="/ur/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">
    ویجٹ کو چھوڑیں؛ حسبِ ضرورت UIs کے لیے LiveKit کو براہِ راست چلائیں۔
  </Card>
</CardGroup>