Osadzalny widżet głosowy

Dodaj głosowego agenta AI do dowolnej strony internetowej za pomocą kilku wierszy kodu

Osadzalny widżet głosowy ThunderPhone umożliwia odwiedzającym Twoją witrynę rozmawianie z agentem AI bezpośrednio w przeglądarce. Rozmowa telefoniczna nie jest wymagana — użytkownicy klikają przycisk i rozpoczynają rozmowę głosową w czasie rzeczywistym obsługiwaną przez ThunderPhone.

Widżet jest wyświetlany jako pasek o szklanym wyglądzie, który dostosowuje się do jasnych i ciemnych motywów, z konfigurowalnymi kolorami akcentów i pozycjonowaniem. Jest dystrybuowany jako pakiet npm @thunderphone/widget i dostępny również przez CDN dla środowisk bez bundlera.

Wymagania wstępne#

Przed osadzeniem widżetu wykonaj te trzy kroki w Panelu ThunderPhone:

1. Utwórz widżet internetowy

   Przejdź do sekcji Widżety internetowe w panelu i utwórz widżet. Wybierz agenta, którego chcesz udostępnić. Każdy widżet ma własny klucz publiczny (pk_live_...), który można bezpiecznie umieścić w kodzie po stronie klienta; agent jest określany na podstawie klucza.

2. Skonfiguruj dozwolone domeny

   W tym samym widżecie dodaj domeny, w których będzie osadzony. Obsługiwane są symbole wieloznaczne (np. *.example.com). Lista uniemożliwia działanie widżetu, gdy ktoś skopiuje Twój klucz do innej witryny; nie jest to uwierzytelnianie, ponieważ skrypt poza przeglądarką może wysłać dowolny nagłówek Origin. localhost nie jest automatycznie dozwolony w środowisku produkcyjnym: dodaj go do listy, aby testować lokalnie z użyciem produkcyjnego API.

3. Wybierz nadpisania przeglądarki

   Jeśli Twoja strona ustawia language, voice lub context, włącz każde z nich w sekcji Nadpisania przeglądarki. Nowe widżety nie akceptują żadnych nadpisań, a żądanie sesji zawierające wyłączone ustawienie kończy się błędem 400 override_not_allowed. Zobacz Nadpisania przeglądarki.

Szybki start#

Zainstaluj pakiet:

npm install @thunderphone/widget

Dodaj widżet do aplikacji:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

To wszystko. Użytkownicy zobaczą pasek połączenia o szklanym wyglądzie, który jednym kliknięciem łączy ich z agentem AI.

Dostosowywanie#

Widżet ma cztery właściwości wyglądu:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Trzy kolejne właściwości dostosowują sesję, a nie wygląd — wszystkie są przekazywane do żądania sesji po rozpoczęciu połączenia. Każda z nich działa tylko wtedy, gdy klucz publikowalny widżetu zezwala na to w sekcji Nadpisania przeglądarki; w przeciwnym razie żądanie sesji kończy się błędem 400 override_not_allowed:

Pełną tabelę właściwości znajdziesz w dokumentacji komponentu React.

Aby utworzyć w pełni niestandardowy interfejs, użyj hooka headless do zarządzania sesją głosową podczas tworzenia własnego interfejsu. Hook udostępnia poziomy dźwięku w czasie rzeczywistym do tworzenia wizualizacji reagujących na dźwięk.

Każda rozmowa w widżecie jest połączeniem. Jest uwzględniana w limicie równoczesnych połączeń organizacji (domyślnie 20 trwających połączeń, wspólny limit dla połączeń telefonicznych i innych) oraz limicie widżetu wynoszącym 25 aktywnych sesji (lub limicie równoczesnych połączeń, jeśli jest wyższy). Po osiągnięciu któregokolwiek z limitów nie można rozpocząć nowej rozmowy, dopóki połączenie się nie zakończy.

Opcje integracji#

Wybierz metodę integracji dopasowaną do Twojego stosu technologicznego:

Stylizacja#

Widżet zawiera wbudowane jasne i ciemne motywy sterowane właściwością theme oraz kolor akcentu sterowany właściwością primaryColor. Aby uzyskać bardziej zaawansowaną personalizację, możesz nadpisać niestandardowe właściwości i klasy CSS. Szczegółowe informacje znajdziesz w przewodniku po stylizacji.