⚡ ZapBox — demo do widget

Esta é uma página de exemplo que embute o widget de chat no canto da tela.

Como embutir no seu site

Basta uma linha antes de </body>:

<script src="https://SEU_DOMINIO/zapbox-widget.js"
        data-key="SUA_PUBLIC_KEY"
        data-api="https://SUA_API"></script>

data-key: a publicKey do widget (app → Widget).
data-api: URL da API do ZapBox (opcional; padrão http://localhost:4100).

O que testar

O microfone exige contexto seguro: abra por https:// ou por http://localhost / http://127.0.0.1. Servida por IP de rede em http://, a página não tem navigator.mediaDevices e os controles de voz simplesmente não aparecem — isso é esperado, não é defeito do widget.

  1. Bolha flutuante com badge de mensagens não lidas.
  2. Tema claro/escuro/auto, cor primária e posição definidos no builder do widget.
  3. Formulário pré-chat (se habilitado), banners e atalhos.
  4. Mensagens com botões, imagens e carrossel vindas de um bot.
  5. Indicador "digitando…" enquanto o agente de IA responde.
  6. Voz avulsa (se voiceEnabled estiver ativo no widget): botão de microfone ao lado do input (fale e a transcrição vira mensagem), botão 🔊 nas respostas do agente e o toggle de modo voz no header (a resposta sai falada; o microfone volta no toque).
  7. Modo chamada — botão de telefone no header: toca o telefone chamando enquanto a primeira frase carrega, o atendente cumprimenta falando e o microfone fica aberto sozinho. Não se aperta mais nada: fale e ele responde; fale por cima e ele abaixa a voz e para para escutar. O texto da conversa continua aparecendo na tela. Desliga no botão vermelho ou no Escape.
  8. Idioma da interface e da voz: defina language na config do widget (pt-BR, en, es).