How to Add a WhatsApp Chat Icon to Your Knorish Site Using Your WhatsApp For Business Number To Initiate Chat With Customers?

How to Add a WhatsApp Chat Icon to Your Knorish Site Using Your WhatsApp For Business Number To Initiate Chat With Customers?

Adding a WhatsApp chat icon to your Knorish site allows visitors to connect with you instantly, improving communication and boosting customer satisfaction. This guide will walk you through the steps to seamlessly integrate WhatsApp with your Knorish website.

First, decide whether you want the icon to appear on all pages or only specific ones, as the implementation differs slightly for each option.

Preview of WhatsApp chat icon

Now, here's what your site visitors will see when they visit your site. 

 

For All Pages

To display the WhatsApp chat icon across all pages, follow the steps below. 


  1. Navigate to Website Builder> Custom Code> Body End Code, as shown in the screenshot above.
  2. On this page, select the page version
  3. Copy the code below, change the number to your WhatsApp For Business number and paste the code
  4. Click 'Save'.
  5. Make sure the checkbox is enabled to apply it on entire site.
Info

<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.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 will 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.

  1. Access Website Builder < Pages.
  2. Open the page where you wish to add the whatsapp button
  3. Click Edit
  4. From Content Blocks on the left, Select HTML content block
  5. Drag and drop it on to the page
  6. Click on the block and click on Settings
  7. Copy the code below, change the number to your WhatsApp For Business number and paste the code
  8. Click 'Ok.
  9. Click Save
Here's the code you should use (The code is identical to the code above.)
Info
<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 will now see the WhatsApp chat icon available for site visitors.

Where To Check Messages
If you connect 



    • Related Articles

    • Add a WhatsApp chat or Meta Messenger button on my site

      Several tools exist that offer to enable a Facebook messenger or WhatsApp chat button on your Knorish site and provide instant customer service to your learners. In this case, we have used GetButton.io. Follow the steps below to add that option on ...

    • How to add an external chat tool on your Knorish site?

      Using the steps listed here, you can use any chat tool that comes with the option of an embed code. Several chat tools can be used to enable great customer service such as Freshchat, Olark, etc. They do offer a large variety of features across ...

    • How to add a Google map on my site with my Business location added?

      Choosing to embed a map in your contact form can be a great way to help your learners find your physical office space. You would require a verified Google Business Account if you wish to add a physical location on your Course Contact Us page. Get ...

    • How to create an image gallery on your Knorish site using the Old Page Builder?

      This article will guide you step-by-step on how to create an image gallery on Knorish and customize images on the platform. To create an image gallery on your Knorish site, simply follow the same process as you would for any other page on the site: ...

    • How to add a privacy policy to my knorish site?

      The standard practice to use a privacy policy is to add it to the footer of your site. A sample privacy policy document is already enabled on all Knorish themes for your perusal. It gets added by default to your Pages under Website Builder. Besides, ...