এমবেডযোগ্য ভয়েস উইজেট

কয়েক লাইন কোড দিয়ে যেকোনো ওয়েবসাইটে একটি ভয়েস AI এজেন্ট যোগ করুন

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

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

পূর্বশর্ত#

উইজেট এমবেড করার আগে, ThunderPhone Dashboard-এ এই তিনটি ধাপ সম্পন্ন করুন:

1. একটি ওয়েব উইজেট তৈরি করুন

   ড্যাশবোর্ডে ওয়েব উইজেট-এ যান এবং একটি উইজেট তৈরি করুন। আপনি যে এজেন্টটি প্রকাশ করতে চান তা নির্বাচন করুন। প্রতিটি উইজেটের নিজস্ব প্রকাশযোগ্য কী (pk_live_...) থাকে, যা ক্লায়েন্ট-সাইড কোডে অন্তর্ভুক্ত করা নিরাপদ; কী থেকে এজেন্ট নির্ধারিত হয়।

2. অনুমোদিত ডোমেইন কনফিগার করুন

   একই উইজেটে, যেখানে এটি এমবেড করা হবে সেই ডোমেইনগুলো যোগ করুন। ওয়াইল্ডকার্ড সমর্থিত (যেমন, *.example.com)। কেউ আপনার কী অন্য সাইটে কপি করলে এই তালিকাটি উইজেটকে কাজ করা থেকে বিরত রাখে; এটি প্রমাণীকরণ নয়, কারণ ব্রাউজারের বাইরের একটি স্ক্রিপ্ট যেকোনো Origin হেডার পাঠাতে পারে। প্রোডাকশনে localhost স্বয়ংক্রিয়ভাবে অনুমোদিত নয়: প্রোডাকশন API-এর বিপরীতে স্থানীয়ভাবে পরীক্ষা করতে এটি তালিকায় যোগ করুন।

3. ব্রাউজার ওভাররাইড বেছে নিন

   আপনার পৃষ্ঠা language, voice, বা context সেট করলে, ব্রাউজার ওভাররাইড-এর অধীনে প্রতিটি চালু করুন। নতুন উইজেট কোনোটি গ্রহণ করে না, এবং বন্ধ থাকা সেটিংসহ একটি সেশন অনুরোধ 400 override_not_allowed দিয়ে ব্যর্থ হয়। ব্রাউজার ওভাররাইড দেখুন।

দ্রুত শুরু#

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

npm install @thunderphone/widget

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

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 রয়েছে:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

আরও তিনটি prop চেহারার পরিবর্তে সেশন কাস্টমাইজ করে -- কল শুরু হলে সবগুলো সেশন অনুরোধে ফরওয়ার্ড করা হয়। প্রতিটি কেবল তখনই কাজ করে যখন উইজেটের publishable key ব্রাউজার ওভাররাইড-এর অধীনে এটি অনুমোদন করে; অন্যথায় সেশন অনুরোধ 400 override_not_allowed দিয়ে ব্যর্থ হয়:

সম্পূর্ণ props টেবিলের জন্য React কম্পোনেন্ট রেফারেন্স দেখুন।

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

প্রতিটি উইজেট কথোপকথন একটি কল। এটি আপনার প্রতিষ্ঠানের একযোগে কলের সীমা-এর অন্তর্ভুক্ত (ডিফল্টভাবে চলমান 20টি কল, ফোন ও অন্যান্য কলের সঙ্গে ভাগ করা) এবং 25টি সক্রিয় সেশনের উইজেট সীমার অন্তর্ভুক্ত (অথবা আপনার একযোগে কলের সীমা, যদি সেটি বেশি হয়)। যেকোনো সীমায় পৌঁছালে, একটি কল শেষ না হওয়া পর্যন্ত নতুন কথোপকথন শুরু করা যাবে না।

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

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

স্টাইলিং#

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