Adding a WhatsApp chat icon to your Knorish website is straightforward. First, decide whether you want the icon to appear on all pages or only specific ones, as the implementation differs slightly for each option.
Table of contents
For All Pages
To display the WhatsApp chat icon across all pages navigate to Website Builder > Custom Code > Body End Code, as shown in the screenshot below.
On this page, select the page version, paste the code below, and click 'Save'. Make sure the checkbox is enabled to apply it on entire site.
<script>
// Create anchor tag for WhatsApp link
const whatsappLink = document.createElement('a');
// Change the phone number below to your desired WhatsApp number
whatsappLink.href = 'https://wa.me/1234567890';
whatsappLink.target = '_blank';
whatsappLink.style.position = 'fixed';
whatsappLink.style.bottom = '20px';
whatsappLink.style.right = '20px';
whatsappLink.style.width = '60px';
whatsappLink.style.height = '60px';
whatsappLink.style.borderRadius = '50%';
whatsappLink.style.backgroundColor = '#25d366';
whatsappLink.style.display = 'flex';
whatsappLink.style.alignItems = 'center';
whatsappLink.style.justifyContent = 'center';
whatsappLink.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
whatsappLink.style.transition = 'transform 0.2s, box-shadow 0.2s';
// Add hover effect using JavaScript
whatsappLink.onmouseover = function() {
whatsappLink.style.transform = 'scale(1.1)';
whatsappLink.style.boxShadow = '0 6px 12px rgba(0, 0, 0, 0.3)';
};
whatsappLink.onmouseout = function() {
whatsappLink.style.transform = 'scale(1)';
whatsappLink.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
};
// Create image tag for WhatsApp icon
const whatsappIcon = document.createElement('img');
whatsappIcon.src = 'https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg';
whatsappIcon.alt = 'WhatsApp';
whatsappIcon.style.width = '70%';
whatsappIcon.style.height = '70%';
// Append image to anchor tag
whatsappLink.appendChild(whatsappIcon);
// Append anchor tag to the body
document.body.appendChild(whatsappLink);
</script>
And that's it! You should now see the WhatsApp chat icon available for site visitors.
For Specific Pages
If you prefer the WhatsApp chat icon to appear only on certain pages, you can manually embed the chat widget's code into the HTML of those specific pages. This approach ensures the icon is visible only where you want it.
Knorish provides a dedicated snippet type for this use case. Refer to the screenshot below and add this snippet to your landing pages. Then, click on the settings icon and paste the code provided.
Here's the code you should use; it is identical to the code above.
<script>
// Create anchor tag for WhatsApp link
const whatsappLink = document.createElement('a');
// Change the phone number below to your desired WhatsApp number
whatsappLink.href = 'https://wa.me/1234567890';
whatsappLink.target = '_blank';
whatsappLink.style.position = 'fixed';
whatsappLink.style.bottom = '20px';
whatsappLink.style.right = '20px';
whatsappLink.style.width = '60px';
whatsappLink.style.height = '60px';
whatsappLink.style.borderRadius = '50%';
whatsappLink.style.backgroundColor = '#25d366';
whatsappLink.style.display = 'flex';
whatsappLink.style.alignItems = 'center';
whatsappLink.style.justifyContent = 'center';
whatsappLink.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
whatsappLink.style.transition = 'transform 0.2s, box-shadow 0.2s';
// Add hover effect using JavaScript
whatsappLink.onmouseover = function() {
whatsappLink.style.transform = 'scale(1.1)';
whatsappLink.style.boxShadow = '0 6px 12px rgba(0, 0, 0, 0.3)';
};
whatsappLink.onmouseout = function() {
whatsappLink.style.transform = 'scale(1)';
whatsappLink.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
};
// Create image tag for WhatsApp icon
const whatsappIcon = document.createElement('img');
whatsappIcon.src = 'https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg';
whatsappIcon.alt = 'WhatsApp';
whatsappIcon.style.width = '70%';
whatsappIcon.style.height = '70%';
// Append image to anchor tag
whatsappLink.appendChild(whatsappIcon);
// Append anchor tag to the body
document.body.appendChild(whatsappLink);
</script>
And that's it! You should now see the WhatsApp chat icon available for site visitors.
Preview of WhatsApp chat icon
Now, here's what your site visitors will see.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article