Create chat buttons on Zalo, Facebook, call the website

Add chat buttons Zalo, Facebook, call… to your WordPress website without using a plugin.

In previous posts, I’ve shown you how to integrate Facebook Messenger, Zalo Chat, call button… into your WordPress website, right? However, the limitation of directly integrating the code of Facebook, Zalo … into the website is that they greatly affect the loading speed of the web. If you are looking for a simple and lightweight solution (no need to use a plugin) to integrate Zalo chat button, Facebook, phone call … into your website, then this is the guide for you.

Explore more:

Add chat button Zalo, Facebook, call to WordPress

In fact, these buttons are made with HTML and CSS, so you can add them to any website, not just a WordPress website.

1. First, download the icon set here and upload them to your website, copy and get the image link.

2. Insert the following code in the footer of the theme you are using. If the theme does not support the feature of inserting code in the footer, you can refer to the article “Insert code into the header and footer of a WordPress website”.

In there:

• Replace https://zalo.me/0123456789 with your Zalo link, with 0123456789 is the registered phone number Zalo.
• Replace https://m.me/wpcanban with your Facebook Messenger link, with wpcanban is the ID (copy on the Facebook Profile or Facebook Page link).
• Replace 0123456789 in tel:0123456789 with your phone number.
• Also, change the link of the icons you copied in step 1 accordingly.

3. Insert the following CSS code into the file style.css of the theme or child theme you are using. You can also add it Appearance => Customize => Additional CSS to avoid the code being deleted when updating the theme.

The result you get will look similar to this:

4. If you want to rotate the chat buttons Zalo, Facebook, call … on the mobile interface, add the following CSS code:

The result will look something like this:

And if you want to hide them on the mobile interface for a neat look, replace it with the following CSS code:

You can completely customize the code according to the template to add or remove buttons according to your needs. Not too complicated, right? Good luck!

If you liked this article, follow my blog to regularly update the best and latest articles. Thanks very much. 🙂