ฝังวิดเจ็ตบนเว็บ

วิดเจ็ตเว็บช่วยให้ผู้เข้าชมเว็บไซต์ของคุณเริ่มการสนทนาแบบคลิกเพื่อพูด กับ AI เอเจนต์ โดยใช้ไมโครโฟนของเบราว์เซอร์ เป็น SDK JavaScript / React แยกต่างหากที่มีข้อมูลอ้างอิง SDKของตัวเอง — คู่มือนี้เน้นการตั้งค่าฝั่ง ThunderPhone ที่วิดเจ็ตต้องใช้

ข้อกำหนดเบื้องต้น

1. สร้างเอเจนต์

   เอเจนต์ที่มีพรอมป์ต์และเสียงสำหรับใช้ในเซสชันวิดเจ็ต ตั้งค่า 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"]
  }'

การตอบกลับมี key ที่ขึ้นต้นด้วย pk_live_... คีย์ที่เผยแพร่ได้ เป็นข้อมูลสาธารณะโดยการออกแบบ — ปลอดภัยสำหรับเผยแพร่ในบันเดิลฟรอนต์เอนด์ ของคุณ ดูฟิลด์ทั้งหมดได้ที่ข้อมูลอ้างอิงคีย์ที่เผยแพร่ได้

เพิ่มวิดเจ็ตลงในเว็บไซต์ของคุณ

ตัวเลือกการผสานรวม 3 แบบมีอธิบายไว้ใน เอกสาร SDK ของวิดเจ็ต:

ทั้ง 3 วิธีรับ publishableKey เดียวกัน และแสดงปุ่มไมโครโฟน พร้อมองค์ประกอบเสียงระหว่างการโทร

context ของวิดเจ็ตจะถูกตัดให้เหลือ 12,000 อักขระ (ประมาณ 3,400 โทเค็นของข้อความภาษาอังกฤษทั่วไป) และนับรวมใน ค่าธรรมเนียมเพิ่มตามขนาดพรอมป์ต์

Webhook สำหรับโหมดวิดเจ็ต

เมื่อ mode="webhook" ThunderPhone จะเรียก webhook_url ของคุณทุกครั้ง ที่เริ่มเซสชันพร้อมเพย์โหลด web.incoming ส่งคืนการกำหนดค่าเอเจนต์ ที่ต้องการใช้สำหรับผู้เข้าชมรายนั้น — โดยใช้ สคีมาการตอบกลับเดียวกับการโทรศัพท์:

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

คุณสามารถผสมบริบทจากเซสชันของคุณเอง (ลูกค้ารายใดกำลังเข้าชม อยู่หน้าใด) ลงในพรอมป์ต์ และสลับเอเจนต์ตามการทยอยเปิดใช้ได้

ตรวจสอบเซสชัน

เซสชันวิดเจ็ตจะแสดงใน GET /v1/calls โดยมี direction="widget" — มีทรานสคริปต์ การบันทึก การประเมิน และ การเรียกเก็บเงินเหมือนกับการโทรศัพท์ กรองตาม direction เพื่อสร้าง แดชบอร์ดเฉพาะวิดเจ็ต

ขั้นตอนถัดไป