Facebook Messenger is a free messaging service that lets Facebook users chat with friends both on mobile as well as on the main website. Facebook is an extremely valuable tool to utilize along with your website to not only maintain your current users/clients but to also gain new potential ones. With Facebook reporting that Messenger has reached 1 billion monthly active users, integrating a Messenger button on your website to allow direct contact naturally makes sense. In this tutorial we are going to teach you how to embed a Facebook Messenger button onto your website and then customize it with CSS.
Facebook’s various apps have been met with mixed response from users, but if there is one app that Facebook did absolutely right, it would have to be Facebook Messenger.It is by far the most. To install the plugin you’ll first need to extract the plugin.zip file from the.zip file you downloaded. Open up the file you’ve downloaded from Code Canyon and extract the file “codecanyon-16392065-facebook-messenger-for-wordpress.zip” into the location where you’d like the file to be on your computer.
According to Facebook, 53% of people are more likely to shop with a business they can message directly. With your traditional live chat, you can only carry out the chat conversation on a specific site. With Messenger chat, though, you can start a conversation on desktop and then continue it on your mobile device with Messenger at a later date. To use the setup tool, do the following: Go to Page Settings Messaging In the 'Add Messenger to your website' section, click the 'Get Started' Button. The setup tool provides a simple UI for customizing the greeting message, theme color, displayed response time, and setting the whitelisted domains for the plugin. Facebook chatbot (a.k.a. Facebook Messenger bot) Facebook users exchange 20 billion messages with businesses every month. Facebook’s own research shows users expect a business to respond almost immediately. One surveyed Facebook user said he would only wait 10 minutes for a response before moving on to another brand.
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
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.
- We will briefly cover the other 2 Facebook Messenger embed options at the end of this tutorial.
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
Items to Note:
- We named our CSS class ‘fb-msg-btn’, but feel free to change this to whatever you feel necessary.
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
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
How'd They Do That Embed Facebook Messenger Web
In this bonus step we wanted to give you the option to add rounded corners to your custom Facebook Messenger button using pure CSS3.
How'd They Do That Embed Facebook Messenger Conversations
CSS
Items to Note:
- You can change the size of your rounded corners by adjusting the value ‘5px’.
Full Code
HTML
CSS
DEMO
Message us on Facebook
Full Code (with Bonus Step – Rounded Corners)
HTML
CSS
DEMO
Message us on Facebook
Facebook Messenger Widget Embed Methods
These two methods are strictly for embedding a Facebook Messenger widget onto your site and are extremely limited in the ability to customize.
Facebook Messenger Box Widget
You can also add a ‘Facebook Messenger Box Widget’ similar to the ‘Facebook Like Box Widget’. To generate the embed code you will need to visit the Facebook Developer website by clicking here. Adjust your settings and click ‘Get Code’ then follow the instructions.
*Please note that this method requires you to include Facebook Javascript SDK on your website.
Facebook Messenger IFrame Technique
If you do not want to add Facebook Javascript SDK to your website then you will need to utilize the IFrame method. You can find the IFrame method in the same place as the box widget above but after clicking ‘Get Code’ select the IFrame tab instead of the Javascript SDK tab.
*Please note that we strongly recommend against using this method as it is not good practice for website performance. Skype for business for mac 2015 supportsportfasr.
Troubleshooting
If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.