How to Create a FaceBook Messenger Widget for your Website

Facebook introduced new Messenger widget, It allows website/blog owners to provide their users with an easy way to message/contact or ask any query through facebook page or profile. In this article, we will show you how to embed/integrate Messenger widget in your site. There are various techniques, we will explain each technique step by step.

Step 1: Embed the FB Messenger Button

In the first step of this tutorial, we will need to embed the actual Facebook Messenger button onto your website. There are currently 3 methods for embedding the Facebook Messenger button, but there is only one method that will allow you to customize the button which is to embed it as a hyperlink.

HTML

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

Items to Note:

Make sure that you change ‘your-profile-username’ to your actual Facebook profile/page username.
You can change what your button says by changing ‘Message us on Facebook’ to anything you want.
To enable messaging on your Facebook page, go to your ‘Page Settings’. In the ‘General’ tab in the ‘Messages’ section, when you click edit, “Allow people to contact my Page privately by showing the Message button” should be checked.
Clicking on the link will take you to the Facebook Messenger interface in order to send a message; we added the link target attribute to open in a new window so that your website stays open.

Step 2: Setting Up the Facebook Messenger Button CSS Class

In the second step, we are going to simply add a CSS class to the Facebook Messenger button that we embedded in Step 1 which will allow us to customize it via CSS in the next step.

HTML

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

Items to Note:

We named our CSS class ‘fb-msg-btn’, but feel free to change this to whatever you feel necessary.
Make sure that you change ‘your-profile-username’ to your actual Facebook profile/page username.

Step 3: Customizing the Facebook Messenger Button via CSS

In the third step, we are going to customize the FB Messenger button by referencing the CSS class we set up in the previous step. Since this is a tutorial we will show you the most basic way to style the button and provide you with a basic platform to expand upon. Have fun and get creative with your button!

CSS

a.fb-msg-btn{
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
padding: 12px 16px;
margin: 0;
background-color: #0084ff;
border: 0;
cursor: pointer;
outline: none;
}
a:hover.fb-msg-btn {
background-color: #0268c7;
}

Items to Note:

We used the ‘inline-block’ display attribute however, depending on your application you may need to use ‘block’ and/or float.
We used ‘font-family: inherit;’ to pick up whatever font you are using on your website, change the font family as necessary.
We used the Facebook blue for the background color of the button, simply change the background-color attribute to match your site if needed. Also if you change the background-color, don’t forget to change the hover background-color as well.
Remember this was set up as basic as possible to provide you with a base to work with, have fun with it and feel free to provide a link to your custom Facebook Messenger button in the comments.

Bonus Step: Add Pure CSS3 Rounded Corners to your Custom FB Messenger Button

In this bonus step, we wanted to give you the option to add rounded corners to your custom Facebook Messenger button using pure CSS3.

CSS

a.fb-msg-btn{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Items to Note:

You can change the size of your rounded corners by adjusting the value ‘5px’.

Full Code (with Bonus Step – Rounded Corners)

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

CSS

a.fb-msg-btn{
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
padding: 12px 16px;
margin: 0;
background-color: #0084ff;
border: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
outline: none;
}
a:hover.fb-msg-btn {
background-color: #0268c7;
}