Adicione sua assistente de IA a qualquer site com um widget personalizável que suporta chamadas de voz, chat de texto ou ambos.
Visão Geral
O Widget da Web permite que os visitantes do site interajam com sua assistente de IA diretamente através de:
- Conversas por voz: Chamadas de voz em tempo real no navegador
- Chat de texto: Interface de mensagens para interações baseadas em texto
- Modo híbrido: Troca contínua entre voz e chat
- Navegue até a página de edição da sua assistente
- Clique no botão “Widget da Web” (cor amarela/aviso)
- O painel de configuração do widget se abre com uma prévia ao vivo
O Widget da Web é um recurso premium. Certifique-se de que seu plano inclui acesso ao widget da web antes da configuração.
Voz e Chat (Recomendado)
Os usuários podem alternar facilmente entre voz e texto durante as conversas.
Melhor para:
- Máxima flexibilidade para os usuários
- Acessibilidade (voz para dispositivos móveis, chat para ambientes silenciosos)
- Interações complexas que exigem ambos os modos
Somente Chat
Interface de mensagens apenas baseada em texto.
Melhor para:
- Suporte ao cliente e FAQs
- Ambientes onde a voz não é apropriada
- Captura de leads e formulários de qualificação
Somente Voz
Conversas por voz em tempo real apenas.
Melhor para:
- Experiência semelhante a telefone no site
- Casos de uso focados em voz
- Interações sem as mãos
Opções de Configuração
Aba Geral
Modo do Widget: Voz, Chat ou Voz e Chat
Tamanho do Widget: Escolha entre layout padrão ou extra grande
- Padrão: Widget flutuante compacto adequado para a maioria dos casos de uso
- Extra Grande: Painel de meio de tela no desktop, tela cheia no mobile — ideal para conversas detalhadas
Posição: Escolha entre 8 posições (inferior direita, inferior esquerda, inferior centro, meio direita, meio esquerda, superior direita, superior esquerda, superior centro)
Cor Primária: Cor da marca para botões e acentos
Tamanho do Botão de Alternância: Pequeno ou Normal
Estilo do Botão de Alternância: Animado (morfismo de vidro) ou Simples (design plano)
Abrir Automaticamente na Carga da Página: Quando ativado, o widget se expande automaticamente quando a página é carregada — nenhum clique é necessário do visitante.
Aba do Botão
Avatar Personalizado: Carregue sua própria imagem de avatar para substituir o ícone padrão do widget. Aparece no botão de alternância e no cabeçalho do chat. Tamanho máximo do arquivo: 512KB, proporção 1:1 (quadrada).
Texto Principal do Botão (padrão: “Precisa de ajuda?”) — texto principal no botão do widget
Texto Secundário do Botão (padrão: “Converse conosco”) — texto secundário, oculto ao usar o tamanho pequeno do botão
Rótulos das Abas (somente no modo Voz e Chat):
- Rótulo da Aba de Voz (padrão: “Voz”) — renomeie para corresponder à linguagem da sua marca (por exemplo, “Ligue para Nós”, “Fale”)
- Rótulo da Aba de Chat (padrão: “Chat”) — renomeie para corresponder à linguagem da sua marca (por exemplo, “Mensagem”, “Texto”)
Aba de Cabeçalho e Modal
Título do Cabeçalho (padrão: “Assistente de IA”)
Subtítulo do Cabeçalho (padrão: “Pronto para ajudar você ✨”)
Título do Modal (padrão: “Pronto para conversar?”)
Texto do Botão de Início (padrão: “Iniciar Chat por Voz”)
Descrição do Modal (padrão: “Clique abaixo para iniciar sua conversa”)
Aba de Configurações de Chat
Esta aba só é visível quando o modo do widget inclui chat (Somente Chat ou Voz e Chat).
Links Clicáveis no Chat
O widget de chat suporta formatação markdown, para que sua assistente de IA possa enviar links clicáveis, texto em negrito, listas e mais.
Para incluir URLs clicáveis nas mensagens de chat, use o formato de link markdown no prompt ou mensagem inicial da sua assistente:
Adicione uma instrução ao prompt da sua assistente como: “Ao compartilhar links ou URLs, sempre formate-os como links markdown clicáveis: [texto do link](url)” — isso garante que a IA produza consistentemente links clicáveis em vez de URLs em texto simples.
Aba de Configurações de Voz
Esta aba só é visível quando o modo do widget inclui voz (Somente Voz ou Voz e Chat).
- Título do Pré-formulário (padrão: “Antes de começarmos…”)
- Descrição do Pré-formulário (padrão: “Por favor, forneça algumas informações para nos ajudar a atendê-lo melhor”)
- Texto do Botão de Envio (padrão: “Continuar”)
Campos do Formulário:
Adicione campos personalizados para coletar dados:
- Nome da Variável: Nome da variável interna (mapeia para variáveis da assistente). Apenas letras, números, traços e sublinhados permitidos.
- Rótulo do Campo: Rótulo exibido para os usuários
- Tipo de Campo: Texto, Email, Telefone ou Área de Texto
- Obrigatório: Torne o campo obrigatório
- Placeholder: Texto de placeholder exibido no campo
- Texto de Ajuda: Descrição opcional abaixo do campo
Mapeamento de Variáveis:
Os nomes dos campos do formulário são mapeados automaticamente para as variáveis da sua assistente, tornando os dados coletados disponíveis durante as conversas.
Exemplo de Campos do Formulário:
Configurações de Resposta da IA
IA Habilitada: Quando ativada (padrão), a assistente de IA responde automaticamente às mensagens recebidas. Desative isso se você quiser usar o widget apenas para conversas manuais — as mensagens são coletadas, mas a IA não responde.
Webhook de Conversa
URL do Webhook: Insira uma URL para receber uma notificação de webhook sempre que uma nova conversa começar via o widget. Use isso para acionar fluxos de automação, registrar eventos em seu CRM ou notificar sua equipe em tempo real.
Habilitar Widget: Alternância mestre que controla se o widget carrega em seu site. Quando desativado, o widget não aparecerá mesmo que o script de incorporação esteja instalado em seu site. Use isso para ocultar temporariamente o widget sem remover o código do seu site.
Na parte superior do painel de configuração, uma prévia ao vivo mostra exatamente como seu widget parecerá e se comportará em um site. A prévia é atualizada em tempo real à medida que você altera qualquer configuração.
Copiar URL da Prévia — copia a URL da prévia para sua área de transferência para que você possa abri-la em uma nova aba do navegador ou compartilhá-la com sua equipe para revisão.
Redefinir Dados — limpa todo o histórico de conversas armazenado, envios de formulários e preferências na prévia. Use isso para simular a experiência de um visitante pela primeira vez após os testes.
A prévia é totalmente interativa — você pode clicar no botão do widget, preencher o formulário pré-chat e iniciar uma conversa real para testar sua configuração antes de implantar.
Código de Incorporação
A seção de código de incorporação fornece uma tag de script pronta para copiar. Clique em Copiar para copiá-la para sua área de transferência e, em seguida, cole-a em seu site antes da tag de fechamento </body>:
Salve suas configurações do widget antes de copiar o código de incorporação. O script carrega toda a configuração do servidor, portanto, quaisquer alterações não salvas não aparecerão em seu site.
Instalação
- Configure e salve suas configurações do widget
- Copie o código de incorporação da seção Código de Incorporação
- Cole a tag de script antes da tag de fechamento
</body> em seu site
- Visite seu site e verifique se o widget aparece na posição configurada
- Teste a funcionalidade de voz/chat e o formulário pré-chat (se configurado)
Primeira Visita
- O botão do widget aparece na posição configurada
- Clicar abre a interface modal/chat
- O formulário pré-chat é exibido (se configurado)
- Após o envio do formulário, a conversa começa
Visitas Retornantes
- O estado da conversa anterior pode ser restaurado
- Dados do formulário lembrados (se o visitante não tiver limpado os cookies)
- Continuação contínua da experiência de suporte
Rastreamento de Conversas
Todas as conversas do widget aparecem na sua página de Conversas para revisão e análise.
HTTPS (certificado SSL) é necessário para a funcionalidade de voz. Sites HTTP podem usar apenas o modo de chat devido a restrições de segurança do navegador.
Solução de Problemas
Para problemas de configuração e instalação, consulte Solução de Problemas do Widget da Web.
Próximos Passos
- Teste o widget usando a prévia ao vivo
- Incorpore o código em seu site
- Monitore as conversas na página de Conversas
