Widget de voz incorporável

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.

Widget do ThunderPhone em temas claros e escuros com várias cores de destaque

Pré-requisitos

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

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.

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).

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.

As chaves publicáveis (pk_live_...) não são iguais aos seus tokens de API secretos. As chaves publicáveis foram projetadas para uso no cliente e são limitadas a sessões de widget nos seus domínios permitidos. Nunca use seu token de API secreto no código do cliente.

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:

Prop	Padrão	Descrição
`theme`	`'light'`	`'light'` para vidro branco, `'dark'` para vidro escuro
`primaryColor`	`'#000000'` (claro) / `'#ffffff'` (escuro)	Cor de destaque para o botão de iniciar, a forma de onda e o indicador de conexão
`title`	`'Voice assistant'`	Texto exibido no widget
`position`	`'bottom-right'`	Canto da viewport: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`

<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:

Prop	Descrição
`language`	Substituição de idioma por sessão — um código ou localidade como `en`, `es` ou `fr-FR`
`voice`	Substituição de voz por sessão — um nome de voz como `maria`
`context`	Contexto factual da página ou do site passado ao agente (truncado no servidor para 12.000 caracteres)

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:

Componente React

Componente de UI pré-criado com controles de chamada e exibição de status integrados. Importe, passe as props e pronto.

Hook headless

Controle total sobre a UI. O hook useThunderPhone gerencia a sessão de voz enquanto você cria sua própria interface.

CDN / tag de script

Não requer bundler. Carregue o widget por meio de uma tag de script para sites estáticos, WordPress e outros ambientes que não usam React.

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.

Precisa de ajuda? Entre em contato pelo support@thunderphone.com

​Pré-requisitos

​Início rápido

​Personalização

​Opções de integração

Componente React

Hook headless

CDN / tag de script

​Estilização

Pré-requisitos

Início rápido

Personalização

Opções de integração

Estilização