Connecting with your website visitors in real-time is often the difference between a lost lead and a loyal customer.
Many users ask us how to add WhatsApp chat to your Divi website because it is the most popular messaging app in the world.
Having that instant connection with your audience on a trusted platform is great for turning passive browsers into active conversations.
We know that while Divi is a fantastic visual builder, finding the right way to integrate a chat feature without complex code can be confusing.
In this guide, we will walk you through the simplest methods to add WhatsApp to your Divi site.
Why Add WhatsApp Chat to Your Divi Website?
WhatsApp is a free messaging application used by over 2 billion people worldwide, making it one of the most trusted communication platforms.
Adding WhatsApp chat to your Divi website creates an instant, familiar connection point for your visitors.
When someone lands on your site and has a question, they can reach out immediately using an app they already know and trust. This removes the friction of filling out contact forms or waiting for email responses.
Connect with Visitors on Their Preferred Platform
Research shows that 90% of customers want to use messaging to communicate with businesses. By offering WhatsApp chat, you’re meeting your audience where they already are.
Here are the key benefits:
- Instant Communication: Visitors can ask questions and get answers in real-time without leaving your site.
- Higher Engagement Rates: People are more likely to start a conversation on a platform they use daily.
- Mobile-Friendly Experience: WhatsApp works seamlessly on smartphones, which is how most people browse websites today.
Increase Response Rates and Customer Engagement
Traditional contact methods like email often result in low response rates and delayed conversations. Visitors send a message and then wait hours or even days for a reply.
WhatsApp chat solves this problem by enabling instant messaging. You can respond quickly, and visitors receive immediate notifications on their phones.
| Communication Method | Average Response Time | Typical Open Rate |
|---|---|---|
| 24-48 hours | 20-30% | |
| Contact Form | 12-24 hours | 15-25% |
| WhatsApp Chat | Under 5 minutes | 70-80% |
The difference is clear – WhatsApp delivers faster responses and higher engagement rates than traditional methods.
Build Trust Through Real-Time Support
When visitors see the WhatsApp logo on your website, they immediately recognize it as a trusted platform. This recognition helps put them at ease and makes them more willing to reach out.
Real-time support also shows visitors that you’re available and responsive. This builds confidence in your business and increases the likelihood that they’ll choose your services over competitors.
What You Need Before Getting Started
Before you add WhatsApp chat to your Divi website, you’ll need to gather a few things. Here’s what you’ll need to have in place:
- Active WordPress website with Divi installed: A visual page builder for WordPress created by Elegant Themes
- WPChat plugin: A WordPress plugin designed specifically for adding WhatsApp chat functionality to your site with full customization options.
- WhatsApp Business Account (Optional but recommended): A business account gives you access to features like automated greetings and away messages
- Your WhatsApp phone number: This is the number visitors will use to contact you through the chat widget on your site.
Why Use WPChat?
WPChat is a WordPress plugin that allows you to add a customizable WhatsApp chat assistant to any WordPress website, including those built with Divi.
The plugin makes it easy to connect with visitors without any technical knowledge. Here are the key features WPChat offers:
- Visual customization: Change colors, styles, and layouts using a simple point-and-click interface.
- Multi-agent support: Add multiple team members so visitors can pick who to chat with based on their needs.
- Supports major platforms: Connect your website to the biggest chat platforms out there: WhatsApp, Telegram, Instagram, and Facebook.
- FAQ integration: Add frequently asked questions that appear before the chat starts, reducing repetitive inquiries.
- Mobile-responsive design: The chat widget automatically adjusts to look great on phones, tablets, and desktop computers.
- Page-specific visibility controls: Show or hide the chat assistant only on specific pages, posts, or categories to target the right audience.
- GDPR compliance features: Built-in privacy options help you meet data protection requirements and build visitor trust.
And that’s just the start. You get even more features with WPChat that let you get the most out of your chat assistant.
Get started with WPChat today and connect WhatsApp to your Divi website with ease.
How to Add WhatsApp Chat to Your Divi Website (Step-by-Step)
With that, it’s time to get started with the tutorial. Just follow the steps below, and you’ll have a WhatsApp chat feature on your website in no time.
Step 1: Install and Activate WPChat on Your Website
The first step is getting WPChat on your WordPress site. Start by getting a copy of the WPChat plugin from here.
Once you’ve purchased the plugin, save the plugin file to your computer. Then, install and activate it on your WordPress site (see our beginner’s guide).
Step 2: Create a WhatsApp Chat Assistant
Now that WPChat is installed, you can set up your chat assistant.
Go to the WPChat menu in your WordPress dashboard and click on the Set Up button.
You’ll see a field asking for your WhatsApp number. Enter your WhatsApp number in the provided field, making sure to include your country code.
Then, click on the Next button to continue.
On the next screen, you’ll choose a visual theme for your chat widget. Pick the theme (Basic, Night, or Pastel) that best matches your website’s design.
The preview on the right side shows you how each theme will look on your site.
Once you’ve selected a theme, click Next to continue.
Step 3: Choose Where Chat Assistant is Visible
Now you’ll decide where the WhatsApp chat option appears on your website. This gives you control over which pages show the chat option to visitors.
Choose a visibility option from the two available choices: Display on all pages or Display only on specific pages.
If you select Display only on specific pages, you can pick the Pages, Tags, Categories, and Custom Post Types where the assistant is visible.
Once you’ve made your selections, click on Next.
But if you decide to show WhatsApp assistant on all pages, you can use the filters to exclude specific parts of your website.
After you do that, click on Next to continue.
On the final setup screen, you’ll need to activate your WPChat license. Enter the WPChat license key in the provided field.
Then, click on Complete Setup to complete the setup process.
Your WhatsApp chat widget is now live on your Divi website. However, you’ll probably want to customize how it looks to match your brand.
Step 4: Customize Your WhatsApp Chat
Since a huge plus point of Divi is the easy and powerful customization, it makes sense that your WhatsApp assistant is customizable as well.
To do this, WPChat gives you a live editor where you can see changes as you make them.
Click on the Customize button to open the live editor.
You’ll see all the customization options on the left along with a live preview of the chat assistant on the right.
Adjust the Color Palette
The first thing you’ll want to customize is the color scheme. Click on Color Palette in the left menu to see your color options.
WPChat provides several pre-made color palettes that work well with popular design styles. Choose one of the pre-made color palettes by clicking on it.
If none of the preset palettes match your brand, click on Custom to pick your own colors.
Once you’re happy with the colors, click on Save to apply them to your chat widget.
Customize Visible Sections
Next, you can control which parts of the chat widget are visible.
Click the Back button to return to the main customization menu.
Look for the Sections option on the left side of the screen. This is where you can hide or rearrange different parts of the chat assistant.
Uncheck any parts you want to hide, such as the FAQ section or the chat option.
You can also rearrange sections by dragging them up and down to change their order.
This helps you create a cleaner, more focused chat experience for your visitors. Click on Save to store your changes before moving on.
Step 5: Finish Setting Up WhatsApp Chat Assistant
You’re almost done. Now you’ll add some finishing touches that make your chat widget more helpful and personalized.
Add Frequently Asked Questions
Adding FAQs to your chat widget helps visitors get instant answers without needing to message you.
First, open the WPChat » Frequent Questions menu from your dashboard and click on Add Question.
You’ll see fields where you can type in a common question and its answer.
For example, you might add “What are your business hours?” with your hours as the answer.
These FAQs appear in the chat widget before visitors start a conversation.
This approach helps you provide instant answers to common questions and reduce the load on your support team. Add as many questions as you need to cover the most frequent inquiries you receive.
Customize Your Chat Agents
Finally, you’ll want to personalize the agents who appear in your chat assistant. These agents are basically the representation of your support team for your visitors.
First, navigate to the WPChat » Agents menu in your WordPress dashboard.
You’ll see a default agent already set up. Click on Edit to customize the default agent with your information.
First, add a profile picture that represents you or your brand.
Click on Upload to select a fitting profile image for your agent from your computer.
Then, type in a name for your agent in the field below the image.
This could be your name, a team member’s name, or something like “Support Team” if multiple people handle messages.
If you scroll down from here, you can connect this agent to other messaging platforms, like Telegram, Facebook, and Instagram.
You can also add multiple agents if different team members handle different types of inquiries. Visitors will be able to choose who they want to chat with based on their needs.
With that, you can open your Divi website and check out how your new WhatsApp chat assistant looks.
Final Thoughts
Now you know how to add WhatsApp chat to your Divi website using WPChat. By following these steps, you’ve created an easy way for visitors to connect with you on a platform they already trust and use every day.
WPChat makes it simple to customize your chat widget, manage multiple agents, and provide instant answers through FAQs.
This helps you build stronger relationships with your audience and turn more visitors into customers.
Ready to get started? Get WPChat today and start connecting with your visitors in real-time.
Want to make your Divi website even more engaging? Check out this guide on how to create chat funnels for your website.
