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

Добавете гласов AI агент към всеки уебсайт с няколко реда код

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

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

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

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

Още три свойства персонализират сесията, а не външния вид — всички се препращат към заявката за сесия при започване на обаждане. Всяко работи само когато публикуемият ключ на уиджета го позволява в Замени от браузъра; в противен случай заявката за сесия завършва с 400 override_not_allowed:

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

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

Всеки разговор чрез уиджета е обаждане. Той се отчита към лимита за едновременни обаждания на вашата организация (по подразбиране 20 текущи обаждания, споделени с телефонните и други обаждания) и към лимит на уиджета от 25 активни сесии (или вашия лимит за едновременни обаждания, ако е по-висок). При достигане на който и да е от двата лимита нов разговор не може да започне, докато не приключи обаждане.

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

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

Стилизиране#

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