Widget

Widget de voz incorporável

Adicione um agente de voz com IA a qualquer site com algumas linhas de código

O widget de voz incorporável do ThunderPhone permite que os visitantes do seu site conversem com um agente de IA diretamente no navegador. Não é necessária nenhuma ligação -- os usuários clicam em um botão e iniciam uma conversa por voz em tempo real com a tecnologia do ThunderPhone.

O widget é exibido como uma barra com efeito glassmorphism que se adapta a temas claros e escuros, com cores de destaque e posicionamento personalizáveis. Ele é distribuído como o pacote npm @thunderphone/widget e também está disponível via CDN para ambientes sem bundler.

Pré-requisitos#

Antes de incorporar o widget, conclua estas três etapas no Painel do ThunderPhone:

1. Criar uma chave de API publicável

   Acesse Desenvolvedores nas configurações do painel e crie uma chave publicável. As chaves publicáveis começam com pk_live_ e podem ser incluídas com segurança no código do cliente.

2. Configurar domínios permitidos

   Nas mesmas configurações de Desenvolvedores, adicione os domínios onde o widget será incorporado. localhost é sempre permitido para desenvolvimento. Caracteres curinga são compatíveis (por exemplo, *.example.com).

3. Criar um widget web

   Acesse Widgets Web no painel e crie um widget. Selecione o agente que deseja disponibilizar e a chave publicável a ser usada. O agente é resolvido automaticamente a partir da configuração da sua chave publicável.

Início rápido#

Instale o pacote:

npm install @thunderphone/widget

Adicione o widget ao seu aplicativo:

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

Pronto. Seus usuários verão uma barra de chamada com efeito glassmorphism que os conecta ao seu agente de IA com um único clique.

Personalização#

O widget tem quatro props de aparência:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

Mais três props personalizam a sessão, e não a aparência -- todas são encaminhadas para a solicitação de sessão quando uma chamada é iniciada:

Consulte a referência do componente React para a tabela completa de props.

Para uma interface totalmente personalizada, use o hook headless para gerenciar a sessão de voz enquanto cria sua própria interface. O hook expõe níveis de áudio em tempo real para criar visualizações que reagem ao áudio.

Opções de integração#

Escolha o método de integração que melhor se adapta à sua stack:

Estilização#

O widget inclui temas claro e escuro integrados, controlados pela prop theme, e uma cor de destaque controlada pela prop primaryColor. Para uma personalização mais profunda, você pode substituir propriedades e classes personalizadas de CSS. Consulte o guia de estilização para ver os detalhes.