--- title: "CDN / স্ক্রিপ্ট ট্যাগ" description: "বাণ্ডলার ছাড়াই যেকোনো ওয়েবসাইটে ThunderPhone ভয়েস উইজেট যোগ করুন" --- CDN বিল্ডটি অভ্যন্তরীণভাবে React বান্ডল করে, তাই আপনি স্ট্যাটিক সাইট, WordPress, Webflow বা HTML যোগ করা যায় এমন যেকোনো পেজে উইজেটটি ব্যবহার করতে পারেন। কোনো npm, বান্ডলার বা ফ্রেমওয়ার্ক প্রয়োজন নেই। ## CDN URL ```html Latest (recommended) ``` ```html Pinned version ``` `latest` URL-গুলো ড্যাশবোর্ডের এমবেড স্নিপেট জেনারেটর তৈরি করে। এগুলো 5 মিনিটের জন্য ক্যাশ করা হয় এবং স্বয়ংক্রিয়ভাবে নতুন স্থিতিশীল রিলিজ গ্রহণ করে। পিন করা `/widget/vX.Y.Z/` পাথ অপরিবর্তনীয় এবং দীর্ঘমেয়াদে ক্যাশ করা হয় -- আপনি পিন করলে, যে `@thunderphone/widget` npm রিলিজের বিপরীতে ডেভেলপ করেন তার সঙ্গে সংস্করণ মিলিয়ে নিন। --- ## মৌলিক ব্যবহার ```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()` একটি উইজেট ইনস্ট্যান্স ফেরত দেয়, যাতে পরিষ্কারকরণ মেথড রয়েছে: ```html ``` `unmount()` এবং `destroy()` উভয়ই একই কাজ করে -- এগুলো সক্রিয় যেকোনো ভয়েস সেশন সংযোগ বিচ্ছিন্ন করে এবং DOM থেকে উইজেট সরিয়ে দেয়। আপনার কোডে যেটি বেশি উপযুক্ত মনে হয়, সেটি ব্যবহার করুন। সিঙ্গল-পেজ অ্যাপ্লিকেশনে অন্যত্র নেভিগেট করার সময় বা ধারক এলিমেন্ট সরিয়ে ফেলার সময় সবসময় উইজেট পরিষ্কার করুন। এটি নিশ্চিত করে যে সক্রিয় ভয়েস সেশনগুলো সঠিকভাবে সংযোগ বিচ্ছিন্ন হয়। --- ## উদাহরণ ### কাস্টম রঙসহ ডার্ক থিম ```html
``` ### কাস্টম অবস্থান ```html
``` ### ইভেন্ট কলব্যাকসহ ```html
``` ### রিংটোনসহ ```html
``` ### DOM এলিমেন্ট রেফারেন্স ব্যবহার করে ```html
``` ### WordPress / CMS ইন্টিগ্রেশন এটি একটি কাস্টম HTML ব্লকে বা আপনার থিমের ফুটারে যোগ করুন: ```html
``` `
` যেকোনো স্থানে রাখা যেতে পারে -- এটি শুধু মাউন্ট পয়েন্ট। উইজেটটি নিজে ভিউপোর্টের একটি কোণে ( `position` অপশন দ্বারা নির্ধারিত) স্থির ওভারলে হিসেবে রেন্ডার হয় এবং আশপাশের কনটেন্টের সঙ্গে প্রবাহিত হয় না। --- ## সমস্যা সমাধান নিশ্চিত করুন যে CSS এবং JS উভয় ফাইলই লোড হয়েছে। নেটওয়ার্ক ত্রুটির জন্য ব্রাউজার কনসোল পরীক্ষা করুন। `ThunderPhone.mount()` কল করার আগে লক্ষ্য এলিমেন্টটি DOM-এ আছে কিনা যাচাই করুন। স্ক্রিপ্টটি এখনও লোড হয়নি। আপনার মাউন্ট কলের আগে `widget.js`-এর জন্য `