Crie um widget web no painel

Configure um widget de clique para falar no seu site pela página Widgets Web — sem necessidade de chamadas de API.

A página Widgets da Web (/dashboard/web-widgets) cria e gerencia as chaves publicáveis que alimentam o widget de voz incorporável do ThunderPhone. Tudo o que a versão via API deste guia faz com cURL, esta página faz com um formulário — além de gerar o código de incorporação para você.

Criar um widget#

1. Clique em Novo widget e escolha um modo
   • Modo de agente — o widget sempre executa um agente escolhido por você no menu suspenso. A configuração mais simples.
   • Modo de webhook — em cada sessão do widget, o ThunderPhone chama o URL do seu webhook, e seu servidor retorna a configuração do agente para esse visitante (roteamento por página, usuários conectados, implantações graduais). Deixe o URL em branco para usar o webhook padrão da sua organização; ao inserir um novo URL, você também poderá defini-lo como o padrão da organização.
2. Liste os domínios permitidos

   Pelo menos um domínio é obrigatório, e os navegadores só podem iniciar sessões a partir dos nomes de host listados. Curingas de subdomínio, como *.example.com, são permitidos (eles correspondem a subdomínios, não ao domínio base); curingas isolados, como *, são rejeitados. A lista impede a reutilização casual da sua chave em outros sites, mas não é autenticação: um script fora de um navegador pode enviar qualquer cabeçalho Origin. localhost não é permitido automaticamente em produção; adicione-o à lista para testar localmente com a API de produção.

3. Escolha as substituições do navegador

   Marque cada configuração de sessão enviada pela sua página: Contexto da página, Variáveis, Voz, Idioma. Widgets novos não aceitam nenhuma, e uma solicitação de sessão com uma configuração desativada falha com 400. Sua chave é pública, portanto permita apenas o que você usa. Consulte Substituições do navegador.

4. Dê um nome, ative e crie

   O botão de alternância Ativar widget controla se a chave aceita sessões — você pode criar um widget desativado e ativá-lo no lançamento.

Obter o código de incorporação#

Logo após a criação (ou pelo botão Incorporar de cada linha), uma janela de incorporação gera código pronto para colar com sua chave publicável preenchida:

• React — um snippet <ThunderPhoneWidget /> para aplicativos com bundler.
• Tag de script — um par de <script> de CDN + folha de estilos para qualquer site.

A janela também mostra uma prévia das opções básicas de aparência — título, cor primária, posição no canto e tema claro/escuro — e inclui suas escolhas no snippet. Para a referência completa de props, hooks de estilização e a opção headless, consulte a documentação do SDK do widget.

Gerenciar widgets pela lista#

Cada linha é editada no próprio lugar:

• Modo / Agente — alterne entre o modo de agente e o modo de webhook ou redirecione o agente usando seletores em linha.
• Domínios — adicione ou remova domínios permitidos como chips.
• Ativar/desativar — um controle por widget; widgets desativados deixam de aceitar sessões imediatamente.
• Transferir para organização — copie ou mova o widget para outra organização da qual você faz parte (mover o remove daqui).
• Excluir — revoga a chave publicável; o widget deixa de funcionar imediatamente em todos os domínios. Isso não pode ser desfeito.

As sessões do widget aparecem no histórico de chamadas com a mesma transcrição, gravação e avaliação das chamadas telefônicas.

Próximas etapas#