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

একটি মাত্র স্ক্রিপ্ট ট্যাগ দিয়ে আপনার মার্কেটিং বা সাপোর্ট সাইটে একটি ভয়েস এজেন্ট যোগ করুন — দর্শকরা ফোন নম্বর ছাড়াই সরাসরি ব্রাউজার থেকে এর সঙ্গে কথা বলতে পারবেন।

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

পূর্বশর্ত#

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

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

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

   প্রকাশযোগ্য কী origin-লক করা থাকে। উইজেট এমবেড করবে এমন প্রতিটি hostname আপনাকে উল্লেখ করতে হবে। স্থানীয় ডেভেলপমেন্টের সময় 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 প্রতিটি সেশন শুরুর সময় আপনার webhook_url-এ একটি web.incoming payload পাঠায়। ওই ভিজিটরের জন্য আপনি যে এজেন্ট কনফিগারেশন চালাতে চান তা ফেরত দিন — এটি ফোন কলের মতো একই response schema অনুসরণ করে:

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

আপনি নিজের সেশন থেকে context (কোন গ্রাহক ব্রাউজ করছেন, তাঁরা কোন পৃষ্ঠায় আছেন) prompt-এ যুক্ত করতে পারেন এবং রোলআউট অনুযায়ী এজেন্ট বদলাতে পারেন।

সেশন পর্যবেক্ষণ করুন#

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

পরবর্তী ধাপ#