CDN / স্ক্রিপ্ট ট্যাগ

CDN বিল্ডটি অভ্যন্তরীণভাবে React বান্ডল করে, তাই আপনি স্ট্যাটিক সাইট, WordPress, Webflow বা HTML যোগ করা যায় এমন যেকোনো পেজে উইজেটটি ব্যবহার করতে পারেন। কোনো npm, বান্ডলার বা ফ্রেমওয়ার্ক প্রয়োজন নেই।

CDN URL

<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 লিসেনারের মধ্যে রাখুন।

ডোমেন অনুমোদিত নয় ত্রুটি

app.thunderphone.com-এ ডেভেলপারস সেটিংসে অনুমোদিত ডোমেনের তালিকায় আপনার ডোমেন যোগ করুন। মনে রাখবেন, localhost সবসময় অনুমোদিত।

পরবর্তী ধাপ

স্টাইলিং

CSS কাস্টম প্রপার্টি দিয়ে উইজেটের চেহারা কাস্টমাইজ করুন।

React কম্পোনেন্ট

React ব্যবহার করছেন? কম্পোনেন্ট ইন্টিগ্রেশন আরও সহজ।