Te guiaremos paso a paso para que puedas agregar un botón como este:
1. Ingresa a Panel de control > Ajustes > Avanzados
2. Pega el código que te compartiremos a continuación, en 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: Localiza en el código el siguiente link: href="https://api.whatsapp.com/send?phone={tu-numero}".
Allí deberás colocar un número de celular con Whatsapp.
3. Agrega los estilos al botón. Para ello debes asegurarte si tienes habilitada la sección "CSS Personalizado" (en ambos casos el código a aplicar es el mismo, con una pequeña distinción):
- Si tienes CSS Personalizado: Pega el siguiente 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;
}
}
- Si NO tienes el campo de CSS Personalizado, deberás pegar en Custom before </body> code el siguiente 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>
Haz clic en Guardar.
Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].