CDN / اسکرپٹ ٹیگ

CDN بلڈ اندرونی طور پر React کو بنڈل کرتی ہے، لہٰذا آپ وجٹ کو جامد سائٹس، WordPress، Webflow، یا کسی بھی ایسے صفحے پر استعمال کر سکتے ہیں جہاں آپ HTML شامل کر سکتے ہوں۔ npm، بنڈلر، یا فریم ورک درکار نہیں۔

CDN URLs

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

<!-- Each stable release also publishes an immutable /widget/vX.Y.Z/ path
     matching the @thunderphone/widget npm version (v1.1.2 at the time of
     writing). If you pin, you own updating the URL for new releases. -->
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/v1.1.2/style.css" />
<script src="https://cdn.thunderphone.com/widget/v1.1.2/widget.js"></script>

بنیادی استعمال

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
</head>
<body>

  <div id="thunderphone"></div>

  <script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
  <script>
    ThunderPhone.mount({
      element: '#thunderphone',
      publishableKey: 'pk_live_your_publishable_key',
    })
  </script>

</body>
</html>

وجٹ ہدف عنصر میں ماؤنٹ ہوتا ہے اور ویوپورٹ کے ایک کونے میں مستقل پوزیشن والی بار کے طور پر رینڈر ہوتا ہے (طے شدہ bottom-right، جسے position اختیار کنٹرول کرتا ہے)۔ ماؤنٹ عنصر صرف React روٹ ہے -- صفحے میں اس کا مقام وجٹ کے ظاہر ہونے کی جگہ کو متاثر نہیں کرتا۔

ماؤنٹ کے اختیارات

ThunderPhone.mount()، React کمپوننٹ جیسے ہی اختیارات قبول کرتا ہے، نیز element پراپرٹی بھی:

اختیار	قسم	درکار	طے شدہ	تفصیل
`element`	`string \| HTMLElement`	ہاں	--	CSS سلیکٹر (مثلاً، `'#thunderphone'`) یا DOM عنصر کا حوالہ۔
`publishableKey`	`string`	ہاں	--	پبلش ایبل API کلید (`pk_live_...`)۔ ایجنٹ کلید کی وجٹ کنفیگریشن سے خودکار طور پر متعین ہوتا ہے۔
`theme`	`'light' \| 'dark'`	نہیں	`'light'`	رنگوں کی اسکیم۔
`primaryColor`	`string`	نہیں	`'#000000'` (ہلکا) / `'#ffffff'` (گہرا)	نمایاں رنگ کے طور پر استعمال ہونے والی CSS رنگ اسٹرنگ۔
`title`	`string`	نہیں	`'Voice assistant'`	وجٹ بار میں دکھایا جانے والا متن۔
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	نہیں	`'bottom-right'`	ویوپورٹ میں مستقل پوزیشن۔
`apiBase`	`string`	نہیں	`'https://api.thunderphone.com/v1'`	API کے بنیادی URL کو اووررائیڈ کرنا۔
`language`	`string`	نہیں	--	ہر سیشن کے لیے زبان کا اووررائیڈ -- کوئی زبان کوڈ یا لوکیل، جیسے `en`، `es`، یا `fr-FR`۔ سیٹ نہ ہونے پر، ایجنٹ کی کنفیگر کردہ زبان لاگو ہوتی ہے۔
`voice`	`string`	نہیں	--	ہر سیشن کے لیے آواز کا اووررائیڈ -- کوئی آواز کا نام، جیسے `maria`۔ سیٹ نہ ہونے پر، ایجنٹ کی کنفیگر کردہ آواز لاگو ہوتی ہے۔
`context`	`string`	نہیں	--	ہر سیشن کے لیے حقائق پر مبنی صفحے یا سائٹ کا سیاق، جو ایجنٹ کو بھیجا جاتا ہے۔ سرور سائیڈ پر 12,000 حروف تک محدود کیا جاتا ہے۔
`onConnect`	`() => void`	نہیں	--	وائس سیشن کے منسلک ہونے پر کال کیا جاتا ہے۔
`onDisconnect`	`() => void`	نہیں	--	سیشن ختم ہونے پر کال کیا جاتا ہے۔
`onError`	`(error) => void`	نہیں	--	خرابیوں پر کال کیا جاتا ہے۔ خرابی میں `error` (کوڈ) اور `message` فیلڈز ہوتے ہیں۔
`ringtone`	`boolean \| string`	نہیں	`false`	کنکشن کے دوران رِنگ ٹون چلائیں۔ طے شدہ رِنگ ٹون کے لیے `true`، یا حسب ضرورت آڈیو کے لیے URL اسٹرنگ۔

کلین اپ

ThunderPhone.mount() کلین اپ طریقوں کے ساتھ ایک ویجیٹ انسٹینس واپس کرتا ہے:

<script>
  var widget = ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
  })

  // Later, when you want to remove the widget:
  widget.unmount()

  // Or equivalently:
  widget.destroy()
</script>

unmount() اور destroy() دونوں ایک ہی کام کرتے ہیں -- یہ کسی بھی فعال وائس سیشن کو منقطع کرتے ہیں اور ویجیٹ کو DOM سے ہٹا دیتے ہیں۔ اپنے کوڈ میں جو زیادہ موزوں لگے، اسے استعمال کریں۔

مثالیں

حسب ضرورت رنگ کے ساتھ ڈارک تھیم

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    theme: 'dark',
    primaryColor: '#8b5cf6',
    title: 'Talk to our AI',
  })
</script>

حسب ضرورت پوزیشن

<div id="thunderphone"></div>

<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    position: 'bottom-left',
  })
</script>

ایونٹ کال بیکس کے ساتھ

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    onConnect: function () {
      console.log('Call started')
    },
    onDisconnect: function () {
      console.log('Call ended')
    },
    onError: function (error) {
      console.error('Widget error:', error.error, error.message)
    },
  })
</script>

رنگ ٹون کے ساتھ

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    ringtone: true, // or a custom URL: 'https://example.com/ringtone.mp3'
  })
</script>

DOM ایلیمنٹ ریفرنس استعمال کرتے ہوئے

<div id="thunderphone"></div>

<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  var container = document.getElementById('thunderphone')

  ThunderPhone.mount({
    element: container,
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

WordPress / CMS انضمام

اسے کسٹم HTML بلاک یا اپنی تھیم کے فوٹر میں شامل کریں:

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

<div id="thunderphone-widget"></div>
<script>
  ThunderPhone.mount({
    element: '#thunderphone-widget',
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

خرابیوں کا ازالہ

ویجیٹ ظاہر نہیں ہوتا

یقینی بنائیں کہ CSS اور JS دونوں فائلیں لوڈ ہیں۔ نیٹ ورک کی خرابیوں کے لیے براؤزر کنسول چیک کریں۔ ThunderPhone.mount() کال کرنے سے پہلے تصدیق کریں کہ ہدف عنصر DOM میں موجود ہے۔

ThunderPhone تعریف شدہ نہیں ہے

اسکرپٹ ابھی لوڈ نہیں ہوئی ہے۔ یقینی بنائیں کہ widget.js کے لیے <script> ٹیگ آپ کی ماؤنٹ کال سے پہلے موجود ہو، یا ماؤنٹ کال کو DOMContentLoaded listener میں لپیٹ دیں۔

ڈومین کی اجازت نہ ہونے کی خرابی

اپنے ڈومین کو app.thunderphone.com پر ڈیولپرز کی ترتیبات میں اجازت یافتہ ڈومینز کی فہرست میں شامل کریں۔ یاد رکھیں کہ localhost کی ہمیشہ اجازت ہوتی ہے۔

اگلے مراحل

اسٹائلنگ

CSS کسٹم پراپرٹیز کے ذریعے ویجیٹ کی ظاہری شکل حسب ضرورت بنائیں۔

React کمپوننٹ

React استعمال کر رہے ہیں؟ کمپوننٹ انضمام زیادہ آسان ہے۔