Widget da Web

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 oferece 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

1. Acesse a página de edição do seu assistente.
2. Clique no botão “Widget da Web” (cor amarela/de aviso).
3. O painel de configuração do widget abre com pré-visualização ao vivo.

O widget da web é um recurso premium. Certifique-se de que seu plano inclua acesso ao 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.Ideal 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 bate-papo

Interface de mensagens baseada apenas em texto.Ideal para:

• Suporte ao cliente e perguntas frequentes
• Ambientes onde a voz não é apropriada
• Formulários de captura e qualificação de leads

Somente voz

Somente conversas de voz em tempo real.Ideal para:

• Experiência semelhante à de um celular no site.
• casos de uso com foco em voz
• Interações sem usar as mãos

Opções de configuração

​Configurações gerais

Modo do widget: Voz, Chat ou Voz e 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 detalhes.

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 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.”)

Formulário 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 coletar dados:

• Nome da variável: Nome interno da variável (mapeia para variáveis ​​auxiliares)
• Rótulo do campo: Rótulo exibido 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 variáveis ​​do seu assistente, disponibilizando os dados coletados durante as conversas.

Exemplos de campos de formulário:

Name: Full Name (required, text)

Email: Email Address (required, email)

Company: Company Name (optional, text)

Message: How can we help? (optional, textarea)

Pré-visualização ao vivo

O painel de configuração inclui uma pré-visualização em tempo real que mostra exatamente como o 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:

1. Clique em “Salvar configurações do widget” no painel de configuração.
2. 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.mayahub.ai/embed.js” data-assistant-id=“your-assistant-id” data-mode=“voice_chat” data-position=“bottom-right” data-color=“#3B82F6”> </script>

4. Verifique a instalação

1. Visite o seu site
2. O botão do widget deve aparecer na posição configurada.
3. Clique para testar a funcionalidade de voz/bate-papo.
4. 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 configurada.
• Clicar abre a interface modal/de bate-papo.
• O formulário de pré-atendimento é exibido (se configurado).
• Após o envio do formulário, inicia-se 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áginade Conversaspara 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.

Solução 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 no seu site.
• Acompanhe as conversas na página Conversas.