---
title: "Crie um widget web no painel"
description: "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](/pt/guides/embed-web-widget)
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

<Steps>
  <Step title="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.
  </Step>
  <Step title="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.
  </Step>
  <Step title="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](/pt/guides/embed-web-widget).
  </Step>
  <Step title="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.
  </Step>
</Steps>

## 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](/pt/widget/overview).

<Note>
  Chaves publicáveis (`pk_live_…`) são públicas por definição — podem ser usadas
  com segurança no código de front-end. Copie uma a qualquer momento com o botão de copiar na linha correspondente.
</Note>

## 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](/pt/guides/review-calls) com a
mesma transcrição, gravação e avaliação das chamadas telefônicas.

## Próximas etapas

<CardGroup cols={2}>
  <Card title="Referência do SDK do widget" icon="window-maximize" href="/pt/widget/overview">
    Detalhes do componente React, hook headless e script de CDN.
  </Card>
  <Card title="Roteamento no modo de webhook" icon="bolt" href="/pt/guides/dynamic-call-config">
    Retorne a configuração do agente por visitante a partir do seu servidor.
  </Card>
</CardGroup>