A simple way to add a "Click to chat" Whatsapp/Messemger/Telegram icon on all website page corners

A very simple way to add a click to chat Whatsapp or whatever instant messaging app to the corner of your website, and having it showing in all website pages.
When a user clicks on it, it will redirect them to the chat app to message the number or account you put in the making of the icon.
Below are the simple steps using only HTML and CSS tags:

Upload the app icon to your files, like the whatsapp icon, and get its url
image

go to website settings> Banner
put this code after customizing it for your desired account:
<a href="https://wa.me/201*******"><img src="/files/Whatsapp-iconpng.png" class="fixedbutton"</a>

image

go to your theme (you should have a custom theme (You can just duplicate the Standard theme of the website, and add the following lines to its CSS section:

.fixedbutton {
    position: fixed;
    bottom: 20px;
    left: 20px;
    max-width: 60px;
    z-index: 9;
}

Make sure that you have the customized theme set as the website theme in website settings.

image

Once you same all, you fill have the icon showing in the corner of all your page, redirect customers to their messaging app.

image

4 Likes