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

เพิ่มเอเจนต์เสียงลงในเว็บไซต์การตลาดหรือเว็บไซต์สนับสนุนของคุณด้วยแท็กสคริปต์เพียงแท็กเดียว ผู้เข้าชมสามารถพูดคุยกับเอเจนต์ได้โดยตรงจากเบราว์เซอร์ โดยไม่ต้องใช้หมายเลขโทรศัพท์

วิดเจ็ตเว็บช่วยให้ผู้เข้าชมเว็บไซต์ของคุณเริ่มการสนทนาแบบคลิกเพื่อพูดคุย กับ AI เอเจนต์ โดยใช้ไมโครโฟนของเบราว์เซอร์ เป็น JavaScript / React SDK แยกต่างหากพร้อมข้อมูลอ้างอิง 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_... คีย์แบบเผยแพร่ได้ เป็นข้อมูลสาธารณะโดยการออกแบบ — ปลอดภัยที่จะรวมไว้ในบันเดิลฟรอนต์เอนด์ของคุณ ดูข้อมูลอ้างอิงคีย์แบบเผยแพร่ได้สำหรับ ทุกฟิลด์

เพิ่มวิดเจ็ตลงในเว็บไซต์#

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

ทั้งสามแบบรับ 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 เพื่อสร้างแดชบอร์ดสำหรับวิดเจ็ตเท่านั้น

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