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

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

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

বিভিন্ন অ্যাকসেন্ট রংসহ হালকা ও গাঢ় থিমে ThunderPhone উইজেট

পূর্বশর্ত

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

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

দ্রুত শুরু

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

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

Prop	ডিফল্ট	বিবরণ
`theme`	`'light'`	সাদা গ্লাসের জন্য `'light'`, গাঢ় গ্লাসের জন্য `'dark'`
`primaryColor`	`'#000000'` (হালকা) / `'#ffffff'` (গাঢ়)	শুরু বোতাম, ওয়েভফর্ম এবং সংযোগ নির্দেশকের অ্যাকসেন্ট রং
`title`	`'Voice assistant'`	উইজেটে প্রদর্শিত লেখা
`position`	`'bottom-right'`	ভিউপোর্টের কোণ: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

আরও তিনটি prop চেহারার পরিবর্তে সেশন কাস্টমাইজ করে -- কল শুরু হলে সবগুলো সেশন রিকোয়েস্টে ফরওয়ার্ড করা হয়:

Prop	বিবরণ
`language`	প্রতি-সেশন ভাষা ওভাররাইড -- `en`, `es`, বা `fr-FR`-এর মতো একটি কোড বা লোকেল
`voice`	প্রতি-সেশন ভয়েস ওভাররাইড -- `maria`-এর মতো একটি ভয়েসের নাম
`context`	এজেন্টকে পাঠানো পৃষ্ঠা বা সাইটের তথ্যভিত্তিক প্রসঙ্গ (সার্ভার-সাইডে 12,000 অক্ষরে সংক্ষিপ্ত করা হয়)

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

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

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

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

React কম্পোনেন্ট

বিল্ট-ইন কল নিয়ন্ত্রণ ও স্ট্যাটাস প্রদর্শনসহ আগে থেকে তৈরি UI কম্পোনেন্ট। ইমপোর্ট করুন, props দিন, কাজ শেষ।

হেডলেস হুক

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

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

কোনো bundler প্রয়োজন নেই। স্ট্যাটিক সাইট, WordPress এবং অন্যান্য non-React পরিবেশের জন্য স্ক্রিপ্ট ট্যাগের মাধ্যমে উইজেট লোড করুন।

স্টাইলিং

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