To setup a WhatsApp icon on your website; follow the below steps:
Requirments:
- Must have Google Tag Manager enabled and setup on Zyda, check this article to setup Google Tag Manger on Zyda.- The person who will add the code below must have access to make changes to GTM (ideally an "Admin")
Steps:
- Open GTM >> New Tag
- Tag Configuration >> HTML >> add the code then replace the phone number
- Triggering >> All Pages
- Save
- Publish
- Skip
Code:
<script>
(function() {
// Change this number to update the WhatsApp link
var whatsappNumber = "+201001354660";
var button = document.createElement("div");
button.style.position = "fixed";
button.style.bottom = "90px"; // Adjusts margin from bottom
button.style.right = "20px";
button.style.width = "60px";
button.style.height = "60px";
button.style.backgroundColor = "#25D366"; // WhatsApp green
button.style.borderRadius = "50%";
button.style.display = "flex";
button.style.alignItems = "center";
button.style.justifyContent = "center";
button.style.boxShadow = "0px 4px 10px rgba(0,0,0,0.2)";
button.style.cursor = "pointer";
button.style.zIndex = "9999";
var img = document.createElement("img");
img.src = "https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg"; // Official WhatsApp logo
img.style.width = "30px";
img.style.height = "30px";
button.appendChild(img);
button.onclick = function() {
window.open(
"https://api.whatsapp.com/send/?phone=" + encodeURIComponent(whatsappNumber) + "&text&type=phone_number&app_absent=0",
"_blank"
);
};
document.body.appendChild(button);
})();
</script>
