---
title: "ایمبیڈ کیا جا سکنے والا وائس ویجیٹ"
description: "کوڈ کی چند سطروں کے ساتھ کسی بھی ویب سائٹ میں ایک وائس AI ایجنٹ شامل کریں"
---

ThunderPhone کا ایمبیڈیبل وائس وجٹ آپ کی ویب سائٹ کے وزیٹرز کو براؤزر سے براہِ راست ایک AI ایجنٹ سے بات کرنے دیتا ہے۔ فون کال کی ضرورت نہیں -- صارفین ایک بٹن پر کلک کرتے ہیں اور ThunderPhone سے چلنے والی حقیقی وقت کی وائس گفتگو شروع کرتے ہیں۔

وجٹ شیشے جیسی بار کے طور پر رینڈر ہوتا ہے جو ہلکی اور گہری تھیمز کے مطابق ڈھل جاتا ہے، اور اس میں حسبِ ضرورت ایکسنٹ رنگ اور پوزیشننگ شامل ہے۔ یہ `@thunderphone/widget` npm پیکیج کے طور پر تقسیم کیا جاتا ہے اور نان-بنڈلر ماحول کے لیے CDN کے ذریعے بھی دستیاب ہے۔

<Frame>
  <img src="/images/widget-showcase.png" alt="ThunderPhone widget in light and dark themes with various accent colors" />
</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 ایجنٹ سے منسلک کرتی ہے۔

---

## حسبِ ضرورت ترتیب

وجٹ میں ظاہری شکل کے لیے چار پراپس ہیں:

| پراپ | طے شدہ | وضاحت |
|------|---------|-------------|
| `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>

مزید تین پراپس ظاہری شکل کے بجائے سیشن کو حسبِ ضرورت بناتے ہیں -- کال شروع ہونے پر سبھی سیشن ریکویسٹ کو فارورڈ کیے جاتے ہیں:

| پراپ | وضاحت |
|------|-------------|
| `language` | فی سیشن زبان اووررائیڈ -- کوئی کوڈ یا لوکیل، جیسے `en`، `es`، یا `fr-FR` |
| `voice` | فی سیشن وائس اووررائیڈ -- وائس کا نام، جیسے `maria` |
| `context` | ایجنٹ کو دیا جانے والا صفحے یا سائٹ کا معلوماتی سیاق (سرور سائیڈ پر 12,000 حروف تک مختصر کیا جاتا ہے) |

مکمل پراپس ٹیبل کے لیے [React کمپوننٹ ریفرنس](/ur/widget/react) دیکھیں۔

مکمل طور پر حسبِ ضرورت UI کے لیے، اپنی انٹرفیس بناتے ہوئے وائس سیشن مینیج کرنے کے لیے [ہیڈلیس ہک](/ur/widget/headless-hook) استعمال کریں۔ ہک آڈیو کے مطابق ردِعمل دینے والی ویژولائزیشنز بنانے کے لیے حقیقی وقت کے آڈیو لیولز فراہم کرتا ہے۔

---

## انضمام کے اختیارات

اپنے اسٹیک کے مطابق انضمام کا طریقہ منتخب کریں:

<CardGroup cols={3}>
  <Card title="React کمپوننٹ" icon="react" href="/ur/widget/react">
    بلٹ اِن کال کنٹرولز اور اسٹیٹس ڈسپلے کے ساتھ پہلے سے تیار UI کمپوننٹ۔ امپورٹ کریں، props دیں، مکمل۔
  </Card>
  <Card title="ہیڈلیس ہک" icon="code" href="/ur/widget/headless-hook">
    UI پر مکمل کنٹرول۔ `useThunderPhone` ہک وائس سیشن کو منظم کرتا ہے جبکہ آپ اپنا انٹرفیس بناتے ہیں۔
  </Card>
  <Card title="CDN / اسکرپٹ ٹیگ" icon="globe" href="/ur/widget/cdn-script-tag">
    کسی بنڈلر کی ضرورت نہیں۔ جامد سائٹس، WordPress، اور دیگر غیر React ماحول کے لیے اسکرپٹ ٹیگ کے ذریعے وِجٹ لوڈ کریں۔
  </Card>
</CardGroup>

---

## اسٹائلنگ

وِجٹ میں بلٹ اِن لائٹ اور ڈارک تھیمز شامل ہیں، جنہیں `theme` prop کنٹرول کرتا ہے، اور ایک ایکسنٹ رنگ شامل ہے جسے `primaryColor` prop کنٹرول کرتا ہے۔ مزید گہری تخصیص کے لیے، آپ CSS کی کسٹم پراپرٹیز اور کلاسز کو اووررائیڈ کر سکتے ہیں۔ تفصیلات کے لیے [اسٹائلنگ گائیڈ](/ur/widget/styling) دیکھیں۔

<Note>
  مدد درکار ہے؟ ہم سے [support@thunderphone.com](mailto:support@thunderphone.com) پر رابطہ کریں
</Note>