วิดเจ็ตเสียงแบบฝัง

เพิ่ม AI เอเจนต์เสียงลงในเว็บไซต์ใดก็ได้ด้วยโค้ดเพียงไม่กี่บรรทัด

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

วิดเจ็ตจะแสดงเป็นแถบสไตล์กระจกโปร่งใสที่ปรับให้เข้ากับธีมสว่างและมืด พร้อมสีเน้นและตำแหน่งที่ปรับแต่งได้ โดยเผยแพร่เป็นแพ็กเกจ npm @thunderphone/widget และพร้อมใช้งานผ่าน CDN สำหรับสภาพแวดล้อมที่ไม่ใช้บันเดิลเลอร์

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

ก่อนฝังวิดเจ็ต ให้ดำเนินการสามขั้นตอนต่อไปนี้ใน แดชบอร์ด ThunderPhone:

1. สร้างวิดเจ็ตเว็บ

   ไปที่ วิดเจ็ตเว็บ ในแดชบอร์ดและสร้างวิดเจ็ต เลือกเอเจนต์ที่ต้องการเผยแพร่ วิดเจ็ตแต่ละรายการมีคีย์ที่เผยแพร่ได้ของตนเอง (pk_live_...) ซึ่งสามารถใส่ในโค้ดฝั่งไคลเอ็นต์ได้อย่างปลอดภัย ระบบจะระบุเอเจนต์จากคีย์

2. กำหนดค่าโดเมนที่อนุญาต

   ในวิดเจ็ตเดียวกัน เพิ่มโดเมนที่จะฝังวิดเจ็ต รองรับไวลด์การ์ด (เช่น *.example.com) รายการนี้ป้องกันไม่ให้วิดเจ็ตทำงานเมื่อมีผู้คัดลอกคีย์ของคุณไปยังเว็บไซต์อื่น แต่ไม่ใช่การตรวจสอบสิทธิ์ เนื่องจากสคริปต์ภายนอกเบราว์เซอร์สามารถส่งส่วนหัว Origin ใดก็ได้ localhost จะไม่ได้รับอนุญาตโดยอัตโนมัติในระบบใช้งานจริง ให้เพิ่มลงในรายการเพื่อทดสอบในเครื่องกับ API ของระบบใช้งานจริง

3. เลือกการแทนที่ค่าจากเบราว์เซอร์

   หากหน้าของคุณตั้งค่า language voice หรือ context ให้เปิดใช้งานแต่ละรายการภายใต้ การแทนที่ค่าจากเบราว์เซอร์ วิดเจ็ตใหม่จะไม่อนุญาตค่าใดเลย และคำขอเซสชันที่มีการตั้งค่าซึ่งปิดอยู่จะล้มเหลวด้วย 400 override_not_allowed ดู การแทนที่ค่าจากเบราว์เซอร์

เริ่มต้นอย่างรวดเร็ว#

ติดตั้งแพ็กเกจ:

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 เอเจนต์ของคุณได้ด้วยการคลิกเพียงครั้งเดียว

การปรับแต่ง#

วิดเจ็ตมีพร็อพสำหรับลักษณะที่ปรากฏสี่รายการ:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

พร็อพเพิ่มเติมอีก 3 รายการนี้ใช้ปรับแต่งเซสชันแทนรูปลักษณ์ โดยทั้งหมดจะถูกส่งต่อไปยังคำขอเซสชันเมื่อเริ่มการโทร แต่ละรายการจะใช้งานได้ก็ต่อเมื่อคีย์แบบเผยแพร่ของวิดเจ็ตอนุญาตภายใต้ การแทนที่จากเบราว์เซอร์ มิฉะนั้นคำขอเซสชันจะล้มเหลวด้วย 400 override_not_allowed:

ดูตารางพร็อพทั้งหมดได้ที่เอกสารอ้างอิงคอมโพเนนต์ React

สำหรับ UI ที่ปรับแต่งได้ทั้งหมด ให้ใช้ฮุกแบบ headlessเพื่อจัดการเซสชันเสียงขณะที่คุณสร้างอินเทอร์เฟซของตนเอง ฮุกนี้แสดงระดับเสียงแบบเรียลไทม์สำหรับสร้างภาพแสดงผลที่ตอบสนองต่อเสียง

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

ตัวเลือกการผสานรวม#

เลือกวิธีการผสานรวมที่เหมาะกับสแต็กของคุณ:

การปรับสไตล์#

วิดเจ็ตมาพร้อมธีมสว่างและมืดในตัวที่ควบคุมด้วย prop theme และสีเน้นที่ควบคุมด้วย prop primaryColor สำหรับการปรับแต่งเชิงลึก คุณสามารถแทนที่ CSS custom properties และคลาสได้ ดูรายละเอียดในคู่มือการปรับสไตล์