One of the biggest barriers to making an online sale isn’t always the price of your product. It’s the small, unanswered questions that cause a potential customer to hesitate.
Imagine being able to answer those questions instantly, right when your customer is most interested.
This is where a WhatsApp Chat Widget comes in.
Unfortunately, I’ve seen many business owners who were intimidated by the idea of adding a chat widget to WordPress—especially those without coding experience.
So, I’ve put together this super easy guide on how to add a WhatsApp chat widget to your WordPress website.
In this Article:
- Easy Way to Add WhatsApp Chat Widget (What You Need to Know)
- How to Add a WhatsApp Chat Widget to WordPress (Complete Step-by-Step Guide)
- Conclusion: Next Steps
Easy Way to Add WhatsApp Chat Widget (What You Need to Know)
Adding a WhatsApp chat widget to your WordPress website lets visitors message you instantly through the app they already use every day.
This removes the friction that stops potential customers from asking questions when they’re most interested in buying.
But manually integrating WhatsApp into your website comes with its own challenges. You’ll need to deal with API keys as well as coding just to get started.
Fortunately, there’s a simple solution that you can use instead: the WPChat plugin by Smash Balloon.
The process is simple: install WPChat, add your WhatsApp Business number, choose where the chat button appears, and customize it to match your brand.
Once it’s live, you’ll be able to handle all conversations through the WhatsApp app you already know.
With that, you can turn website visitors into customers by answering their questions at the exact moment they’re considering a purchase.
Ready to add WhatsApp widgets to your website? Get started with WPChat today!
How to Add a WhatsApp Chat Widget to WordPress (Complete Step-by-Step Guide)
Adding WhatsApp chat to your WordPress website is easier than you might think.
I’ll walk you through each step so you can have your chat widget up and running in less than 5 minutes. Let’s get started!
Step 1: Install and Activate the WPChat Plugin
First, you’ll need to get a copy of the WPChat plugin here.
After doing that, install and activate the plugin (see our beginner’s guide), and you’re ready to get started.
Step 2: Complete the Initial WPChat Setup
Once the plugin is activated, open the new WPChat menu item in your WordPress dashboard.
After doing that, click on the Set Up button to start the simple process.
On the next page, enter your WhatsApp Business phone number in international format (including country code).
Double check that your number is correct, and then click on the Next button.
To make sure your new WhatsApp chat widget looks just the way you want, you can import a theme.
Each of these 3 themes has a unique look and feel:
- Basic: Default look that displays everything clearly
- Night: Pick a widget with dark colors that stand out
- Pastel: Go for pastel colors that are easy on the eyes
Simply pick a theme and click on the Next button.
Plus, you can always change this theme later if needed.
Step 3: Choose Visibility for WhatsApp Chat Widget
Next, you’ll decide where the WhatsApp widget appears on your website. The plugin lets you do this in 2 ways:
- Display on all pages (and add exceptions)
- Display only on specific pages
If you’re not sure which to pick, I recommend showing the widget everywhere and then adjusting based on how your visitors respond.
After you pick a visibility option, scroll down and add the filters.
You can choose to show or hide your WhatsApp widget based on Pages, Categories, Tags, or Custom Post Types.
Finally, click on Next once you’ve set up your filters here.
To finish creating your new WhatsApp chat widgets, you can use the License Key that you got with WPChat.
Enter the license key and click on the Complete Setup button below.
Step 4: Customize Your WhatsApp Widget for Maximum Impact
Customization is where you make the chat widget feel like a natural part of your website.
To help you create chat widgets that suit your website specifically, the plugin lets you choose from lots of customization options.
Ready to get started? First, click on the Customize button on the page.
Doing that will open your widget in the live customizer with all the design options on the left.
Whenever you make any changes, the live preview on the right will show you how it looks.
As a demonstration, I’ll show you a few of the major customization options for the widget.
Personalizing the Assistant Avatar
When a visitor opens your chat widget, they’ll see a helpful assistant that’ll redirect them to the WhatsApp chat.
To customize how it looks, click on the Assistant Avatar option on the left.
From here, you can choose from a collection of pre-built avatars.
Or, you can click on the Add Your Own button to create a custom one.
Now, use the Upload button to add a fitting avatar.
After that, you can enter a name below and click on the Add button.
Finally, click on the small Back button in the top left corner.
Doing that will open the main customization options for your widget once more.
Crafting the Perfect Header Message
Your header message is the first thing visitors see when they hover over your chat widget.
To customize this message, first, open the Header option from the left.
Next, you can just enter whichever header message you want on the left.
I’ll leave it with a basic message for this example.
Not sure what to enter here? Here are a few examples that you can copy:
- E-commerce: “Hi! Need help finding the perfect product? I’m here to help!”
- Service Business: “Ready to get started? Let’s chat about your project!”
- Restaurant: “Questions about our menu or want to make a reservation? Ask away!”
- Real Estate: “Looking for your dream home? Let me help you find it!”
- Consulting: “Have questions about how we can help your business grow?”
- Online Course: “Wondering if this course is right for you? Let’s chat!”
- Healthcare: “Need to schedule an appointment or have questions? I’m here to help!”
Like before, click on Save to keep the changes to your chat widget.
Step 5: Set Up Multiple Chat Agents (Team Management)
You can also create different virtual agents for your WhatsApp chat widget. Each agent can represent a person on your support team.
That way, your visitors can feel like they’re about to talk to a real person, which is great for building trust.
To edit your default agent, open the WPChat » Agents menu and click on Edit.
Next, you can add a more personal touch to your chat agent.
For example, you can click on Upload and then pick a photo for the agent.
Using a company logo can make the widget fit your website’s design and branding.
Or you can use a professional photo to add a human touch to the WhatsApp widget.
After you pick out a profile picture, enter the name and change the phone number if you like.
Finally, click on the Save Changes button, and your agent is good to go!
You can use this dashboard to add new agents, delete existing ones, or edit their info.
Plus there’s a ton of other features to explore. You can provide instant answers with FAQs, guide visitors to conversion using Chat Funnels, and track everything with analytics.
Conclusion: Next Steps
Now that you have the WhatsApp chat widget working on your WordPress website, you’re ready to turn more visitors into customers through instant communication.
The best part? You can start connecting with visitors like this in just minutes without dealing with complicated APIs or coding.
Ready to add WhatsApp chat to your website? Get WPChat here and start converting today!
Want to give your website visitors instant answers for easy engagement?
Check out our step-by-step guide on how to add FAQ widgets to your website here.
