Incorpore seu assistente de IA em seu site com recursos de voz e chat. #
Adicione seu assistente de IA a qualquer site com um widget personalizável que ofereça suporte a chamadas de voz, bate-papo por texto ou ambos.
Visão geral #
O widget da Web permite que os visitantes do site interajam diretamente com seu assistente de IA por meio 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 #
- Acesse a página de edição do seu assistente.
- Clique no botão “Widget da Web” (cor amarela/de aviso).
- O painel de configuração do widget abre com pré-visualização ao vivo.
O widget da web é um recurso premium. -se de que seu plano certifique-se de acessar incluindo o widget da web antes de configurá-lo.
Modos de widget #
Escolha como os visitantes interagem com seu assistente:
Voz e chat (recomendado) #
Os usuários podem alternar facilmente entre voz e texto durante as conversas. Pará ideal:
- Máxima flexibilidade para os usuários
- Acessibilidade (voz para dispositivos móveis, chat para ambientes silenciosos)
- Interações complexas que desativam ambos os modos
*** bate– #
Interface de mensagens baseada apenas em texto. Pará ideal:
- Suporte ao cliente e perguntas frequentes
- Ambientes onde a voz não é comentada
- Formulários de captura e qualificação de leads
voz #
Apenas conversas de voz em tempo real. Pará ideal:
- Experiência semelhante à de um celular no site.
- caso de uso com foco em voz
- Interações sem usar as mãos
Opções de configuração #
Configurações #
Modo do widget: Voz, Chat ou Voz e ChatPosição: Escolha entre 8 posições (direita inferior, esquerda inferior, meio direita, etc.)Cor primária: Cor da marca para botões e detalhes.Tamanho do botão de alternância: pequeno ou normalEstilo do botão de alternância: Simples ou animado
Personalização de texto #
Personalize todo o texto visível para que corresponda à voz e à linguagem da sua marca: Cabeçalho:
- Título do cabeçalho (padrão: “Assistente de IA”)
- Legenda do cabeçalho (padrão: “Pronto para te ajudar ✨”)
Botão de alternância:
- Texto principal do botão (padrão: “Precisa de ajuda?”)
- Texto secundário do botão (padrão: “Fale conosco”)
Modal (Modo de 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 bate-papo por voz”)
Interface de bate-papo:
- Espaço reservado para bate-papo (padrão: “Digite sua mensagem…”)
- Rótulo do botão Enviar
Interface de voz:
- Texto de conexão (padrão: “Conectando…”)
- Texto para desconectar (padrão: “Desconectar”)
- Texto de erro (padrão: “Falha na conexão. Tente novamente.”)
conteúdo de pré-bate-papo #
Reúna 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 coleta de dados:
- Nome da variável: Nome interno da variável (mapeia para variáveis auxiliares)
- Rótulo do campo: Rótulo selecionado aos usuários
- Tipo de campo: Texto, E-mail, Telefone ou Área de texto
- Obrigatório: Tornar este campo obrigatório
- Texto de exemplo: Texto de exemplo exibido no campo
- Texto auxiliar: Descrição opcional abaixo do campo
Mapeamento de variáveis: os nomes dos campos do formulário são mapeados automaticamente para as variações do seu assistente, disponibilizando os dados encontrados durante as conversas.Exemplos de campos de formulário:Nome: Nome completo (obrigatório, texto)E-mail: Endereço de e-mail (obrigatório, e-mail)Empresa: Nome da empresa (opcional, texto)Mensagem: Como podemos ajudar? (opcional, área de texto)
Pré-visualização ao vivo
O painel de configuração inclui uma pré-visualização em tempo real que mostra exatamente como seu widget ficará:
- Atualizações automáticas: visualize as atualizações conforme você altera as configurações.
- Interação real: teste a funcionalidade do widget na pré-visualização.
- Redefinir dados: Limpe os dados armazenados para testar a experiência do visitante iniciante.Use o botão “Redefinir dados” para testar como seu widget aparece para novos visitantes. Isso apaga todas as preferências e dados de formulário armazenados na pré-visualização.
Instalação
1. Salvar configuração
Após personalizar seu widget:
- Clique em “Salvar configurações do widget” no painel de configuração.
- Aguarde a notificação de confirmação.
2. Obtenha o código de incorporação
Copie o código de incorporação gerado na seção “Código de Incorporação”.
3. Adicionar ao site
Cole a tag de script antes da </body>tag de fechamento no seu site:<script src=” https://app.gloena.com/embed.js ” data-assistant-id=”seu-id-de-assistente” data-mode=”chat_de_voz” data-position=”bottom-right” data-color=”#3B82F6″></script>
4. Verifique a instalação
- Visite o seu site
- O botão do widget deve aparecer na posição ajustada.
- Clique para testar a funcionalidade de voz/bate-papo.
- Verifique se o formulário de pré-atendimento aparece (se estiver configurado).
Comportamento do widget
Primeira visita
- O botão do widget aparece na posição ajustada.
- Clicar abre a interface modal/de bate-papo.
- O formulário de pré-atendimento é configurado (está configurado).
- Após o envio do formulário, inicie uma conversa.
Retorno às consultas
- O estado da conversa anterior pode ser restaurado.
- Os dados do formulário são memorizados (caso o visitante não tenha apagado os cookies).
- Continuidade perfeita 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.O HTTPS (certificado SSL) é necessário para a funcionalidade de voz. Sites HTTP só podem usar o modo de bate-papo devido a restrições de segurança do navegador.
de problemas
Para problemas de configuração e instalação, consulte a seção Solução de problemas de widgets da Web .
Próximos passos
- Widget de teste usando a pré-visualização ao vivo
- Incorpore o código em seu site.
- Acompanhe as conversas na página Conversas.