How'd They Do That? Embed Facebook Messenger

  1. How To Embed Facebook Messenger In Your Website
  2. How To Embed Facebook Messenger In Website
  3. How'd They Do That Embed Facebook Messenger Messages

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.

Add your individual Facebook messenger widget to website in only 60 seconds. Try a quick demo for shaping Facebook live chat plugin by Elfsight for free. These embedded links are often sent in emails, but can also target people in direct messages or even social media messages. A recent Facebook scam involved sending an embedded link through.

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

They

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

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

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.

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.

Whether you love it or hate it, there’s something to be said for Facebook’s popularity. Everyone has Facebook Messenger on their phones. Users spend hours of their days poring over dog pictures, cat videos, the occasional family update, and all the dank memes.

Hell, there’s even a wildly-popular page for Garlic Bread:

Despite the silliness, Facebook is also a great tool for your business. You can connect with like-minded individuals in groups, and promote your business through your page.

How To Embed Facebook Messenger In Your Website

One of the more underrated tools for businesses is Facebook Messenger. While everyone knows how to use it to keep up with friends, many businesses don’t know you can use it to keep up with your audience. It provides you with a place to talk one-on-one with both existing and potential customers, giving your business a human touch. People like the idea of being able to chat with you on a platform they’re already familiar with.

How to embed facebook messenger in your website

People can visit your page and send you a message – Facebook has made it pretty simple. However, if you really want to use the power of Facebook Messenger as a communication tool, there’s no better way than to add a Messenger link on your website!

How To Embed Facebook Messenger In Website

How to Create a Facebook Messenger Link

The anatomy of a Messenger link is pretty simple. You simply append your business’s username to the URL http://m.me/.

Not sure where your username is? It’s the little @ under your Page name.

So, in my case, my Messenger URL would be http://m.me/overlockdesign. (Try it out – it works!)

To create a Messenger link, you simply need to link to your Messenger URL.

If you’re using the link in a WordPress post or page, you can simply highlight the selected copy and click the link button to create your link.

If you’re not using WordPress, or want to create your link elsewhere, you just need to drop in this code:

Viola! Just be sure to replace USERNAME with your Page’s username.

How'd They Do That Embed Facebook Messenger Messages

Messenger Links Everywhere

There are so many opportunities to use Facebook Messenger to connect. In addition to putting it on your website, you could drop the link in your email signature, on your social media profiles, or really anywhere you want people to connect with you. Using Facebook Messenger makes it easy for your customers to connect, so you can focus on your hustle.

Not feeling the DIY approach? I can set up your Messenger links for you – let’s chat.