Add WhatsApp Chat Button to Your Website

WhatsApp Button In Palmstack Website

WhatsApp is a very popular messaging app, I use it to chat with my visitors on this website, there is so many ways to use it with your website specially if your website is based on WordPress.

But today I will talk only about the easiest way to add a WhatsApp button to you website with a simple line of code.

So Lets Begin…

  1. Find a WhatsApp icon image or create a basic html hyperlink using “a” tag with a text and an icon from any icon-font like Font Awesome as an example.
  2. In the href=”” attribute of the “a” tag or in the onclick event of a “button” tag add the hyperlink as shown below
<a href="https://api.whatsapp.com/send?phone=Your-Phone-Number"><i class="fab fa-whatsapp"></i></a>

or...

<button id="WhatsappIcon" onclick="window.location.href='https://api.whatsapp.com/send?phone=Your-Phone-Number';" title="Open Whatsapp"></button>

as you can see from the code above i used a FontAwesome icon with the “a” tag, And I assigned an id=”WhatsappIcon” to the “button tag so I can apply a CSS customization to the button and make it’s background an image of WhatsApp icon like you can see in this website.

That’s it.. I think it’s so easy and useful now to have this chat app shortcut icon button in your website.

Hope you all have a good day…! 🙂

Leave a comment

Your email address will not be published. Required fields are marked *