---
title: "ওয়েব উইজেট এমবেড করুন"
description: "একটি মাত্র স্ক্রিপ্ট ট্যাগ দিয়ে আপনার মার্কেটিং বা সাপোর্ট সাইটে একটি ভয়েস এজেন্ট যোগ করুন — দর্শকরা ফোন নম্বর ছাড়াই সরাসরি ব্রাউজার থেকে এর সঙ্গে কথা বলতে পারবেন।"
---

ওয়েব উইজেটটি ব্রাউজারের মাইক্রোফোন ব্যবহার করে আপনার সাইট ভিজিটরদের একটি AI এজেন্টের সঙ্গে ক্লিক-টু-টক কথোপকথনের সুবিধা দেয়। এটি নিজস্ব [SDK রেফারেন্স](/bn/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](/bn/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`), কিন্তু **না** মূল
  ডোমেইনের সঙ্গে। `*` বা `*.*`-এর মতো খালি wildcard প্রত্যাখ্যান করা হয়।
</Warning>

## আপনার সাইটে উইজেট যোগ করুন

তিনটি ইন্টিগ্রেশন বিকল্প [উইজেট SDK ডকুমেন্টেশন](/bn/widget/overview)-এ
বর্ণিত আছে:

<CardGroup cols={3}>
  <Card title="React কম্পোনেন্ট" icon="react" href="/bn/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="হেডলেস hook" icon="circle-nodes" href="/bn/widget/headless-hook">
    কাস্টম UI-এর জন্য `useThunderPhone()`।
  </Card>
  <Card title="CDN script ট্যাগ" icon="code" href="/bn/widget/cdn-script-tag">
    non-bundler সাইটের জন্য `ThunderPhone.mount({...})`।
  </Card>
</CardGroup>

তিনটিই একই `publishableKey` গ্রহণ করে এবং মাইক বোতামের সঙ্গে
কল চলাকালীন অডিও এলিমেন্ট রেন্ডার করে।

উইজেটের `context` 12,000 অক্ষরে সংক্ষিপ্ত করা হয় (সাধারণ ইংরেজি টেক্সটের
প্রায় 3,400 টোকেন) এবং এটি [prompt-আকার সারচার্জ](/bn/guides/billing-and-topups)-এর অন্তর্ভুক্ত।

## উইজেট-মোড webhook

`mode="webhook"` হলে, ThunderPhone প্রতিটি সেশন শুরুর সময় আপনার `webhook_url`-এ
একটি `web.incoming` payload পাঠায়। ওই ভিজিটরের জন্য আপনি যে এজেন্ট
কনফিগারেশন চালাতে চান তা ফেরত দিন — এটি ফোন কলের মতো একই
[response schema](/bn/webhooks/call-incoming) অনুসরণ করে:

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

আপনি নিজের সেশন থেকে context (কোন গ্রাহক ব্রাউজ করছেন,
তাঁরা কোন পৃষ্ঠায় আছেন) prompt-এ যুক্ত করতে পারেন এবং রোলআউট অনুযায়ী এজেন্ট বদলাতে পারেন।

## সেশন পর্যবেক্ষণ করুন

উইজেট সেশনগুলো দেখা যায়
[`GET /v1/calls`](/api-reference/calls#list-calls)-এ
`direction="widget"` সহ — ফোন কলের মতোই একই ট্রান্সক্রিপ্ট, রেকর্ডিং, গ্রেডিং এবং
বিলিং। শুধু উইজেটের জন্য ড্যাশবোর্ড তৈরি করতে `direction` দিয়ে ফিল্টার করুন।

---

## পরবর্তী ধাপ

<CardGroup cols={2}>
  <Card title="উইজেট SDK রেফারেন্স" icon="window-maximize" href="/bn/widget/overview">
    React / hook / CDN ইন্টিগ্রেশনের বিস্তারিত।
  </Card>
  <Card title="প্রতি-কলে ডায়নামিক কনফিগ" icon="bolt" href="/bn/guides/dynamic-call-config">
    `mode="webhook"` ফ্লোটি শুরু থেকে শেষ পর্যন্ত বাস্তবায়ন করুন।
  </Card>
  <Card title="Publishable key রেফারেন্স" icon="key" href="/api-reference/publishable-keys">
    key রিসোর্সের প্রতিটি ফিল্ড।
  </Card>
  <Card title="Mic সেশন API" icon="microphone" href="/api-reference/mic-sessions">
    উইজেট এড়িয়ে কাস্টম UI-এর জন্য সরাসরি LiveKit চালান।
  </Card>
</CardGroup>