Pular para o conteúdo principal

WebChat — Chat Ao Vivo no seu Site

Caminho no sistema: Configurações › Cadastros › Canais › Adicionar Canal (WebChat)

O WebChat do Galaxy Chat é um widget nativo de chat em tempo real para ser inserido nas páginas do seu site ou aplicativo. Quando o visitante clica no botão flutuante e envia uma dúvida, a conversa entra diretamente na mesma tela de atendimento onde sua equipe já opera o WhatsApp e as redes sociais.

✨WebChat 100% Nativo e Gratuito

O Galaxy Chat inclui o WebChat de forma nativa e ilimitada. Você não precisa contratar intermediários ou HUBs externos para instalar o chat no seu site.

🖼️
Espaço reservado para print/imagemDemonstração do widget WebChat instalado no canto do site e conversa sincronizada no atendimento
📸 Demonstração do widget WebChat instalado no canto do site e conversa sincronizada no atendimento

📍 Como Criar e Instalar seu WebChat​

1

Crie o Canal WebChat

Acesse Configurações › Cadastros › Canais, clique em Adicionar Canal e selecione WebChat.

2

Abra o Editor do Widget

Dê um nome ao canal, salve e clique no botão Widget no canal recém-criado.

3

Personalize as Abas

Configure textos, cores da sua marca e regras de comportamento nas abas de edição.

4

Copie o Código de Instalação

Acesse a aba Instalação, copie o snippet JavaScript gerado e cole no código-fonte do seu site antes da tag de fechamento </body>.

🗂️ As 6 Abas de Configuração do Widget​

🖼️
Espaço reservado para print/imagemVisão geral das 6 abas de configuração do WebChat no Galaxy Chat
📸 Visão geral das 6 abas de configuração do WebChat no Galaxy Chat

1. Aba Configuração​

  • Nome do Widget: Identificação interna do chat.
  • Subtítulo: Frase no topo da janela (ex.: "Estamos online para ajudar!").
  • Mensagem de Boas-vindas: Primeira saudação apresentada ao visitante.
  • Mensagem Fora do Horário: Texto exibido caso o visitante abra o chat fora do horário comercial.
  • Campos Obrigatórios: Marque se exige Nome, Telefone e/ou E-mail antes de iniciar o atendimento.
  • Posição: Escolha exibir o botão flutuante no canto Direito ou Esquerdo.
  • Ocultar Botão Padrão: Esconde a bolinha flutuante caso prefira abrir o chat através de um botão próprio do seu site (via API JavaScript).
  • 🔒 Domínios Permitidos: Cadastre os endereços dos seus sites (ex.: minhaempresa.com.br). Se configurado, o chat funcionará exclusivamente nesses domínios, impedindo que terceiros copiem seu código.

2. Aba Aparência​

  • Cores de Fundo e Texto: Defina as cores primárias e secundárias que combinem com a identidade da sua marca.
  • Contraste Automático: Caso não informe a cor da fonte, o sistema calcula automaticamente a melhor legibilidade (preto ou branco) sobre o fundo.

3. Aba Comportamento​

  • Abrir Automaticamente: O chat abre sozinho após X milissegundos da entrada do visitante na página.
  • Simular Digitação: Exibe animação de "digitando..." antes do envio das mensagens do bot para maior humanização.
  • Som de Notificação: Alerta sonoro a cada nova mensagem.
  • Rastrear Visitantes do Site: Monitora em tempo real quem está navegando no seu site (mesmo sem abrir o chat) para o relatório de supervisão.
  • Iniciar Conversa Após Preenchimento: Dispara automaticamente uma mensagem do sistema assim que o lead submete o formulário inicial.

4. Aba Preview​

Visualização em tempo real do widget em telas desktop e mobile enquanto você ajusta as cores e textos.

5. Aba Instalação​

Gera o script HTML pronto para inclusão:

<script 
  src="https://app.galaxychat.com.br/webchat/public/widget.js" 
  data-widget-id="SEU-WIDGET-ID">
</script>

6. Aba Sessões​

Histórico completo de todos os visitantes que interagiram com o widget, status da conversa e link direto para o protocolo do ticket correspondente.

💻 API JavaScript para Desenvolvedores​

Se desejar acionar o chat através de links e botões próprios no seu site, utilize a API nativa:

<!-- Abrir o chat a partir de qualquer botão -->
<button onclick="WebChat.open()">Fale Conosco</button>

<!-- Abrir passando dados do usuário logado no seu sistema (pula o formulário) -->
<button onclick="WebChat.open({ name: 'Carlos Santos', email: 'carlos@empresa.com', phone: '5511999999999' })">
  Suporte Prioritário
</button>

Comandos e Eventos Globais​

WebChat.open();    // Abre a janela do chat
WebChat.close();   // Fecha o widget
WebChat.toggle();  // Alterna entre aberto e fechado

// Ouvinte de eventos no site
window.addEventListener('webchat:unread', function(e) {
  console.log('Mensagens não lidas:', e.detail.count);
});

🕵️ Monitor de Visitantes Online e Abordagem Proativa​

Com o rastreamento ativado, supervisores e atendentes acompanham os visitantes em tempo real no menu Relatórios › WebChat › Visitantes do WebChat:

  • Aba Online: Tabela com página onde a pessoa está navegando, cidade aproximada via IP, dispositivo e cronômetro de tempo no site.
  • 💬 Chamar Visitante (Abordagem Proativa): O operador clica no botão Chamar, digita uma mensagem personalizada (ex.: "Olá! Vi que você está olhando nosso plano Pro. Posso te ajudar com alguma dúvida?") e o balão surge na tela do visitante instantaneamente, criando um ticket no Galaxy Chat!
Última atualização em