5 Ways to Embed Facebook Messenger on Your Website (2023)

5 Ways to Embed Facebook Messenger on Your Website (1)

Facebook messenger is one of the most widely used messenger apps in the world. As of April of last year, they were pulling in a shocking 1.2 billion monthly active users. I’m sure that number is even higher by now.

As it stands, there are two ways to use Facebook messenger. You can use a phone app on any of the major device platforms, or you can access it through Facebook via a desktop client. The desktop client works either as a window in the side of a Facebook window, or in its own window, as on this link.

If you want to be available to your potential customers and the people looking to your site for help, it’s a tricky proposition. You need to refer people over to messenger or to your Facebook page, neither of which are necessarily the route a customer in need of help wants to take. If only there was some way you could embed the Facebook messenger on your website, like one of those little chat pop-ups…

Here are five options you can use to embed Facebook’s messenger app into your website, to reach customers where they’re already reaching out to you.

1. WhatsHelp

(Video) How to Add Facebook Messenger to WordPress Website | Free Live Chat Integration 2021

3. Facebook Messenger Live Chat

4. Facebook Messenger for WordPress by NinjaTeam

5. A Custom Solution

1. WhatsHelp

WhatsHelp is named after one of the biggest messaging competitors to Facebook’s messenger, WhatsApp. It’s a widget you can plug into your website which will allow a user to reach out and connect via a wide range of possible communications options, aimed primarily at mobile users.

(Video) How To Add Facebook Messenger Chat in WordPress Website

WhatsHelp actually has a lot of different services available. The one we’re primarily looking at is the free chat widget, but they also do chatbots and even ads through Facebook Messenger. Think of these as advanced features. You can start off with just a messenger client, and add on a bot or ads if they’re worth expanding your functionality.

5 Ways to Embed Facebook Messenger on Your Website (2)

The widget, once installed on your site, will reside in a small button in the corner of the user’s screen. You’ve seen them before; they trigger a small window with a call to action once the user has scrolled far enough or spent enough time on the site. It’s generally a small message window for a chat program, and WhatsHelp is no different.

With WhatsHelp, you get this small window with a message. It’s a call to action asking the user to reach out via one of your supported contact methods if they’re in need of assistance of any sort.

What contact methods are available through WhatsHelp? By default, you have Facebook Messenger and WhatsApp. You can also add in Viber, Snapchat, Line, Telegram, Vkontakte (VK), and the standard methods of contact of SMS, phone, and email.

Once you have chosen your ideal message platforms and added in your contact information for them, you can customize the button. You can add your company logo, or it will pull your Facebook page logo if you use FB messenger and don’t customize the widget. You can change the message, the color of the button, and whether it’s on the left or right side of your page. Finally, you plug in your email and they send you the code.

5 Ways to Embed Facebook Messenger on Your Website (3)

WhatsHelp is a completely free plugin for you to add to pretty much any website. Just know that you may have to adapt the code to work with your CMS, if you use WordPress or Joomla rather than a more custom solution. I’m honestly not sure if they provide variations in their code for different CMSs or not.

WhatsHelp makes their money with the advanced features I mentioned above. The widget alone will allow a user to reach out to you, but if you don’t have someone at the other end of the line monitoring that communications method, they’ll get no response. A chatbot can help eliminate that problem – we covered them here – but it’ll cost you. Obviously, they have a ton of nice features, but pricing starts at $29 per month for up to 1,000 contacts. More contacts means more cost.

2. The Default Facebook Option

If you want something without all the different contact options, and you want it to look as officially Facebook as possible, you’re in luck. Facebook actually has two possible methods you can use, one designed more for desktop platforms and one for mobile.

(Video) HOW TO ADD FB MESSENGER CHAT TO A DUDA WEBSITE

The desktop platform option is the messenger box. This is actually the same plugin as the Facebook timeline box or like box, and can actually have all options at once. Let’s take a look.

Known as the Page Plugin, you can see a live preview of the plugin as you customize it. By default, you see the box as it is with standard settings. At the top you see the name of the page and its follower count, the cover photo and profile picture displayed together, and a string of people who like it. Below that is a feed of the timeline of the page. This is almost all customizable.

5 Ways to Embed Facebook Messenger on Your Website (4)

First of all, in the box above where it says Tabs and is pre-filled with “timeline”, add a comma, space, and the word “messages”. Click outside of the box or hit enter and the preview will change. Now you see a second tab of “messages” in the widget. If all you want is messages, you can remove the timeline option. If you want more options, you have more. Here are all the possible parameters:

  • href: the URL of your Facebook page. Don’t change this.
  • Width, height: the dimensions of the plugin. You can set it to be fixed, between 180 and 500 in width, and a minimum of 70 height with no listed maximum.
  • Adapt_container_width: this tells the plugin to change sizes based on how wide the DIV on your site is that contains it, so you don’t stretch or warp your site design and so it plays nicely with responsive designs.
  • Tabs: these are the possible data options. You can see the timeline, messages, or events from the page, or all three. For our article all we care about is messages.
  • Hide_cover: this allows you to show or hide the cover photos. Profile picture is required.
  • Show_Facepile: this is the list of friends who follow the page, if the timeline option is chosen.
  • Hide_CTA: this allows you to show or hide a custom CTA for the messenger tab.
  • Small_header: this scrunches down the top header bar to leave more space for the meat of the plugin. I recommend it for messenger purposes.

Once you have the plugin configured the way you want, you can click the “Get code” button below it and copy the code you see. You can then add this to your site the way you would add any other custom plugin.

5 Ways to Embed Facebook Messenger on Your Website (5)

As for the mobile option, it’s a lot simpler. In fact, all you need is a link, the same as any other link you would want to add to your site. Messenger uses a custom m.me domain for shortlinks. So if I wanted you to be able to message Moz on Facebook, I would go to their Facebook page, which is Facebook.com/moz. All I need here is their page URL name, which is the /moz part. Then I can just create a custom link that looks like this: https://m.me/moz. Click that link and Messenger will open with a box for Moz. You can do this with any page, you just need their /username. You can also do this with individuals, though I’m not sure if you want to make your CEO’s profile open for messaging at all hours.

You can use a JavaScript button to do the same thing. The code is in option B on this page if you want.

3. Facebook Messenger Live Chat

There seems to be a WordPress plugin for everything, and this is no different. This plugin is one of the better options available free in the plugin directory. It’s very recently updated as of this writing, which is one thing I look for in a good plugin. It has over 10,000 active installations and a five star rating.

5 Ways to Embed Facebook Messenger on Your Website (6)

(Video) How to embed Facebook chat widget on New Zenler website?

It’s not a very complex plugin, this one. It’s one of a handful of free tools offered by Zotabox, which include a contact for, a promo bar, a notification box, and social sharing buttons as well as the messenger button.

This plugin has the benefit of being simple and easy to install on WordPress. Otherwise, it looks and feels a lot like option #1 from this list. It also has a variety of different options, including choosing specific pages for it to appear or not appear, changing colors and other CSS options, and more. You can play around with a live demo of the plugin here.

There are several other options available in the WordPress plugin directory, but make sure to read the recent reviews and support threads before you choose one. I was going to recommend a different plugin, but it turns out it hadn’t actually been updated to use the new format of Messenger, and thus it stopped working for a lot of people. Facebook loves to make unannounced changes and break third party plugins, so always do your research first.

4. Facebook Messenger for WordPress by NinjaTeam

It’s hard to get through a plugin discussion without at least having one option from the Envato marketplace network. This CodeCanyon option costs $25 and only includes six months of support, with additional supporting running almost $8 per year. It’s a paid plugin, so what do you get in comparison to all of the above options?

First of all, you get both the old version of Messenger and the new version. Obviously Facebook is pushing people towards the new one, but if you want to keep the feel of the older version, you can. Both are included with a single purchase.

Scanning through the features list, there’s not much that makes this plugin stand out. It adds an icon, it can be positioned in various locations around your site, it can be translated into any language Facebook supports; these are all standard features.

The fact is, unless you’re a huge fan of NinjaTeam, there’s nothing to set this plugin apart. Someone even asked in the comments for this plugin, how is it different from the free one on the WordPress plugin directory? NinjaTeam’s response is simply “they have the same function, different in style and shortcode.” So, that’s it. There’s nothing to make it stand out, other than their professional support:

5 Ways to Embed Facebook Messenger on Your Website (7)

5. A Custom Solution

If you’re really interested in a custom solution, you can do that too. This is the option for those of you who consider yourselves developers, who like to customize every little bit of code they use, and who absolutely do not want a simple out-of-the-box solution. I don’t know why you would want all this, but hey; you do you.

The linked tutorial is from DaddyDesign and starts with the basic Facebook Messenger link, as I mentioned up above. It’s the m.me link I had you make if you wanted to use that route. Make a simple HTML link to the m.me link with whatever anchor text you want for your messenger call to action.

(Video) Add Facebook Messenger To Your Website (Wordpress)

5 Ways to Embed Facebook Messenger on Your Website (8)

After that, you need to add custom CSS to the button. You need to specify a class for the link, something like “class=”fb-msg-button”” or whatever you like. Just make sure it’s something well labeled, so you never lose track of what you’re editing.

After that, you can play around with the CSS as much as you like. You can do all kinds of things, from rounded corners to animations with modern CSS. That link provides you with a few options to make a custom button, which you can use as a starting point if you like.

FAQs

How do I embed Facebook Messenger on my website? ›

From your Facebook Page: Navigate to your Page Settings. Click Messaging. Under Add Messenger to your website, click Get Started.

How do I get a Facebook Messenger embed code? ›

1. Navigate to Settings > Advanced Settings > Custom Code. 2. Paste the Facebook Messenger widget code and select the pages where you want the code to apply.

How do I add Facebook Messenger to HTML? ›

So we need to go to file manager. And select the site where we want to install the messenger plugin

How do I add Facebook Messenger to my WordPress website? ›

Log in to your WordPress dashboard, navigate to the Plugins menu and click Add New. In the search field, type 'Facebook Chat Plugin' and click 'Search Plugins'. Select the plugin authored by 'Meta'. You can install it by clicking 'Install Now'.

How do I embed Messenger in Google sites? ›

First, you'll need to navigate to your Facebook Page and find the “Settings” section. This will give you access to the rest of the settings that you need to modify. Messaging. Then, find the “Messaging” link and click “Add Messenger to Your Website” to let Facebook know you want to integrate the Chat feature.

How can I add Messenger in 2022 website? ›

Step 1: You access the page and click Settings in the left menu. Step 2: You click Messaging on the left menu; on the right, you find the section Add Messenger to the website and click the Start button.

How do I add Facebook Messenger to my Wix website? ›

Here's what to do:
  1. On your Facebook Page, go to “Settings” and then click “Messaging”
  2. Navigate to “Add Messenger to Your Website” and then click “Get Started”
  3. Go to “Set Up Your Chat Plugin”, then choose “Set Up”
  4. Choose the preferred language.
  5. Add your website domain.

How do I add Facebook Messenger to my Godaddy website? ›

The installation process
  1. Go to “Settings” on your Facebook Page account.
  2. Click “Messaging” and find the “Add Messenger to Your Website” link.
  3. Next, click “Get Started”
  4. Go to “Set Up Your Chat Plugin” and select a language.
  5. Add your website domain to the Plugin settings.
  6. Copy the embed code that you'll need for your website.

How can I use Messenger in mobile browser? ›

How to Use Facebook Messenger Without the App! - YouTube

What is Facebook chat plugin? ›

The Chat Plugin allows you to integrate your Messenger experience directly into your website. This allows your customers to interact with your business anytime with the same personalized, rich-media experience they get in Messenger.

Is Facebook Chat and Messenger the same? ›

mobile. Facebook allows its users to privately message each other through private messaging. This applies to both individual users and business to customer conversations. However, messaging on desktop takes place on Facebook chat while on mobile it takes place on a standalone Facebook application called Messenger.

How do I add Facebook Messenger to Shopify? ›

Steps:
  1. From your Shopify admin, click Settings > Apps and sales channels.
  2. From the Apps and sales channels page, click Messenger.
  3. Click Open sales channel.
  4. Click Overview.
  5. In the Facebook Messenger section, click Start setup.
  6. Click Confirm to connect Messages to Shopify Inbox.

How do I add chat options in WordPress? ›

Get Set Up Quickly
  1. Log into your WordPress account and open your dashboard, then select Plugins on the left sidebar.
  2. In the “Add New” section, search “Pure Chat” with the search bar at the top right.
  3. Install and activate the plugin. Then find Pure Chat in the left sidebar and pick a widget to turn the chat on!

How do I embed Facebook on my Google site? ›

Insert Facebook Page Plugin
  1. Visit Facebook's Page Plugin generator to create the code.
  2. Make the customisations you want to the page plugin.
  3. Use the Get Code button to get the code.
  4. To use. the IFrame option just use the URL from the src attribute in the code and paste as the URL in the Embed URL option on the site.

How do I embed a Facebook page? ›

How to Embed Facebook Page on Website - YouTube

How does Facebook chat work? ›

Using the Facebook chat:
  1. Locate and select the chat box in the bottom-right corner of the screen.
  2. A list of friends who are currently available to chat will appear. Select an available friend.
  3. A chat window will appear. ...
  4. When you're finished, click X to close the chat window or press Esc on your keyboard.

How do I add chat to my website? ›

How to Add Live Chat to a Website, Step by Step
  1. Step 1) Go to Website Chat > Customer Chat Widgets in MobileMonkey. ...
  2. Step 2) Give the chat widget a descriptive name. ...
  3. Step 3) Set the color of the chat widget. ...
  4. Step 4) Set up your welcome message. ...
  5. Step 5) Set up actions to the responses you receive from your initial question.
6 Mar 2020

Is Facebook chat plugin free? ›

Today, we are announcing major updates to the Facebook Chat Plugin, a free tool that businesses use globally to connect with customers on their website. With this latest update, the Chat Plugin helps businesses reach more people than ever before, even customers not logged into Facebook.

How do I link messages to Messenger? ›

#1: Enable Messages on Your Page

Your page can accept and send messages only if you've enabled Messenger. To turn on Messenger for your page, go to Messages under General Settings and then click Edit. Select the option to allow messages to your page, and click Save Changes.

How do I add a plugin to Wix? ›

To add the Plugin script to you Wix website:
  1. Login to your Wix website and select the Add (+) button.
  2. Scroll down to the bottom of the list and select More.
  3. In the Embeds section, select HTML/iframe.
  4. Enter the Plugin script, making any color changes or settings needed.
3 Oct 2019

What is Facebook live chat? ›

In live chats, you have to present during the chat. On the other hand, you can send a message to a customer in Messenger and then back to them later. This option is both an advantage and a disadvantage.

Is Messenger available for Web? ›

The social network unveiled a Web version of Messenger on Wednesday, a way to chat from a browser tab on a desktop computer as you would using the Messenger app. The product is accessible at Messenger.com and resides outside of Facebook, where users can already chat with their Facebook friends from a Web browser.

Can you access Facebook Messenger without the app? ›

TL;DR – For those who want the quick answer without having to read the entire post, you can read your Facebook Messenger messages by accessing Facebook through a browser, not the mobile app. Once you navigate to Facebook in your browser, you can open Messenger from within the Web view and read your messages.

How do I see hidden Facebook messages? ›

Where to find the secret folder
  1. Open Facebook and sign in.
  2. Select the Messenger icon on the top right corner of the screen.
  3. Select options, located at the top as the three dots.
  4. Choose Message Requests from the menu.
  5. You'll see a list of messages from your secret folder.
  6. Choose to reply or delete.
27 Jun 2022

How can you develop a chatbot for Facebook Messenger only the steps are required? ›

Follow along and make your own.
  1. 1a. Have a Facebook Account. ...
  2. 1b. Make a Facebook Page to House Your Bot. ...
  3. Launch Chatfuel. Go to Chafuel.com and login using your Facebook account. ...
  4. Connect Bot to Your Facebook Page. You'll see a button in the upper right to 'Connect to Facebook. ...
  5. Build Your Bot. ...
  6. Test Your Bot.
17 Jan 2018

What is chatbot Messenger? ›

A Facebook Messenger bot is a chatbot that lives within Facebook Messenger, meaning it converses with some of the 1.3 billion people who use Facebook Messenger every month. Chatbots can be programmed to understand questions, provide answers, and execute tasks.

Does Facebook have a widget? ›

To install a widget on your Facebook business page, you'll need to log in to the Branded Web Manager and then: Click Widgets at the top of the page. Find your widget, then click the gear icon and select Deploy. Scroll to the bottom and click Go to Facebook to begin installing your widget.

What is the purpose of Messenger? ›

A messenger app is any app that enables a private messaging function between two or more people. With more and more messenger apps popping up every day, this type of technology is quickly becoming the most popular way to send text-based messages, replacing SMS and MMS as the preference of most consumers.

What are the features of Messenger? ›

Messenger powers conversations within Facebook, Instagram, Portal and Oculus.
  • WATCH TOGETHER. Enjoy videos with your friends. ...
  • ANIMATED EFFECTS. Express yourself. ...
  • REPLIES & FORWARDING. Let the conversation flow. ...
  • PAYMENTS. Send money to friends & family.

Why is Messenger so important? ›

Key message

Online communication can help young people build and develop social skills and gives them a platform to share their skills and help each other out. Messaging and texting are among the most popular methods of communication among children and teenagers.

How do I add chat widget to Shopify? ›

Add chart widget - YouTube

How do I add a message button on Shopify? ›

From your Shopify admin click on Products and find the product you want to add a message to. On the right side you will see one small box with tags. type "newMessage: " and your message. So for example we will go with "newMessage: Only available for in store pickup" and add a tag.

How do you customize messages on Messenger? ›

How to Change Messenger Chat Theme - YouTube

Which plugin is used for live chat? ›

Formilla Live Chat

Mobile-friendly with AI-powered chatbots, visitor monitoring, and more, Formilla is a full-featured live chat WordPress plugin that's also available for WooCommerce users.

How do I add live chat to Elementor? ›

Plugin installation
  1. Go to the Plugins section in your WordPress Dashboard.
  2. Select the Add New button.
  3. Type Plugin for Elementor – LiveChat in the Search Tool available on the right.
  4. In the Search Results, you will find the LiveChat Plugin for Elementor. ...
  5. After the installation, click on the Activate button.
26 Nov 2021

Does WordPress have live chat? ›

Chat is available for users who are an Administrator on the site. If an Editor tries to contact us on Chat, they will only see the Email Us option. Chat is currently available 24 hours a day from Monday to Friday for customers with our Annual Premium, Business, and eCommerce plans or our legacy Pro plan.

How do I add messenger to my Wix website? ›

How to Add Facebook Messenger App to Wix (2021) - YouTube

Does Facebook have a widget? ›

To install a widget on your Facebook business page, you'll need to log in to the Branded Web Manager and then: Click Widgets at the top of the page. Find your widget, then click the gear icon and select Deploy. Scroll to the bottom and click Go to Facebook to begin installing your widget.

What is a chat plugin? ›

Chat Plugin is a tool you can embed on your website to let visitors to chat with you on your website. These messages are stored in your Inbox in both Messenger and Meta Business Suite. You can use the chat to answer questions about pricing or products, book appointments, or provide customer support.

How do I add Messenger to Shopify? ›

Steps:
  1. From your Shopify admin, click Settings > Apps and sales channels.
  2. From the Apps and sales channels page, click Messenger.
  3. Click Open sales channel.
  4. Click Overview.
  5. In the Facebook Messenger section, click Start setup.
  6. Click Confirm to connect Messages to Shopify Inbox.

How do I add chat to my website? ›

How to Add Live Chat to a Website, Step by Step
  1. Step 1) Go to Website Chat > Customer Chat Widgets in MobileMonkey. ...
  2. Step 2) Give the chat widget a descriptive name. ...
  3. Step 3) Set the color of the chat widget. ...
  4. Step 4) Set up your welcome message. ...
  5. Step 5) Set up actions to the responses you receive from your initial question.
6 Mar 2020

What is chat box in Facebook? ›

Facebook Chat Box Instruction - YouTube

How do I add a plugin to Wix? ›

To add the Plugin script to you Wix website:
  1. Login to your Wix website and select the Add (+) button.
  2. Scroll down to the bottom of the list and select More.
  3. In the Embeds section, select HTML/iframe.
  4. Enter the Plugin script, making any color changes or settings needed.
3 Oct 2019

How do I create a Facebook widget? ›

  1. On your device, go to the home screen you'd like to add the widget to.
  2. Tap and hold in empty space until your apps begin moving.
  3. Tap + at the top.
  4. Tap the search field and type Facebook. ...
  5. Select the widget you'd like to add, then tap Add Widget.
  6. Tap and drag the widget to where you'd like it.
  7. Tap Done.

Can you embed on your Facebook page? ›

To get the Facebook embed code from a post, simply: Choose the post you want to show. Click on the top right-hand corner options menu and choose “embed post”

What's a Facebook widget? ›

The Facebook Widgets set saves you from both dealing with pesky Facebook embed codes, as well as from a handful of Facebook integration plugins that cram up your WordPress site. Using the new widgets allows you to increase your organic social engagement automatically, without any extra work on your side.

Is Facebook chat plugin free? ›

Today, we are announcing major updates to the Facebook Chat Plugin, a free tool that businesses use globally to connect with customers on their website. With this latest update, the Chat Plugin helps businesses reach more people than ever before, even customers not logged into Facebook.

Is Facebook Chat and Messenger the same? ›

mobile. Facebook allows its users to privately message each other through private messaging. This applies to both individual users and business to customer conversations. However, messaging on desktop takes place on Facebook chat while on mobile it takes place on a standalone Facebook application called Messenger.

How can you develop a chatbot for Facebook Messenger only the steps are required? ›

Follow along and make your own.
  1. 1a. Have a Facebook Account. ...
  2. 1b. Make a Facebook Page to House Your Bot. ...
  3. Launch Chatfuel. Go to Chafuel.com and login using your Facebook account. ...
  4. Connect Bot to Your Facebook Page. You'll see a button in the upper right to 'Connect to Facebook. ...
  5. Build Your Bot. ...
  6. Test Your Bot.
17 Jan 2018

How do I add a message button on Shopify? ›

From your Shopify admin click on Products and find the product you want to add a message to. On the right side you will see one small box with tags. type "newMessage: " and your message. So for example we will go with "newMessage: Only available for in store pickup" and add a tag.

How do you customize messages on Messenger? ›

How to Change Messenger Chat Theme - YouTube

How do I remove Facebook Messenger from Shopify? ›

To remove the Messenger app, log into your Shopify account. Go to Settings > Sales Channels > and hit the trash icon next to the Messenger channel.

Videos

1. How to Setup Facebook Messenger Chat in HTML Website Setup up Facebook Chat in CPanel Hosting Site
(Designo Page)
2. How to Add Facebook Chat to HTML (2021)
(Elfsight)
3. How to add Facebook Messenger to Your Online marketplace
(weDevs)
4. How to Embed Facebook Chat on Google Sites
(POWR Tutorials)
5. How To Add FaceBook Messenger To Your Wordpress Website 2018
(Darrel Wilson)
6. 5 Ways to Ignite Your Network Marketing Business Using Social Media
(Steve Norris)
Top Articles
Latest Posts
Article information

Author: Arline Emard IV

Last Updated: 02/17/2023

Views: 6154

Rating: 4.1 / 5 (72 voted)

Reviews: 87% of readers found this page helpful

Author information

Name: Arline Emard IV

Birthday: 1996-07-10

Address: 8912 Hintz Shore, West Louie, AZ 69363-0747

Phone: +13454700762376

Job: Administration Technician

Hobby: Paintball, Horseback riding, Cycling, Running, Macrame, Playing musical instruments, Soapmaking

Introduction: My name is Arline Emard IV, I am a cheerful, gorgeous, colorful, joyous, excited, super, inquisitive person who loves writing and wants to share my knowledge and understanding with you.