---
title: "এমবেডযোগ্য ভয়েস উইজেট"
description: "কয়েক লাইন কোড দিয়ে যেকোনো ওয়েবসাইটে একটি ভয়েস AI এজেন্ট যোগ করুন"
---

ThunderPhone এমবেডযোগ্য ভয়েস উইজেট আপনার ওয়েবসাইটের ভিজিটরদের ব্রাউজার থেকে সরাসরি একটি AI এজেন্টের সঙ্গে কথা বলতে দেয়। কোনো ফোন কলের প্রয়োজন নেই -- ব্যবহারকারীরা একটি বোতামে ক্লিক করে ThunderPhone-চালিত রিয়েল-টাইম ভয়েস কথোপকথন শুরু করেন।

উইজেটটি একটি গ্লাসমরফিক বার হিসেবে রেন্ডার হয়, যা কাস্টমাইজযোগ্য অ্যাকসেন্ট রং ও অবস্থানসহ হালকা এবং গাঢ় থিমের সঙ্গে মানিয়ে নেয়। এটি `@thunderphone/widget` npm প্যাকেজ হিসেবে বিতরণ করা হয় এবং নন-বান্ডলার পরিবেশের জন্য CDN-এর মাধ্যমেও উপলভ্য।

<Frame>
  <img src="/images/widget-showcase.png" alt="বিভিন্ন অ্যাকসেন্ট রংসহ হালকা ও গাঢ় থিমে ThunderPhone উইজেট" />
</Frame>

## পূর্বশর্ত

উইজেট এমবেড করার আগে, [ThunderPhone Dashboard](https://app.thunderphone.com)-এ এই তিনটি ধাপ সম্পন্ন করুন:

<Steps>
<Step title="একটি প্রকাশযোগ্য API কী তৈরি করুন">
  ড্যাশবোর্ড সেটিংসে **ডেভেলপারস**-এ যান এবং একটি প্রকাশযোগ্য কী তৈরি করুন। প্রকাশযোগ্য কীগুলো `pk_live_` দিয়ে শুরু হয় এবং ক্লায়েন্ট-সাইড কোডে অন্তর্ভুক্ত করা নিরাপদ।
</Step>

<Step title="অনুমোদিত ডোমেইন কনফিগার করুন">
  একই ডেভেলপারস সেটিংসে, যেসব ডোমেইনে উইজেটটি এমবেড করা হবে সেগুলো যোগ করুন। ডেভেলপমেন্টের জন্য `localhost` সবসময় অনুমোদিত। ওয়াইল্ডকার্ড সমর্থিত (যেমন, `*.example.com`)।
</Step>

<Step title="একটি ওয়েব উইজেট তৈরি করুন">
  ড্যাশবোর্ডে **ওয়েব উইজেটস**-এ যান এবং একটি উইজেট তৈরি করুন। আপনি যে এজেন্টটি প্রকাশ করতে চান এবং যে প্রকাশযোগ্য কীটি ব্যবহার করতে চান তা নির্বাচন করুন। আপনার প্রকাশযোগ্য কী কনফিগারেশন থেকে এজেন্টটি স্বয়ংক্রিয়ভাবে নির্ধারিত হয়।
</Step>
</Steps>

<Warning>
  প্রকাশযোগ্য কী (`pk_live_...`) আপনার গোপন API টোকেনের মতো **নয়**। প্রকাশযোগ্য কীগুলো ক্লায়েন্ট-সাইড ব্যবহারের জন্য ডিজাইন করা এবং আপনার অনুমোদিত ডোমেইনে উইজেট সেশনের মধ্যে সীমাবদ্ধ। ক্লায়েন্ট-সাইড কোডে কখনোই আপনার গোপন API টোকেন ব্যবহার করবেন না।
</Warning>

---

## দ্রুত শুরু

প্যাকেজটি ইনস্টল করুন:

```bash
npm install @thunderphone/widget
```

আপনার অ্যাপে উইজেটটি যোগ করুন:

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}
```

এটুকুই। আপনার ব্যবহারকারীরা একটি গ্লাসমরফিক কল বার দেখতে পাবেন, যা এক ক্লিকে তাদের আপনার AI এজেন্টের সঙ্গে সংযুক্ত করে।

---

## কাস্টমাইজেশন

উইজেটটির চারটি উপস্থিতি prop রয়েছে:

| Prop | ডিফল্ট | বিবরণ |
|------|---------|-------------|
| `theme` | `'light'` | সাদা গ্লাসের জন্য `'light'`, গাঢ় গ্লাসের জন্য `'dark'` |
| `primaryColor` | `'#000000'` (হালকা) / `'#ffffff'` (গাঢ়) | শুরু বোতাম, ওয়েভফর্ম এবং সংযোগ নির্দেশকের অ্যাকসেন্ট রং |
| `title` | `'Voice assistant'` | উইজেটে প্রদর্শিত লেখা |
| `position` | `'bottom-right'` | ভিউপোর্টের কোণ: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |

<CodeGroup>
```tsx Light theme (default)
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>
```

```tsx Dark theme with custom color
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>
```
</CodeGroup>

আরও তিনটি prop চেহারার পরিবর্তে সেশন কাস্টমাইজ করে -- কল শুরু হলে সবগুলো সেশন রিকোয়েস্টে ফরওয়ার্ড করা হয়:

| Prop | বিবরণ |
|------|-------------|
| `language` | প্রতি-সেশন ভাষা ওভাররাইড -- `en`, `es`, বা `fr-FR`-এর মতো একটি কোড বা লোকেল |
| `voice` | প্রতি-সেশন ভয়েস ওভাররাইড -- `maria`-এর মতো একটি ভয়েসের নাম |
| `context` | এজেন্টকে পাঠানো পৃষ্ঠা বা সাইটের তথ্যভিত্তিক প্রসঙ্গ (সার্ভার-সাইডে 12,000 অক্ষরে সংক্ষিপ্ত করা হয়) |

সম্পূর্ণ props টেবিলের জন্য [React কম্পোনেন্ট রেফারেন্স](/bn/widget/react) দেখুন।

সম্পূর্ণ কাস্টম UI-এর জন্য, নিজের ইন্টারফেস তৈরি করার সময় ভয়েস সেশন পরিচালনা করতে [হেডলেস হুক](/bn/widget/headless-hook) ব্যবহার করুন। অডিও-প্রতিক্রিয়াশীল ভিজ্যুয়ালাইজেশন তৈরির জন্য হুকটি রিয়েল-টাইম অডিও লেভেল প্রকাশ করে।

---

## ইন্টিগ্রেশন বিকল্প

আপনার স্ট্যাকের সঙ্গে মানানসই ইন্টিগ্রেশন পদ্ধতি বেছে নিন:

<CardGroup cols={3}>
  <Card title="React কম্পোনেন্ট" icon="react" href="/bn/widget/react">
    বিল্ট-ইন কল নিয়ন্ত্রণ ও স্ট্যাটাস প্রদর্শনসহ আগে থেকে তৈরি UI কম্পোনেন্ট। ইমপোর্ট করুন, props দিন, কাজ শেষ।
  </Card>
  <Card title="হেডলেস হুক" icon="code" href="/bn/widget/headless-hook">
    UI-এর ওপর সম্পূর্ণ নিয়ন্ত্রণ। আপনি নিজস্ব ইন্টারফেস তৈরি করার সময় `useThunderPhone` হুক ভয়েস সেশন পরিচালনা করে।
  </Card>
  <Card title="CDN / স্ক্রিপ্ট ট্যাগ" icon="globe" href="/bn/widget/cdn-script-tag">
    কোনো bundler প্রয়োজন নেই। স্ট্যাটিক সাইট, WordPress এবং অন্যান্য non-React পরিবেশের জন্য স্ক্রিপ্ট ট্যাগের মাধ্যমে উইজেট লোড করুন।
  </Card>
</CardGroup>

---

## স্টাইলিং

উইজেটে `theme` prop দ্বারা নিয়ন্ত্রিত বিল্ট-ইন লাইট ও ডার্ক থিম এবং `primaryColor` prop দ্বারা নিয়ন্ত্রিত একটি অ্যাকসেন্ট রং রয়েছে। আরও গভীর কাস্টমাইজেশনের জন্য আপনি CSS custom properties ও ক্লাস ওভাররাইড করতে পারেন। বিস্তারিত জানতে [স্টাইলিং গাইড](/bn/widget/styling) দেখুন।

<Note>
  সাহায্য প্রয়োজন? [support@thunderphone.com](mailto:support@thunderphone.com)-এ আমাদের সঙ্গে যোগাযোগ করুন
</Note>