Widget

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 publikowalny klucz API

   Przejdź do Programiści w ustawieniach panelu i utwórz publikowalny klucz. Klucze publikowalne zaczynają się od pk_live_ i można je bezpiecznie umieszczać w kodzie po stronie klienta.

2. Skonfiguruj dozwolone domeny

   W tych samych ustawieniach Programiści dodaj domeny, w których widżet będzie osadzony. localhost jest zawsze dozwolony podczas programowania. Obsługiwane są symbole wieloznaczne, np. *.example.com.

3. Utwórz widżet internetowy

   Przejdź do Widżety internetowe w panelu i utwórz widżet. Wybierz agenta, którego chcesz udostępnić, oraz publikowalny klucz do użycia. Agent jest rozpoznawany automatycznie na podstawie konfiguracji publikowalnego klucza.

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 dodatkowe właściwości dostosowują sesję, a nie wygląd — wszystkie są przekazywane do żądania sesji po rozpoczęciu połączenia:

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.

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.