Skip to main content
Adicione seu assistente de IA a qualquer website com um widget personalizável que suporta chamadas de voz, chat de texto ou ambos.

​
Visão Geral

O Widget Web permite que visitantes do site interajam com seu 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: Alternância perfeita entre voz e chat

​
Acessando a Configuração do Widget

  1. Navegue para a página de edição do seu assistente
  2. Clique no botão “Widget web” (cor amarela/warning)
  3. O painel de configuração do widget abre com visualização ao vivo
Localização do Botão do Widget Web
O Widget Web é um recurso premium. Certifique-se de que seu plano inclui acesso ao widget web antes da configuração.

​
Modos do Widget

Escolha como os visitantes interagem com seu assistente:

​
Voz & Chat (Recomendado)

Os usuários podem alternar perfeitamente entre voz e texto durante as conversas. Melhor para:
  • Máxima flexibilidade para usuários
  • Acessibilidade (voz para mobile, chat para ambientes silenciosos)
  • Interações complexas que requerem ambos os modos

​
Apenas Chat

Interface de mensagens baseada apenas em texto. Melhor para:
  • Suporte ao cliente e FAQs
  • Ambientes onde voz não é apropriada
  • Captura de leads e formulários de qualificação

​
Apenas Voz

Conversas de voz em tempo real apenas. Melhor para:
  • Experiência similar a telefone no website
  • Casos de uso que priorizam voz
  • Interações mãos-livres

​
Opções de Configuração

​
Configurações Gerais

Configuração Geral do Widget
Modo do Widget: Voz, Chat ou Voz & Chat Posição: Escolha entre 8 posições (inferior-direita, inferior-esquerda, meio-direita, etc.) 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: Simples ou Animado

​
Personalização de Texto

Personalize todo o texto visível para combinar com a voz e idioma da sua marca: Cabeçalho:
  • Título do Cabeçalho (padrão: “Assistente de IA”)
  • Subtítulo do Cabeçalho (padrão: “Pronto para ajudá-lo ✨”)
Botão de Alternância:
  • Texto Principal do Botão (padrão: “Precisa de ajuda?”)
  • Subtexto do Botão (padrão: “Converse conosco”)
Modal (Modo Voz):
  • Título do Modal (padrão: “Pronto para conversar?”)
  • Descrição do Modal (padrão: “Clique abaixo para iniciar sua conversa”)
  • Texto do Botão Iniciar (padrão: “Iniciar Chat de Voz”)
Interface de Chat:
  • Placeholder do Chat (padrão: “Digite sua mensagem…”)
  • Rótulo do Botão Enviar
Interface de Voz:
  • Texto de Conexão (padrão: “Conectando…”)
  • Texto de Desconexão (padrão: “Desconectar”)
  • Texto de Erro (padrão: “Falha na conexão. Tente novamente.”)

​
Formulário Pré-Chat

Configuração do Formulário Pré-Chat
Colete informações antes de iniciar conversas: Configuração do Formulário:
  • Título do Pré-formulário
  • Descrição do Pré-formulário
  • Texto do Botão Enviar
Campos do Formulário: Adicione campos personalizados para coletar dados:
  • Nome da Variável: Nome interno da variável (mapeia para variáveis do assistente)
  • Rótulo do Campo: Rótulo de exibição mostrado aos usuários
  • Tipo de Campo: Texto, Email, Telefone ou Textarea
  • Obrigatório: Tornar campo obrigatório
  • Placeholder: Texto placeholder mostrado no campo
  • Texto de Ajuda: Descrição opcional abaixo do campo
Mapeamento de Variáveis: Nomes dos campos do formulário mapeiam automaticamente para as variáveis do seu assistente, tornando os dados coletados disponíveis durante as conversas. Exemplo de Campos do Formulário: 
Nome: Nome Completo (obrigatório, texto)
Email: Endereço de Email (obrigatório, email)
Empresa: Nome da Empresa (opcional, texto)
Mensagem: Como podemos ajudar? (opcional, textarea)

​
Visualização ao Vivo

O painel de configuração inclui uma visualização ao vivo mostrando exatamente como seu widget aparecerá:
  • Atualizações automáticas: Visualização atualiza conforme você muda configurações
  • Interação real: Teste a funcionalidade do widget na visualização
  • Redefinir Dados: Limpar dados armazenados para testar experiência de visitante pela primeira vez
Use o botão “Redefinir Dados” para testar como seu widget aparece para novos visitantes. Isso limpa todas as preferências armazenadas e dados do formulário na visualização.

​
Instalação

​
1. Salvar Configuração

Após personalizar seu widget:
  1. Clique em “Salvar configurações do widget” no painel de configuração
  2. Aguarde a notificação de confirmação

​
2. Obter Código de Incorporação

Copie o código de incorporação gerado da seção “Código de Incorporação”.

​
3. Adicionar ao Website

Cole a tag script antes da tag de fechamento </body> no seu website: 
<script src="https://suasofia.online/embed.js"
        data-assistant-id="your-assistant-id"
        data-mode="voice_chat"
        data-position="bottom-right"
        data-color="#3B82F6">
</script>

​
4. Verificar Instalação

  1. Visite seu website
  2. O botão do widget deve aparecer na posição configurada
  3. Clique para testar funcionalidade de voz/chat
  4. Verifique se o formulário pré-chat aparece (se configurado)

​
Comportamento do Widget

​
Primeira Visita

  • Botão do widget aparece na posição configurada
  • Clique abre modal/interface de chat
  • Formulário pré-chat é exibido (se configurado)
  • Após envio do formulário, conversa inicia

​
Visitas de Retorno

  • Estado da conversa anterior pode ser restaurado
  • Dados do formulário lembrados (se visitante não limpou cookies)
  • Continuação perfeita da experiência de suporte

​
Rastreamento de Conversa

Todas as conversas do widget aparecem em sua página de Conversas para revisão e análise.
HTTPS (certificado SSL) é obrigatório para funcionalidade de voz. Sites HTTP só podem usar modo chat devido a restrições de segurança do navegador.

​
Solução de Problemas

Para problemas de configuração e instalação, veja Solução de Problemas do Widget Web.

​
Próximos Passos

  • Teste o widget usando a visualização ao vivo
  • Incorpore o código em seu website
  • Monitore conversas na página de Conversas