Real-time chat is one of the most effective ways to build trust with visitors the moment they land on your pages.
While Divi is a powerful design tool, knowing exactly where to place the Messenger chat code without breaking your visual layout can be confusing.
I understand the hesitation to mess with theme files or custom code modules if you aren’t a developer.
After testing on a lot of Divi installs, I’ve identified this method as the best option since it’s both easy for beginners and reliable for performance.
In this tutorial, I will show you how to add Facebook Messenger to your Divi WordPress site so you can start connecting with customers instantly.
Why Real-Time Chat Matters for Your Divi Website
According to research, 82% of consumers want an immediate response to sales questions.
What’s more, live chat has the highest satisfaction rating (73%) among all customer service channels.
By adding the option to chat in real time, your visitors can see that a real person is ready to help them out. It transforms your Divi website from a static page into an interactive experience.
Why Facebook Messenger Specifically?
Facebook Messenger is Meta’s messaging platform with over 1.3 billion active users worldwide.
On top of being a popular platform, Messenger was also designed to help businesses reach people effectively.
Here’s why Messenger stands out from other chat options:
- Since visitors already have Messenger installed on their phones, there’s no new app to download or account to create.
- Conversation history syncs across devices, so customers can start a chat on your website and continue it later on their phone.
- Lower barrier to entry than email forms means people are more willing to send a quick message than fill out a contact form.
- Visitors can continue conversations after they leave your site so the relationship doesn’t end when they close your webpage.
Why WPChat Is the Best for Divi Users
While you could manually insert Facebook’s Messenger chat plugin code into your Divi theme files, this approach has three major drawbacks for non-developers:
- Risk of Breaking Your Site: One misplaced character in your theme files can cause errors or a blank screen.
- Manual Updates: Every time Divi updates, you might have to tweak the code once more to make sure it’s working.
- No Visual Controls: You’re stuck editing raw code instead of using a simple dashboard to manage your chat settings.
Out of all the options available out there, WPChat turned out to be the best chat plugin for Divi websites.
I tested WPChat against three other chat plugins (Tidio, Tawk.to, and LiveChat) specifically on Divi sites. Here’s what made WPChat the clear winner for beginners:
- Guided Setup Wizard: WPChat walks you through the entire setup process step-by-step, getting your Facebook Messenger chat live in under 10 minutes without any technical knowledge required.
- Live Customizer with One-Click Themes: Transform your chat’s appearance instantly by choosing from preset themes, then fine-tune colors, fonts, and layouts without touching code.
- Multi-Agent Support with Smart Routing: Add multiple team members to handle chats and let WPChat automatically route conversations to the right person based on availability.
- Powerful Visibility Controls: Decide exactly where your chat appears by choosing specific pages, categories, or post types so you’re not showing chat where it doesn’t make sense.
- Built-in Analytics Dashboard: Track response times, customer behavior, and satisfaction metrics to see what’s working and continuously improve your support.
The setup process takes less than 10 minutes, and WPChat integrates seamlessly with Divi without requiring any code modifications.
Plus, WPChat stays active even when you update your theme, so you never lose your chat functionality.
Ready to transform how you connect with visitors on your Divi site?
Get WPChat today and start providing instant support.
How to Add Facebook Messenger to Divi in 5 Steps
Now that you understand why Facebook Messenger chat works so well with Divi, let me walk you through the exact setup process.
It’s a quick and easy process, and you’ll have a powerful chat system ready in just minutes.
Step 1: Install and Activate the WPChat Plugin
First, you’ll need to get a copy of the WPChat plugin. Visit the WPChat website and get the plan that fits your needs.
Once you’ve downloaded the plugin file, install and activate it on your website.
In case you need help, you can look at this step-by-step guide on how to install WordPress plugins.
Step 2: Complete the Initial WPChat Setup
Now it’s time to configure your new plugin. Open the WPChat menu item from your WordPress dashboard.
You’ll see a welcome screen with a Set Up button. Just click on it to start the setup.
Once you do that, the plugin asks for your WhatsApp phone number.
Since WhatsApp is another popular messaging app run by Meta, it’s a great way to reach more people.
Just enter your number and click on the Next button.
On the following screen, you’ll be able to pick a theme for your chat widget’s appearance.
WPChat offers several pre-designed themes that match different website styles:
- Basic
- Night
- Pastel
Choose the one that best complements your Divi design, then click on Next to continue.
Step 3: Choose Visibility for Facebook Messenger Chat Widget
This step lets you control exactly where your chat widget appears on your Divi site. You have two main options to consider:
- Display on all pages shows your chat widget across your entire website, giving visitors consistent access to support.
- Display only on specific pages lets you choose exactly which pages show the chat bubble.
Once you do that, you can use the filters below to get even more control over the Messenger chat option to appear.
You can add filters based on Pages, Categories, Tags, or Custom Post Types.
For example, you might want chat to appear only on product pages or your contact page. Or, you can exclude the chat option from your blog section.
After setting your visibility preferences, click on Next.
On the final setup screen, enter your WPChat license key. You can see this key on your account page on WPChat.
Enter your key here and click on the Complete Setup button to finish up here.
Just like that, your Facebook Messenger chat widget is now active on your Divi site.
Anyone on your site can just click on the floating button to open the Facebook chat widget.
Step 4: Customize Your Messenger Widget for Best Impression
With the basic setup complete, let’s make your chat widget look perfect for your Divi website.
First, click on the Customize button on your WPChat dashboard.
This opens the live editor, where you can see a panel with the different customization options.
Like with the Divi editor, you get a live preview to make it easy to design your chat widget.
Let’s go through some of the customization options here:
Personalizing the Assistant Avatar
First, you’ll want to add a friendly face to your chat widget.
So, click on the Assistant Avatar option in the customization menu.
You can find several pre-built avatars you can choose from here.
If you want to use your own image, click the Add Your Own button instead.
Use the Upload button to add an image from your media library or your computer.
Just enter a name for your avatar, then click on Add to save it.
With that, you can click on Save to confirm your new assistant avatar.
After doing that, click the Back button to return to the main customization screen.
Editing the Visible Sections
Next, you can control the different sections of your Messenger widget.
Just look for the Sections option on the left side of the customizer.
From here, you can choose to show or hide the section with a single click.
You can also move the sections up and down so the focus can be on the messaging feature of the FAQ options.
Feel free to click on each of the two main sections to customize them even further.
Once you’re happy with your widget, click on Save to store your changes.
As you can see, this customizer is pretty easy to use even without design or coding experience.
Step 5: Set Up Multiple Chat Agents (Team Management)
If you have a team handling customer inquiries, WPChat lets you create different agents to represent your support team.
Each agent can have a name and profile pic to make the conversation feel more human for your visitors.
To set up your agents, open the WPChat » Agents menu from your WordPress dashboard.
You’ll see a default agent that was created when you set up the plugin.
Just click on Edit next to this agent to modify the information.
To add a profile photo, click Upload and select an image from your computer.
Professional headshots can be great for building trust with visitors. Or, you can use the company icon or mascot to make the conversation feel official.
Next, enter the agent’s Name in the field below.
You can use the person’s real name to add a human touch or use a general name for all the support staff.
Finally, enter your Facebook Messenger ID or username in the Facebook Messenger field.
Doing that will give visitors the option to open Messenger and chat directly with you.
You can also connect this agent to other popular messaging services like Telegram and Instagram from here.
After you set up the agent, click on Save Changes.
You can then add new agents and repeat this process for each team member who will be handling chat conversations.
Finally, you can open your website and test out your new Messenger chat widget.
Conclusion
You’ve successfully added Facebook Messenger to your Divi WordPress site using WPChat. Just like that, your visitors can now reach you with just one click.
This setup gives you the best of both worlds — professional chat functionality without any coding and the convenience of Facebook Messenger that your customers already know and trust.
Ready to start connecting with your visitors in real-time? Get started with WPChat today!
