ওয়েব উইজেট এম্বেড করুন

ওয়েব উইজেটটি ব্রাউজারের মাইক্রোফোন ব্যবহার করে আপনার সাইটের ভিজিটরদের একটি AI এজেন্টের সঙ্গে ক্লিক-টু-টক কথোপকথন দেয়। এটি নিজস্ব SDK রেফারেন্স-সহ একটি পৃথক JavaScript / React SDK — এই গাইডে উইজেটের প্রয়োজনীয় ThunderPhone-পক্ষের সেটআপ নিয়ে আলোচনা করা হয়েছে।

পূর্বশর্ত

1. একটি এজেন্ট তৈরি করুন

   যে এজেন্টের prompt ও ভয়েস উইজেট সেশন চালাবে। widget_enabled: true সেট করুন (ডিফল্ট)।

2. রাউটিং মোড নির্ধারণ করুন
   • mode="agent" — প্রতি কীতে একটি স্ট্যাটিক এজেন্ট। সবচেয়ে সহজ।
   • mode="webhook" — একটি web.incoming webhook-এর মাধ্যমে আপনার সার্ভার প্রতি ভিজিটরের জন্য এজেন্ট বেছে নেয়। লগ-ইন করা ব্যবহারকারী, A/B পরীক্ষা বা প্রতি-পেজ রাউটিংয়ের জন্য এটি ব্যবহার করুন।
3. অনুমোদিত ডোমেইনের তালিকা করুন

   প্রকাশযোগ্য কীগুলো অরিজিন-লকড। উইজেট এমবেড করবে এমন প্রতিটি হোস্টনেম আপনাকে উল্লেখ করতে হবে। স্থানীয় ডেভেলপমেন্টের সময় localhost / 127.0.0.1 সবসময় অনুমোদিত থাকে।

একটি প্রকাশযোগ্য কী তৈরি করুন

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Marketing site (prod)",
    "mode":            "agent",
    "agent_id":        12,
    "allowed_domains": ["example.com", "*.example.com"]
  }'

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Support (dynamic)",
    "mode":            "webhook",
    "webhook_url":     "https://example.com/thunderphone/widget-hook",
    "allowed_domains": ["support.example.com"]
  }'

রেসপন্সে pk_live_... দিয়ে শুরু হওয়া একটি key অন্তর্ভুক্ত থাকে। প্রকাশযোগ্য কীগুলো নকশাগতভাবেই পাবলিক — আপনার ফ্রন্ট-এন্ড বান্ডলে অন্তর্ভুক্ত করা নিরাপদ। সব ফিল্ডের জন্য প্রকাশযোগ্য কী রেফারেন্স দেখুন।

আপনার সাইটে উইজেট যোগ করুন

উইজেট SDK ডকুমেন্টেশনে তিনটি ইন্টিগ্রেশন বিকল্প রয়েছে:

তিনটিই একই publishableKey গ্রহণ করে এবং মাইক বোতাম ও কলে থাকা অবস্থার অডিও এলিমেন্ট রেন্ডার করে।

উইজেটের context 12,000 অক্ষরে সীমাবদ্ধ করা হয় (সাধারণ ইংরেজি পাঠ্যের প্রায় 3,400 টোকেন) এবং এটি prompt-আকারের অতিরিক্ত চার্জ-এর অন্তর্ভুক্ত।

উইজেট-মোড webhook

mode="webhook" হলে, ThunderPhone প্রতিটি সেশন শুরুর সময় web.incoming পেলোডসহ আপনার webhook_url কল করে। ওই ভিজিটরের জন্য আপনি যে এজেন্ট কনফিগারেশন চালাতে চান তা রিটার্ন করুন — এটি ফোন কলের মতো একই রেসপন্স স্কিমা অনুসরণ করে:

{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}

আপনার নিজস্ব সেশনের প্রসঙ্গ (কোন গ্রাহক ব্রাউজ করছেন, তাঁরা কোন পেজে আছেন) prompt-এ মিশিয়ে দিতে পারেন এবং রোলআউটভেদে এজেন্ট বদলাতে পারেন।

সেশনগুলো পর্যবেক্ষণ করুন

উইজেট সেশনগুলো GET /v1/calls-এ direction="widget" সহ দেখা যায় — ফোন কলের মতোই একই ট্রান্সক্রিপ্ট, রেকর্ডিং, গ্রেডিং এবং বিলিং। শুধু উইজেটের জন্য ড্যাশবোর্ড তৈরি করতে direction দিয়ে ফিল্টার করুন।

পরবর্তী ধাপ