Como instalar o Link Rastreável do Tintim no Botão Flutuante de WhatsApp

1223 visualizações 3

Um botão flutuante do WhatsApp em seu site com rápido contato de um atendente faz com que a conversão desse lead seja muito mais fácil e com menos barreiras. Arrisco dizer que essa é uma estratégia usada por quase 100% dos vendedores de serviços atualmente. Porém, a instalação desse botão por muitas vezes é feita por meio de plugins específicos (à depender da ferramenta de construção de páginas). E estes plugins, via de regra, aceitam apenas a configuração do número de whatsapp do setor comercial.

Pensando nisso, e na forma com que os nossos usuários utilizam o WhatsApp para vender, foi implementado um script simples que quando instalado cria-se um botão flutuante de WhatsApp com o link rastreável do Tintim no seu site. 

  1. No Tintim, acesse Links rastreáveis (ou entre em informações do link).
  2. Na terceira seção, localize o quarto campo, botão flutuante do site.
  3. Clique em copiar. Todo o código HTML do botão flutuante é copiado.
  4. Instale o código no seu construtor de site.

A seguir, três modos de instalação no WordPress/Elementor que servem de referência para outros construtores:

Modo 1 – WordPress | Elementor > Código personalizado:

  1. No painel do WordPress, vá em Elementor > Código personalizado (ou qualquer seção semelhente onde seja possível adicionar um código HTML personalizado) e clique em Adicionar novo.
  2. Dê um nome ao código (ex.: “botão WhatsApp”) e cole o código copiado do Tintim.
  3. No local de inserção, escolha </body> (fim) (equivalente ao footer).
  4. Clique em Publicar. Você pode aplicar o código no site inteiro ou especificar páginas (ex.: condição Singular + página específica).

Modo 2 – WordPress > Plugin Header Footer Code:

  1. Em Plugins > Plugins instalados, instale o plugin Header Footer Code (se necessário).
  2. Em configuração, cole o código no campo de footer.
  3. Selecione todas as caixas de páginas onde o plugin deve funcionar (sem isso, o plugin não funciona) e clique em salvar as alterações. Isso aplica o botão de forma global.
  4. Para instalação individual por página: edite a página, abra o Header Footer Code dentro dela, cole o script no campo Body e salve. O botão aparece apenas naquela página.

Modo 3 – WordPress > Widget de HTML no Elementor:

  1. Em Páginas, escolha a página e clique em Editar com Elementor.
  2. Arraste um widget de HTML para a página e cole o código nele. O botão flutuante é criado individualmente naquela página (o widget é invisível).

Observações

  1. Recomenda-se instalar o script no footer (</body> fim). Scripts no footer carregam por último, sem impacto no desempenho, e é o local comum para widgets de chat.
  2. Pode aparecer um aviso sobre o atributo viewBox que “deveria estar em caixa baixa”. Mantenha viewBox com o “B” maiúsculo, exatamente como copiado do Tintim — essa é a forma correta e padronizada em HTML/SVG. Em minúsculo o atributo não é reconhecido como válido (embora em alguns casos ainda funcione).
  3. A instalação via plugin pode ser global (todas as páginas) ou individual (página a página).
  4. O botão flutuante funciona igualmente no mobile, posicionado no canto da tela, independentemente do tamanho do celular.

Dicas para quem constroi sites com IA

Se o seu site foi feito em uma plataforma de IA (como Lovable, Bolt, v0, Framer AI, entre outras) e você prefere não mexer diretamente no código, dá para pedir para a própria IA instalar o botão flutuante de WhatsApp com o link rastreado do Tintim. Este guia explica o que a IA precisa fazer e traz um texto pronto para você copiar e enviar a ela.

Antes de começar, tenha em mãos o seu link rastreável do Tintim e o pixel do Tintim. Os dois estão disponíveis nas configurações do link rastreável.

Entenda como o rastreamento funciona

Para você receber leads rastreados, dois elementos precisam trabalhar juntos no seu site. Entender o papel de cada um ajuda a orientar a IA corretamente:

  • O link rastreável do Tintim é o endereço que fica dentro dos botões de WhatsApp do site (o botão flutuante, o botão do cabeçalho, os botões de dentro das páginas, etc.). Ao clicar, o lead é levado ao WhatsApp por esse link.
  • O pixel do Tintim é um pequeno script instalado no site. A função dele é guardar no cookie do navegador todos os parâmetros e UTMs presentes na URL quando o visitante chega ao site (por exemplo, os dados do anúncio do Meta ou do Google que trouxeram aquela pessoa).

É a combinação dos dois que faz o rastreamento acontecer. Quando o lead clica em um botão com o link rastreável, o pixel entra em ação: ele concatena todos os parâmetros e UTMs guardados no cookie ao link rastreável do Tintim e faz o redirecionamento para o WhatsApp já com tudo junto — link + parâmetros.

Por isso, só colocar o link rastreável nos botões não basta. Sem o pixel do Tintim instalado, o link até funciona e leva ao WhatsApp, mas vai sem os dados de origem — e o lead chega sem rastreamento. O pixel é o que carrega a informação de qual anúncio ou campanha trouxe aquela pessoa.

Passo a passo

  1. Copie o link rastreável do Tintim no seu painel.
  2. Copie o código do pixel do Tintim no seu painel.
  3. Copie o texto pronto da seção abaixo e cole no chat da sua plataforma de IA, substituindo os campos indicados pelo seu link e pelo seu pixel.
  4. Peça para a IA publicar as alterações e faça o teste de validação descrito no final.

Texto pronto para enviar à IA

Escolha uma das duas versões abaixo, dependendo de você já ter o pixel do Tintim instalado no site ou não. Copie tudo e cole no chat da IA, trocando os trechos entre colchetes pelos seus dados.

Versão A — o pixel do Tintim ainda NÃO está instalado

Preciso que você faça duas coisas no meu site.

1) Instale este script (é um pixel de rastreamento) em TODAS as páginas do site, dentro da tag <head>, para que ele carregue em qualquer página que o visitante acesse:

[COLE AQUI O CÓDIGO DO PIXEL DO TINTIM]

2) Crie um botão flutuante de WhatsApp, fixo no canto inferior direito da tela, visível em todas as páginas e responsivo (bem posicionado no celular e no desktop). O link desse botão deve ser exatamente este:

[COLE AQUI O SEU LINK RASTREADO DO TINTIM]

IMPORTANTE: não modifique, encurte nem reescreva esse link, e não use redirecionamentos próprios. O link precisa ficar exatamente como está, porque o pixel do passo 1 depende dele para funcionar. O pixel captura os parâmetros e UTMs da URL e os anexa a esse link no momento do clique, redirecionando o visitante ao WhatsApp com os dados de origem preservados.

Se o meu site tiver outros botões de WhatsApp (no cabeçalho, no rodapé ou dentro das páginas), aplique esse mesmo link rastreado em todos eles.

Versão B — o pixel do Tintim JÁ está instalado

Crie um botão flutuante de WhatsApp no meu site, fixo no canto inferior direito da tela, visível em todas as páginas e responsivo (bem posicionado no celular e no desktop). O link desse botão deve ser exatamente este:

[COLE AQUI O SEU LINK RASTREADO DO TINTIM]

IMPORTANTE: não modifique, encurte nem reescreva esse link, e não use redirecionamentos próprios. O link precisa ficar exatamente como está. Meu site já tem um pixel de rastreamento instalado que captura os parâmetros e UTMs da URL e os anexa a esse link no momento do clique — por isso o link não pode ser alterado.

Se o meu site tiver outros botões de WhatsApp (no cabeçalho, no rodapé ou dentro das páginas), aplique esse mesmo link rastreado em todos eles.

Na dúvida se o pixel já está instalado? Use a Versão A. Se o pixel já existir, peça à IA para não duplicá-lo — instalar o mesmo pixel duas vezes pode causar comportamento inesperado.

Como validar se ficou correto

  1. Peça para a IA publicar as alterações e acesse o site publicado.
  2. Confirme que o botão flutuante de WhatsApp aparece no canto da tela, tanto no computador quanto no celular.
  3. Acesse o site adicionando parâmetros de teste no final do endereço, por exemplo:
    https://seusite.com.br/?utm_source=teste&utm_medium=teste
  4. Clique no botão flutuante e observe: a conversa do WhatsApp deve abrir normalmente, e no painel do Tintim o lead deve aparecer com os parâmetros de teste registrados.

Se o lead chegar sem os parâmetros: normalmente é sinal de que o pixel não foi instalado, foi instalado em apenas uma página, ou o link do botão foi alterado pela IA. Peça para a IA revisar os dois pontos: o pixel precisa carregar em todas as páginas, e o link rastreável precisa estar exatamente como você forneceu, sem modificações.

Tags:

Isto foi útil?