Configuração do Widget Web

​

🎛️ Visão Geral dos Seus Widgets

• Por que ter mais de um? Você pode querer um “Bot de Vendas” para sua página de preços e um bot de “Suporte Técnico” para seu centro de ajuda. Aqui você gerencia todos eles.
• Ações Principais por Widget:
  • 📋 Copiar Script: Pegue o código mágico para colar no seu site.
  • ⚙️ Configurar: A parte divertida. Ajuste cores, mensagens e comportamento (vamos chegar lá já já).
  • 🗑️ Excluir: Remova se não precisar mais.

​

🎨 Personalizando Seu Widget (A Aula de Arte)

​

1. O Básico

• Agente de IA: Qual cérebro está alimentando este chat? Selecione um dos seus agentes da lista.
• Idiomas: Seu site fala Português, Inglês e Espanhol? Diga ao widget para que ele não pareça estranho.

​

2. Mensagem Flutuante (O Gancho 🪝)

• Entediante: “Converse aqui.”
• Melhor: “Oi! Precisa de ajuda com seu pedido? 👋”

⚠️ Atenção: Adicione traduções para todos os seus idiomas. Você não quer que visitantes em inglês vejam uma bolha vazia!

​

3. Aparência (Vista-se para Impressionar)

• Cabeçalho: Escolha o que aparece no topo. Apenas um título? Seu logo? Um avatar de um robô usando monóculo? Você decide.
• Cores: Use a ferramenta de conta-gotas 🖊️ para combinar com sua marca exatamente.
  • Cor Principal: As bolhas de mensagem e o botão de enviar.
  • Cor do Texto: Certifique-se de que é legível! Texto amarelo em fundo branco é um crime contra a visão.

​

4. O Porteiro: Formulários de Coleta de Dados 📝

• Peça Nome, Email ou Telefone.
• Torne campos “Obrigatórios” se for rigoroso, ou “Opcionais” se for flexível.
• LGPD / Privacidade: Adicione um link para sua política para ficar em conformidade. 👮‍♂️

​

5. Coleta de Dados Inteligente (Avançado 🤓)

• Como ajuda: Se estiver logado, o widget pode dizer “Olá, João!” em vez de pedir o nome novamente.
• Configuração: Você nos diz a “Chave” (ex.: user_email) e nós pegamos o valor automaticamente.

​

🛠️ Ajustes Extras e Layout

• Posição: Esquerda ou Direita? (Direita é padrão, Esquerda é para rebeldes).
• Tela Cheia: Quer que o chat ocupe toda a tela do celular? Ative esta opção.
• Incorporar (Elemento DOM): Em vez de uma bolha flutuante, fixe o chat permanentemente dentro de um <div> na sua página. Ótimo para páginas “Fale Conosco”.
• CSS Personalizado: Se você sabe programar, pode escrever seus próprios estilos aqui para sobrescrever os nossos. O céu é o limite.

​

🎨 CSS Personalizado — O Guia do Designer

​

⚙️ Como funciona por dentro

1. Seu CSS é salvo junto com a configuração do widget.
2. Quando o widget carrega no site do visitante, seu CSS é injetado como uma tag <style> dentro do próprio widget.
3. Ele carrega depois dos nossos estilos padrão, então suas regras têm a palavra final (vencem em caso de empate).

🎯 Importante — Alcance: O CSS Personalizado afeta apenas o interior do chat do widget, não o resto da sua página web. Você não pode usá-lo para reestilizar seu site; apenas o widget. E vice-versa: os estilos do seu site não vazam para dentro do widget, então você começa com uma tela limpa.

💪 Minha regra não está aplicando? Como nossos estilos base são específicos, às vezes sua regra “empata” e não vence. Se uma mudança não tiver efeito, adicione !important ao final da propriedade (ex. border-radius: 0 !important;) ou use um seletor mais específico.

​

🧩 Seletores que você pode usar

​

💡 Exemplos práticos

.widget_message_bot {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.widget_message_content {
  font-size: 16px !important;
  line-height: 1.5;
}

.widget_chat_window_header {
  background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
}

.widget_chat_window_footer {
  padding: 14px !important;
}

🧪 Teste sempre no Playground (veja abaixo) antes de publicar. Um } esquecido pode quebrar vários estilos de uma vez.

​

🧪 Test Drive (Playground)

• As cores estão combinando?
• O Agente está sendo educado?
• O formulário funciona?