Elementor gives you amazing control to build beautiful, custom page layouts without touching any code.
However, a great design is only half the battle. If a potential customer has a question, making them search for a contact form can cause them to lose interest and leave your site.
You need a way to connect with them instantly, directly from the pages you’ve so carefully built
That’s where adding a WhatsApp chat button makes all the difference.
Instead of keeping your users waiting, you can meet your visitors on an app they already use and trust every single day.
In this step-by-step guide, I will walk you through how to add a WhatsApp chat button to your Elementor website for instant communication.
Why Add a WhatsApp Chat Button to Elementor
Adding a WhatsApp chat button to your Elementor website creates an instant connection with visitors on a platform they’re familiar with.
After all, WhatsApp is used by over 3 billion users worldwide, so it’s the perfect platform to reach visitors.
On top of that, here’s what you can get from a WhatsApp chat button:
- Instant communication: Meet customers where they already spend time instead of hoping they’ll find your contact form.
- Higher conversion rates: Quick responses to product questions help turn visitors into buyers faster.
- Better customer support: File sharing and real-time messaging make it easier to solve problems quickly.
- Increased engagement: Regular updates and personalized messages keep your audience connected to your brand.
- Professional appearance: A well-designed chat button can fit your Elementor site while showing visitors you’re available and responsive.
All in all, a WhatsApp chat button is a perfect addition to your carefully designed Elementor website, giving visitors an easy way to reach you without leaving the page.
Ways of Adding a WhatsApp Chat Button to Elementor
If you want to add a WhatsApp chat button to your Elementor site, you have 2 ways to do it:
- Manually using Code and API Integration
- Using a WordPress Plugin (Easy Way)
The manual approach means dealing with code and WhatsApp’s Business API, which can be complicated and time-consuming.
You’d need to write custom code, handle API connections, and manage updates yourself.
I’ve talked to business owners who tried this method at first before switching to a plugin after the upkeep took a lot of time and effort.
The good news is that WordPress has an extensive plugin ecosystem that lets you add powerful features without touching any code.
So, you can use the WPChat plugin by Smash Balloon for the easiest way of adding a WhatsApp button to Elementor.
Here’s why WPChat stands out from the alternatives as the best option:
- Easy Setup: Add a WhatsApp chat button in just a few simple clicks without any technical knowledge required.
- Custom Agents: Set up agents with unique names and profile pictures to humanize interactions and help visitors know exactly who they’re talking to.
- Visibility Controls: Fully control where the button appears on your Elementor site, from specific pages to entire sections.
- Design Options: Customize your chat popup colors, themes, and styling to match your site’s look and branding perfectly.
- Performance Analytics: Check detailed reports on how your WhatsApp chat button is performing and track visitor engagement.
- FAQ Integration: Show frequently asked questions before users start chatting to instantly provide answers and reduce repetitive inquiries.
- Chat Funnels: Automatically guide users through structured conversations to generate leads and improve conversion rates.
Best of all, the plugin is 100% compatible with Elementor and all the other popular site builders.
Ready to add WhatsApp chat to your Elementor website?
Get WPChat today and start connecting with your visitors instantly.
How to Add a WhatsApp Chat Button to Your Elementor Website (Step-by-Step)
Now I’ll walk you through the complete process of adding a WhatsApp chat button to your Elementor website using WPChat.
Don’t worry, this method is beginner-friendly, so you won’t have to touch a single line of code.
Let’s get started:
Step 1: Install and Activate WPChat on Your Website
First, you’ll need to get your copy of WPChat from the official website.
Once you have the plugin file, install and activate it on your Elementor website.
Not sure how? You can check out a beginner’s guide on installing WordPress plugins here.
Step 2: Set Up Your WhatsApp Button
Go to your WordPress dashboard and click on the new WPChat menu.
Click on the Set Up button to begin configuring your WhatsApp chat button.
This will take you to the initial setup screen where you can configure the basic settings.
The first thing you’ll need to do is enter your WhatsApp phone number.
Make sure you have the right country code and click on the Next button.
Next, you’ll choose a theme for your chat button:
- Basic: The default clean look that works with most website designs
- Night: A dark theme perfect for modern websites with darker color schemes
- Pastel: A soft design with gentle colors that creates a friendly appearance
Once you pick a theme, click on the Next button.
Step 3: Set Visibility for WhatsApp Chat Button
Now you’ll decide where your WhatsApp chat button appears on your Elementor website.
WPChat gives you two main options for controlling button visibility:
- Display on all pages: Let visitors reach you anywhere on your website.
- Display only on specific pages: Choose specific parts of your site to show the button.
You can scroll down and include or exclude the button from specific Pages, Categories, Tags, and Custom Post Types.
Just click on Next to confirm your selection and proceed.
Finally, enter your WPChat license key that you got with the WPChat plugin.
Once you click on Complete Setup, your new WhatsApp chat button will be ready to go online.
Step 4: Customize Your WhatsApp Chat Button
If you click on the Customize button, you can open WPChat’s live editor and design your chat button in detail.
Using the options in the left panel, you can customize your chat button’s appearance.
The live preview on the right shows you exactly how your changes will look to visitors. That way, customization is quick, easy, and accurate.
Let’s check out a few major customization options for the WhatsApp chat button.
To change the colors of your chat button, click on Color Palette in the left panel.
WPChat offers five pre-designed color schemes to let you quickly change the colors:
- Default
- Mystic Bloom
- WhatsApp Dark
- Minimal
To get more control over the colors, you can click on Custom to manually select your accent.
When you’re done with colors, click on the Save button to keep the changes.
Finally, you can click the Back button in the top left to return to the main customization options.
Next, select the Header section to customize the greeting message.
Type in the perfect heading for your WhatsApp chat button that welcomes visitors and encourages them to start a conversation.
Like before, click on the Save button to confirm your new header.
As you can see, you can customize different elements of your WhatsApp chat button with just a few clicks.
This lets you make sure your button matches your Elementor website’s design perfectly.
Step 5: Add Agents for WhatsApp Chat Button
Instead of just showing a generic chatbot, you can set up individual agents for each member of your support team.
This way, users will know exactly who they’re talking to, which builds trust and creates better relationships with your customers.
To get started, go to WPChat » Agents in your WordPress menu to manage your chat agents.
Click on Edit to customize your existing chat agent and make it reflect a real team member.
You can add a profile picture by clicking Upload and selecting an image from your media library.
Enter the agent’s name in the field below the profile picture. You can use the person’s real name to add a human touch here.
You can also change the WhatsApp number for this specific agent if different team members handle different types of inquiries.
Finally, click on Save Changes, and your agent is good to go.
To add agents, you can click on the New Agent button at the top and repeat the process.
WPChat will automatically assign chats to different agents and balance the workload across your team.
Once you’ve set up your agents, check out your new WhatsApp chat button on your Elementor website to see how it looks and functions for visitors.
Conclusion
With that, you can have a WhatsApp chat button on your Elementor site and transform how you connect with visitors.
You can build trust, boost conversions, and instantly communicate with your visitors on an app they’re already familiar with.
Going forward, you can try out WPChat’s advanced features like FAQ sections and chat funnels to automate more of your customer interactions.
Ready to start connecting with your Elementor website visitors instantly?
Get WPChat for your site today and see the difference direct communication can make for your business.
Want to provide even better support to site visitors? Check out this guide on how to add an FAQ widget to your website.
