Вградима джаджа за гласов агент

Вградяемият гласов уиджет на ThunderPhone позволява на посетителите на вашия уебсайт да разговарят с AI агент директно от браузъра. Не е необходимо телефонно обаждане -- потребителите щракват върху бутон и започват гласов разговор в реално време, задвижван от ThunderPhone.

Уиджетът се визуализира като стъкломорфна лента, която се адаптира към светли и тъмни теми, с персонализируеми акцентни цветове и позициониране. Разпространява се като npm пакета @thunderphone/widget и е достъпен и чрез CDN за среди без bundler.

Предварителни изисквания

Преди да вградите уиджета, изпълнете тези три стъпки в таблото за управление на 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 агент с едно щракване.

Персонализиране

Уиджетът има четири свойства за външен вид:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Още три свойства персонализират сесията, а не външния вид -- всички се препращат към заявката за сесия при започване на разговор:

Вижте справочника за React компонента за пълната таблица със свойства.

За напълно персонализиран интерфейс използвайте headless hook, за да управлявате гласовата сесия, докато изграждате собствен интерфейс. Hook-ът предоставя аудио нива в реално време за създаване на визуализации, реагиращи на аудио.

Опции за интеграция

Изберете метода за интеграция, който отговаря на вашия стек:

Стилизиране

Уиджетът се предоставя с вградени светла и тъмна тема, управлявани чрез пропса theme, и акцентен цвят, управляван чрез пропса primaryColor. За по-задълбочена персонализация можете да презапишете CSS персонализирани свойства и класове. Вижте ръководството за стилизиране за подробности.