Como colocar o ícone do WhatsApp no site?

A nossa equipe de suporte preparou um script para você colocar o ícone do WhatsApp no seu site. Confira neste tutorial como aplicar esse script e configurar o ícone do WhatsApp no seu site.

Caso você também queira colocar o ícone do WhatsApp em sua landing page, confira este artigo: Como colocar o ícone do WhatsApp na landing page?

Código do script

Com este código, você facilmente adiciona um botão com o ícone do WhatsApp no seu site. Ao clicar sobre o botão o lead será redirecionado para uma nova aba, conforme o link que você configurar.

Observe que o código contém a tag <script> para ser utilizado no HTML da página que você deseja. Além disso, este é um código Javascript aberto, portanto não deve ser comercializado.

O script para você inserir no seu site:

Copy Code

<script>
(function (sourceUrl) {
	const body = document.querySelector("body");
	const imgSrc = "data:image/png;base64,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";

	document.querySelector(".whatsapp-btn")?.remove();

	const img = document.createElement("img");
	img.src = imgSrc;
	Object.assign(img.style, {
	    "width": "60px",
	    "height": "60px"
	});

	const button = document.createElement("button");
	button.append(img);
	Object.assign(button.style, {
	    "background": "none",
	    "cursor": "pointer",
	    "border": "none",
	    "padding": "0",
	    "margin": "0",
	    "width": "60px",
	    "height": "60px",
	    "z-index": "99999",
	    "opacity": "0",
	    "transform": "scale(0.5)",
	    "transition": "all ease-out 500ms"
	});

	const div = document.createElement("div");
	div.append(button);
	div.classList.add("whatsapp-btn")
	Object.assign(div.style, {
		"position": "fixed",
	    "right": "20px",
	    "bottom": "20px",
	    "z-index": "1000",
	});

	body.append(div);
	setTimeout(function() {
		Object.assign(button.style, {
			"transform": "scale(1)",
		    "opacity": "1",
		});
	}, 500);

	button.addEventListener("click", function(e) {
		e.preventDefault();
		window.open("https://atendare.com/whatsapp", "_blank"); 	
});
})
("https://atendare.com/whatsapp"); // altere esta URL para o link que você deseja utilizar
</script>

Colocando o script no site

IMPORTANTE: Para colocar o script no seu site, é necessário que você tenha acesso ao painel administrativo do seu site, ou ao seu código fonte.

Como as ferramentas para criação de sites são muito variadas, vamos utilizar o WordPress em nosso exemplo, por ser a ferramenta mais conhecida e utilizada por nossos clientes.

Entretanto, lembre-se que os princípios serão os mesmos para todas as ferramentas, mesmo para aqueles que vão editar o código fonte de seu site.

Confira o passo a passo:

1. Acesso o painel administrativo ou de edição do seu site.

2. Procure um elemento HTML, vamos utilizar este elemento para inserir o código.

3. Depois insira o código do script no campo HTML.

4. Edite o link no final do código e insira a URL da sua preferência.

Geralmente é colocado um link para abrir o WhatsApp da empresa, parecido com este: https://api.whatsapp.com/send/?phone=555599999999
onde troca-se apenas o número de telefone no final.

5. Salve e atualize a página.

6. Pronto! O botão do WhatsApp estará inserido no seu site.

Esperamos que este artigo tenha sido útil para você! Caso tenha ficado com alguma dúvida, entre em contato conosco pelo e-mail [email protected].