Como colocar um chat de atendimento no seu site (passo a passo)

Veja como instalar um chat no seu site em poucos minutos, sem programador: WordPress, Shopify, Nuvemshop, Wix e sites em HTML.

Quem visita o seu site e tem uma dúvida quer a resposta agora. Se precisar procurar um e-mail, abrir outro aplicativo ou esperar horas, uma parte dessas pessoas simplesmente desiste. Um chat no canto da página resolve isso: a pessoa pergunta ali mesmo, sem sair da página do produto.

Neste guia você vê como colocar um chat de atendimento no seu site, passo a passo, mesmo sem saber programar.

O que você precisa antes de começar

  • Acesso ao painel do seu site (WordPress, Shopify, Nuvemshop, Wix ou o servidor, se o site for em HTML).
  • Uma conta em uma ferramenta de chat. No VisuChat, o cadastro é grátis e não pede cartão.
  • Alguns minutos para configurar as mensagens.

Passo 1: crie sua conta e pegue o código

Depois de criar a conta, entre no painel e abra Configurações → Instalar o chat em outro site. Ali aparece uma linha de código parecida com esta:

<script src="https://.../widget.js" data-key="sua-chave" async></script>

Clique em Copiar código. Essa linha é tudo o que o seu site precisa.

Passo 2: cole o código no seu site

O código deve ficar no fim da página, antes de </body>, e em todas as páginas. Veja como fazer nas plataformas mais usadas. Os nomes dos menus podem mudar um pouco conforme a versão.

WordPress

O jeito mais simples é usar um plugin de "cabeçalho e rodapé", como o WPCode. Instale o plugin, procure a área de código do rodapé (footer), cole a linha e salve. Assim o código continua lá mesmo se você trocar de tema.

Shopify

No painel, vá em Loja virtual → Temas → Editar código, abra o arquivo theme.liquid e cole a linha logo antes de </body>. Salve e confira a loja.

Nuvemshop, Wix e outras plataformas

Procure nas configurações uma opção de códigos externos, scripts personalizados ou código personalizado no rodapé. Cole a linha, escolha que ela apareça em todas as páginas e salve. Se não encontrar, o suporte da plataforma sabe dizer onde fica.

Site em HTML

Abra os arquivos das páginas e cole a linha antes de </body> em cada uma (ou no arquivo de rodapé, se o seu site usar um).

Passo 3: deixe o chat com a cara da sua empresa

Com o chat já aparecendo, vale ajustar alguns detalhes no painel:

  1. Cor e posição: use a cor da sua marca e escolha o lado da tela.
  2. Mensagem de boas-vindas: algo curto e direto, como "Oi! Posso te ajudar a escolher?".
  3. Mensagem de fora do horário: para quem chega quando não tem ninguém online. Diga quando a pessoa vai ter resposta.
  4. Dados pedidos antes do chat: quanto menos campos, mais gente começa a conversa. Muitas lojas pedem só o nome.

Passo 4: teste como se fosse um cliente

Abra o seu site em uma janela anônima, mande uma mensagem pelo chat e responda pelo painel. Assim você confere se tudo chega certinho e vê a experiência do outro lado.

Dica: deixe o painel aberto no computador ou instale-o no celular para ser avisado de cada nova conversa.

Perguntas comuns

O chat deixa o site mais lento?

O código é carregado com async, ou seja, depois do resto da página. O visitante vê o seu site normalmente enquanto o chat carrega.

Preciso de programador?

Não. É uma única linha, colada em um lugar só. Se o seu site foi feito por uma agência, basta mandar a linha para eles.

Pronto: agora quem visita o seu site pode falar com você na hora. O próximo passo é responder rápido, e para isso os atalhos de resposta ajudam muito.

Compartilhe: WhatsApp LinkedIn