We will guide you step by step on how to add a button like this:
1. Go to Control Panel > Settings > Advanced
2. Paste the code we will share with you below, in 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>
📌NOTE: Locate in the code the following link: href="https://api.whatsapp.com/send?phone={your-number}".
There you must enter a cell phone number with Whatsapp.
3. Now we will add the styles to the button. To do this you must make sure you have the "Custom CSS" section enabled (in both cases the code to apply is the same, with a small distinction):
- If you have Custom CSS: Paste the following code
#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;
}
}
- If you do NOT have the Custom CSS field: you must paste in Custom before </body> code the following code
<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>
Click on Save.
We hope this tutorial has been easy for you and if you have any further questions please contact us at [email protected].