Adicionar um link para o WhatsApp

Neste artigo, vamos te mostrar como adicionar um botão de WhatsApp para que você esteja a um clique de distância dos seus usuários leitores.

Vamos te guiar passo a passo sobre como adicionar um botão como este:

1. Vá para Painel de Controle > Configurações > Avançado

2. Cole o código que compartilharemos abaixo em Custom before </body> code:

<script>
const whatsappLink = window.location.pathname.includes('/library');
if (whatsappLink) {
document.querySelector('.Footer').insertAdjacentHTML('beforeend','<div id="button-wsp" style="margin: 0 auto; color:green"><a href="https://api.whatsapp.com/send?phone=54911xxx5678" target="_blank"><img id="img-wsp" src="https://i.ibb.co/CMNKkbh/whatsapp-img.png"></a></div>'); }
</script>

📌NOTA: Localize no código o seguinte link: href="<https://api.whatsapp.com/send?phone={seu-numero}>".

Ali você deve inserir um número de celular com WhatsApp.

3. Agora vamos adicionar os estilos ao botão. Para isso, você deve verificar se tem a seção "CSS Personalizado" habilitada (nos dois casos o código a aplicar é o mesmo, com uma pequena diferença):

- Se você tiver CSS Personalizado: Cole o seguinte código

#button-wsp{
position:fixed;
width:70px;
height:70px;
bottom:40px;
right:50px;
background-color:#25d366;
color:#FFF !important;
border-radius:100%;
text-align:center;
font-size:40px;
box-shadow: 2px 2px 3px black;
z-index:100;
transition: 2s;
}
#img-wsp{
width:40px;
height:40px;
}
@media only screen and (max-width: 768px) {
#button-wsp{
width:40px;
height:40px;
bottom:20px;
right:20px;
position:fixed;
}
#img-wsp{
width:30px;
height:30px;
margin-bottom: 30px;
}
}

• Se você NÃO tiver o campo CSS Personalizado: você deve colar em Custom before </body> code o seguinte código

<style>
#button-wsp{
position:fixed;
width:70px;
height:70px;
bottom:40px;
right:50px;
background-color:#25d366;
color:#FFF !important;
border-radius:100%;
text-align:center;
font-size:40px;
box-shadow: 2px 2px 3px black;
z-index:100;
transition: 2s;
}
#img-wsp{
width:40px;
height:40px;
}
@media only screen and (max-width: 768px) {
#button-wsp{
width:40px;
height:40px;
bottom:20px;
right:20px;
position:fixed;
}
#img-wsp{
width:30px;
height:30px;
margin-bottom: 30px;
}
}

</style>

Clique em Salvar.

Esperamos que este tutorial tenha sido simples para você. Se tiver dúvidas, escreva para support@publica.la.

Atualizado em: 11/05/2026