> ## Documentation Index
> Fetch the complete documentation index at: https://mayahub.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# 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``tag de fechamento no seu site:
\