Facebook How To

How to Add Facebook Chat Widget on Your Website

HI, readers welcome our site learnhax.net. Today our topic is about How to Add Facebook Chat Widget in Your Website. We cover step by step process to Add Facebook Chat Widget on Your Website.

Some time ago Email was always preferred mode for reaching out or contact to people on the Internet. But the time is now changed, now the new generation wants to prefer instant and fast messaging apps like Facebook Messenger over email. Because Facebook Messenger gives us new features rapidly. And all features proves instant and fast. It provides us to not only chat but Facebook live chat, playing games with friends online and much more. Facebook live chat is a very interesting feature. you can chat live by clicking Facebook live chat. Facebook live chat is a cool feature on Facebook. In Facebook live chat you can use also emoji and the different sticker on the face. Facebook live chat is the really good feature. Peoples who surf on Facebook use Facebook live chat again and again.

Now, friends, we come to our topic How to Add Facebook Chat Widget on Your Website. It allows website owners to provide their users with an easy way to message or contact or ask any query through the Facebook profile.

We discuss step by step detail to Add Facebook Chat Widget on Your Website. It is really a simple process.

Facebook Live Chat on Your Website.

In the first step of our tutorial, we have to embed the actual Facebook Messenger button on to your website. Create a new page and write in pure HTML.  You have to replace learnhax with your Facebook username.


<a  href=”https://m.me/learnhax“>
Message us on Facebook

  • If you are not able to see messages which are sent to your Facebook profile, it is because Facebook sometimes automatically hides messages from people that are not in your contacts. Go to facebook.com/messages, select the “More” drop-down and choose “Filtered” to see all messages which are not in your main inbox.

STEP 2: Setting Up the Facebook Messenger Button CSS Class

In this step, we have to simply add a CSS  to the Facebook button which we embedded in Step 1 which will allow to customize it with the help of CSS in the coming step.

<a id=”fb-msg-btn” href=”https://m.me/your-profile-username”  target=”_blank”>Message us on Facebook</a>

  • We have named our CSS class ‘fb-msg-btn’, but now feel free to change this to whichever you feel necessary.

STEP 3: Customizing the Facebook Messenger Button via CSS

In the third and last step, we are going to customize the FB Messenger button by using the CSS class which we set up in the previous step.Facebook Live Chat Widget On Website

Download Facebook Live Chat Code

The Complete code for messenger button on above link Download code and place the code on your website wherever you want to see your facebook messenger button on your website.just change some things on given code, your facebook page username or your website link.

Add Facebook Chat Widget on Your WordPress  Website

If you are a WordPress user just follow the given steps and do it easily

  1. First of all open Appearance and go to Widgets. Facebook Live Chat Widget On Website
  2. After that, a Custom HTML option will show on your Widgets Area.
  3. Now Drag and drop Custom HTML on your sidebar.Facebook Live Chat Widget On Website
  4. A content option can see your display on the sidebar.
  5. Paste the Facebook Live Chat Code in Content AreaFacebook Live Chat Widget On Website
  6. Save it and done and go to your Homepage and open anyone post you can see now Facebook Chat Widgets on your Website.Facebook Live Chat Widget On Website
  7. A messenger Float show on your website.Facebook Live Chat Widget On Website

I Hope you do it

Friends these were the complete coding to Add Facebook Chat Widget on Your Website easily. By following step by step process you can easily Add Facebook Chat Widget on Your Website. You can just copy by changing at some points you can paste it easily to  Add Facebook Chat Widget on Your Website.

Final Words:

This Article Was about Add Facebook Chat Widget on Your Website.I hope you liked this article and found it helpful for you.If you like this article Please Share it with your friends help him. Thanks.