In this tutorial, I’ll show you step by step how to add Facebook Messenger chat in WordPress/Elementor websites.

Let’s get right to it!

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Adding Facebook Messenger Chat in WordPress/Elementor

Set Up Your Facebook Messenger Chat

First things first; log into your Facebook and open the page you manage. 

In the Manage Page section on the left, go to Settings > Messaging, scroll down to the Add Messenger to your website option and click Get Started.

In the next window, you can choose a Language, and under Greeting, you can add a custom message your visitors will see, Save and then click Next (01:00)

In the Setup customer chat window that follows, you can change the font and icon colors, and so on (01:14)

Go to the Next window, where you can add the website domain names where you want to add a chat. You can just go to your website, copy its URL then paste it there and save. 

When you save, you’re given a code in the section on the right, copy it then hit the Finish button (01:39).

To Read: Create an Instagram Access Token for Elementor with New Instagram API

Add Facebook Messenger Code to Your WordPress Website

The code you just copy is the one you use to integrate your Facebook Messenger caht into your WordPress or Elementor website. 

So after getting your code, go to your WordPress dashboard, under Plugins > Add New (02:07)

In the Add Plugins area search for the Header and Footers plugin, install and activate it (02:23)

After activating your plugin, go to Settings and select the Insert headers and footers option (02:27)

In the Scripts in Footer section, paste the FB Messenger code you copied, then hit the Save button (02:51)

When you’re done, go to your website and reload it, and your Facebook Messenger chatbox will show up on your pages (03:06), and when your website visitor clicks on it, they can just sign in with their Messenger details and then start a chat with you.

Video: How to Create a Single Elementor Blog Post Page Template

In closing

That’s how you can easily integrate your Facebook Messenger chat into your WordPress website.

For any questions or comments, let me know in the comments section below. Remember to subscribe to my newsletter and youtube channel for more tips and tutorials.