> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/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
      seu URL de webhook, e seu servidor retorna a configuração do agente
      para esse visitante (roteamento por página, usuários autenticados, lançamentos graduais).
      Deixe o URL em branco para usar o webhook padrão da sua organização;
      ao inserir um novo URL, você também pode defini-lo como o padrão da organização.
  </Step>

  <Step title="Liste os domínios permitidos">
    As chaves publicáveis são bloqueadas por origem: é necessário informar pelo menos
    um domínio, e o widget funciona apenas nos nomes de host listados. Caracteres
    curinga de subdomínio, como `*.example.com`, são permitidos (eles correspondem a subdomínios,
    não ao domínio sem subdomínio); curingas simples, como `*`, são rejeitados.
    `localhost` e `127.0.0.1` são sempre permitidos, portanto o desenvolvimento local
    funciona sem precisar listá-los.
  </Step>

  <Step title="Dê um nome, ative e crie">
    O controle **Ativar widget** define 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>