Configuração do LiveChat e widget do site

O LiveChat permite receber visitantes do site dentro da Agilize, executar um fluxo de bot quando configurado, distribuir atendimento para a equipe e manter o histórico da conversa junto aos demais canais.

Use este guia para cadastrar o canal, instalar o widget no site e ajustar textos, cores e comportamento visual pela tela da Agilize ou diretamente no código da página.

Antes de começar

Confirme estes pontos:

• você tem permissão para configurar canais no módulo de Mensageria;
• o site onde o widget será instalado pode receber scripts antes do fechamento da tag body;
• o fluxo de bot já existe, se o LiveChat deve iniciar com triagem automática;
• a equipe já sabe qual rotina seguirá quando a conversa chegar;
• o time de site conhece as cores, textos e posição desejados para o widget.

O cadastro do LiveChat gera um publicToken. Esse identificador faz parte do código público do widget e deve ser copiado exatamente da tela, sem ser inventado ou reutilizado entre canais diferentes. Ele não substitui credenciais administrativas nem concede acesso ao painel.

Onde acessar

Acesse Cadastrar LiveChat.

Acesso pela tela: sidebar lateral > módulo Mensageria > Configurações > tree interna Configuração LiveChat.

Configurar pela tela

1. Abra Configuração LiveChat.
2. Crie um novo cadastro ou edite um LiveChat existente.
3. Preencha Nome com uma identificação clara, como site, produto ou landing page.
4. Selecione Fluxo Atendimento - ChatBot quando o visitante deve passar por triagem automática.
5. Ative Gerar Protocolo quando a operação exige protocolo para atendimentos desse canal.
6. Em Customizar Widget, ajuste textos, cores e posicionamento.
7. Use a pré-visualização para conferir o resultado.
8. Salve o cadastro.
9. Abra a visualização do LiveChat e copie os códigos de instalação.

Na visualização, a tela mostra um link para simular visitante, um bloco opcional de estilos personalizados e o script final do widget. Instale primeiro o bloco de estilos, quando existir, e depois o script do widget.

Campos do cadastro

Instalar no site

Depois de salvar o LiveChat, copie o código de instalação na visualização do cadastro e adicione antes do fechamento da tag body do site.

<script src="https://cdn.agilize.app/module/messenger/js/livechat.js?token=PUBLIC_TOKEN" async></script>

Substitua PUBLIC_TOKEN pelo token gerado no cadastro. Se você copiou o código pela tela, ele já vem preenchido.

Para simular o visitante sem instalar no site, use o link de simulação exibido na visualização do cadastro. Ele abre a rota do visitante com o mesmo token.

Configurar sem usar a tela

Quando o cadastro já existe, a personalização visual pode ser controlada pelo site com window.__agilize_config. Esse objeto deve ser declarado antes do script do widget.

<script>
  window.__agilize_config = {
    action_bar_text: "Converse conosco agora mesmo!",
    top_bar_text: "Estamos disponíveis :)",
    empty_messages_text: "Escreva uma mensagem abaixo para começar",
    widget_position: "right",
    widget_start_open: false,
    ensure_full_mode: true,
    widget_min_spare_width_px: 120,
    action_bar_bg: "linear_gradient_90_3_colors",
    action_bar_bg_color1: "#020024",
    action_bar_bg_color2: "#090979",
    action_bar_bg_color3: "#46136c",
    action_bar_bg_degree: 90,
    action_bar_text_color: "#ffffff",
    top_bar_text_color: "#293357",
    bg_main_color: "#f6f8ff"
  }
</script>
<script src="https://cdn.agilize.app/module/messenger/js/livechat.js?token=PUBLIC_TOKEN" async></script>

Esse caminho é útil quando o time de site quer ajustar textos, cores ou comportamento por ambiente, landing page, teste A/B ou identidade visual sem reabrir o cadastro na Agilize.

Se a sua implantação cria ou atualiza o cadastro por integração autorizada, use os campos técnicos equivalentes aos rótulos da tela: name para Nome, flow para Fluxo Atendimento - ChatBot, isToGenCase para Gerar Protocolo e custom para Customizar Widget. O publicToken continua sendo gerado pelo sistema no cadastro do LiveChat.

Parâmetros visuais do widget

Use estes parâmetros dentro de custom no cadastro ou dentro de window.__agilize_config no site.

Os nomes bg_messsage_1_color, border_messsage_1_color, bg_messsage_2_color e border_messsage_2_color mantêm a grafia usada pelo widget. Use exatamente esses nomes no JSON.

Parâmetros de posição e abertura

Na tela da Agilize, os controles principais de posição expõem lado do widget, detecção automática, folga mínima e abertura automática. Os demais parâmetros podem ser úteis em instalação por código quando o layout do site exige medidas específicas.

Exemplo completo de custom

Use este exemplo como base para a configuração por integração ou para o bloco window.__agilize_config.

{
  "action_bar_bg": "linear_gradient_90_3_colors",
  "action_bar_bg_color1": "#020024",
  "action_bar_bg_color2": "#090979",
  "action_bar_bg_color3": "#46136c",
  "action_bar_bg_degree": 90,
  "action_bar_text": "Converse conosco agora mesmo!",
  "action_bar_text_color": "#ffffff",
  "action_bar_icon_color1": "#ffffff",
  "action_bar_icon_color2": "#7D00FF",
  "main_text": "#293357",
  "empty_messages_text": "Escreva uma mensagem abaixo para começar",
  "bg_messsage_1_color": "#eeecf4",
  "border_messsage_1_color": "transparent",
  "bg_messsage_2_color": "#d9d4ec",
  "border_messsage_2_color": "transparent",
  "border_btn_color": "#322e4d",
  "bg_main_color": "#f6f8ff",
  "top_bar_text": "Estamos disponíveis :)",
  "top_bar_text_color": "#293357",
  "top_bar_icon_color1": "#EAEDFF",
  "top_bar_icon_color2": "#293357",
  "top_bar_icon_close_color": "#293357",
  "widget_position": "right",
  "ensure_full_mode": true,
  "widget_min_spare_width_px": 120,
  "widget_start_open": false
}

Validar depois de instalar

1. Abra o site em uma janela anônima.
2. Confirme se o widget aparece no lado esperado.
3. Abra e feche o chat para validar altura, posição e modo mobile.
4. Envie uma mensagem como visitante.
5. Confirme se a conversa entra na Agilize pelo LiveChat correto.
6. Verifique se o fluxo de bot executou, quando configurado.
7. Responda pela Agilize e confira se a mensagem aparece no widget.
8. Conclua o atendimento e revise histórico e protocolo.

No uso diário, conversas distribuídas devem chegar ao Flow do usuário. Use telas de monitoramento para supervisão, auditoria e exceções.

Problemas comuns

Boas práticas

• Crie um LiveChat por site, produto ou landing page quando precisar medir e operar entradas separadas.
• Use nomes estáveis, como Site institucional, Landing campanha julho ou Portal do cliente.
• Teste cores em desktop e mobile antes de publicar.
• Evite textos longos na barra recolhida; ela tem pouco espaço.
• Mantenha contraste suficiente entre texto e fundo.
• Não publique credenciais administrativas nem dados de clientes. O publicToken do widget aparece no código do site por definição, mas deve ser usado somente no LiveChat e no ambiente aos quais pertence.
• Quando houver fluxo de bot, teste entrada, coleta de dados, transferência e encerramento antes do go-live.

Próximos passos

• Para revisar outros canais, veja Canais e integrações.
• Para criar a triagem automática, veja Guia geral de fluxos do bot.
• Para definir distribuição e departamentos, veja Regras de roteamento e distribuição.