Widget Web

Incorpore seu assistente de IA em seu website com recursos de voz e chat

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

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

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

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