เริ่มต้นใช้งาน

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

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

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

วิดเจ็ต ThunderPhone ในธีมสว่างและมืดพร้อมสีเน้นหลากหลายสี

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

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

  1. สร้างคีย์ API ที่เผยแพร่ได้

    ไปที่ นักพัฒนา ในการตั้งค่าแดชบอร์ด แล้วสร้างคีย์ที่เผยแพร่ได้ คีย์ที่เผยแพร่ได้จะขึ้นต้นด้วย pk_live_ และปลอดภัยสำหรับการใส่ในโค้ดฝั่งไคลเอนต์

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

    ในการตั้งค่านักพัฒนาเดียวกัน ให้เพิ่มโดเมนที่จะฝังวิดเจ็ต localhost ได้รับอนุญาตเสมอสำหรับการพัฒนา รองรับไวลด์การ์ด เช่น *.example.com

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

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

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

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

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

การปรับแต่ง

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

พร็อพค่าเริ่มต้นคำอธิบาย
theme'light''light' สำหรับกระจกสีขาว 'dark' สำหรับกระจกสีเข้ม
primaryColor'#000000' (สว่าง) / '#ffffff' (มืด)สีเน้นสำหรับปุ่มเริ่ม รูปคลื่น และตัวบ่งชี้การเชื่อมต่อ
title'Voice assistant'ข้อความที่แสดงในวิดเจ็ต
position'bottom-right'มุมของวิวพอร์ต: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

พร็อพอีกสามรายการใช้ปรับแต่งเซสชันแทนลักษณะที่ปรากฏ โดยทั้งหมดจะถูกส่งต่อไปยังคำขอเซสชันเมื่อเริ่มการโทร:

พร็อพคำอธิบาย
languageการแทนที่ภาษารายเซสชัน — รหัสหรือโลแคล เช่น en, es หรือ fr-FR
voiceการแทนที่เสียงรายเซสชัน — ชื่อเสียง เช่น maria
contextบริบทข้อเท็จจริงของหน้าหรือเว็บไซต์ที่ส่งให้เอเจนต์ (เซิร์ฟเวอร์จะตัดทอนให้เหลือ 12,000 อักขระ)

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

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

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

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

คอมโพเนนต์ React

คอมโพเนนต์ UI ที่สร้างไว้ล่วงหน้าพร้อมตัวควบคุมการโทรและการแสดงสถานะในตัว นำเข้า ส่ง props แล้วใช้งานได้ทันที

Hook แบบ Headless

ควบคุม UI ได้อย่างเต็มที่ Hook useThunderPhone จัดการเซสชันเสียง ขณะที่คุณสร้างอินเทอร์เฟซของคุณเอง

CDN / แท็ก Script

ไม่ต้องใช้ bundler โหลดวิดเจ็ตผ่านแท็ก script สำหรับเว็บไซต์แบบสแตติก WordPress และสภาพแวดล้อมอื่นที่ไม่ใช่ React

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

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