How to Add WhatsApp Chat in Elementor (With and Without Plugin)

WhatsApp chat Elementor is one of the most searched features among WordPress users, and for good reason. Elementor makes it incredibly easy to design beautiful pages, but when it comes to integrating direct messaging tools like WhatsApp, things can get a little… technical. If you’re building a support-driven site, mastering how to add WhatsApp chat Elementor functionality is a huge win.

Luckily, whether you’re a no-code creator, a freelancer, or a WooCommerce store owner, adding WhatsApp chat to your Elementor-built website is totally doable—and you have two great options:

• Without a plugin, for those who prefer full control and minimal load.
• With a plugin for those who want speed, extra features, and WooCommerce support.

In this step-by-step guide, you’ll learn exactly how to add WhatsApp chat to Elementor—the fast, flexible, and frustration-free way.

Why Add WhatsApp Chat to Elementor Pages?

Your Elementor site is beautifully designed—don’t let your contact options slow it down.

Adding WhatsApp chat Elementor support lets you create fast, conversion-friendly experiences right inside your page builder. For users who prefer building without code, this method of implementing WhatsApp chat Elementor is ideal.

Here’s why it’s a smart move:

📞 Real-Time Communication

No waiting for emails or slow form replies. Visitors get instant access to your team or services.

🛍️ Better Conversion Rates

For product pages, landing pages, or sales funnels, having WhatsApp chat can dramatically increase leads and purchases.

📱 Seamless Mobile Experience

Since WhatsApp is already on your visitor’s phone, tapping a chat button is frictionless—no new apps, no new tabs.

🔒 Builds Trust Instantly

Showing a WhatsApp contact option signals that you’re transparent, reachable, and reliable.

How to Add WhatsApp Chat Elementor Without a Plugin

If you want to keep your site lightweight and avoid adding extra plugins, you can manually create a WhatsApp chat button in Elementor using a standard click-to-chat link.

It takes just a few steps and gives you full control over how the button looks and behaves.

🧩 Step A: Generate Your WhatsApp Click-to-Chat Link

WhatsApp allows you to create a special link that opens a chat with your number and even includes a pre-filled message.

🔗 Basic Format:

https://wa.me/<number>?text=<message>

Replace <number> with your full international phone number (no spaces, no + sign).

Replace <message> with a URL-encoded greeting like:

“Hi! I’m interested in your services.”

✅ Example:

https://wa.me/14151234567?text=Hi!%20I’m%20interested%20in%20your%20services.

💡 Use a free tool like urlencoder.org to encode custom messages properly.

🖱️ Step B: Use Elementor Button for WhatsApp Chat Elementor Setup

1. Open your page in Elementor.
2. Drag and drop a Button widget where you want the WhatsApp chat to appear.
3. Under the Link field, paste your generated wa.me URL.
4. Set Button Text (e.g., “Chat with Us on WhatsApp”).
5. Toggle on “Open in New Window” ✅
6. (Optional) Add an icon from Elementor’s library (WhatsApp-style icon or speech bubble).

You can drop your WhatsApp chat Elementor buttons inside landing pages, product pages, or even popups using Elementor widgets.

🎨 Step C: Make It Look Like a Floating Chat Button (Optional)

Want that familiar floating WhatsApp icon in the corner of your site?

Here’s how to create it manually:

1. Assign a custom class to your button (e.g., whatsapp-float)

In the Advanced tab of the Elementor Button settings, set the CSS Class to: whatsapp-float

2. Add this CSS:

Go to Customizer → Additional CSS or Elementor’s Custom CSS (Pro):

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

This pins the button to the bottom-right corner of your page so it’s always visible, just like a chat bubble.

How to Add WhatsApp Chat Elementor with Chat Help Plugin

If you prefer a faster, feature-rich option without writing code, the Chat Help plugin makes it incredibly easy to add WhatsApp chat across your site—including pages built with Elementor.

This method is perfect if you want:

• A floating WhatsApp bubble that works on every page
• WooCommerce integration
• Group invite links
• Full shortcode and styling control
• Zero technical setup

🔧 Step A: Install and Activate Chat Help

1. From your WordPress dashboard, go to Plugins → Add New
2. Search for “Chat Help”
3. Click Install and then Activate

You’ll now see a WhatsApp settings panel as your WordPress dashbaord menu.

🔢 Step B: Configure the Basics

1. Enter your WhatsApp or WhatsApp Business number in international format (e.g., +14151234567)
2. Write a friendly pre-filled message that will appear when users click the button
3. Customize your chat bubble appearance—icon, color, size, position
4. Choose whether the chat bubble should show on:
   • All pages
   • Just desktop or mobile
   • Specific post types or categories

🛒 Step C: Enable WooCommerce WhatsApp Buttons (Optional)

If you run a WooCommerce store, Chat Help can display WhatsApp buttons:

• On product pages
• Inside product loops (category and shop views)

This makes it easy for shoppers to ask product-specific questions, which can help reduce abandoned carts and increase conversions.

🔗 Step D: Add WhatsApp Chat in Elementor Using Shortcodes

Want to place the button inside an Elementor section? The Chat Help plugin is fully compatible with WhatsApp chat Elementor needs, giving you shortcode control inside visual layouts.

1. Drag the Shortcode widget into your layout
2. Paste a shortcode like:

[ctw style="1" primary_color="#118c7e" secondary_color="#0b5a51" padding="7px 18px 7px 10px" number="+8815647788844" timezone="Asia/Dhaka" photo="https://chathelp.themeatelier.net/wp-content/plugins/chat-help-pro/src/assets/image/user.webp" name="Jhon" designation="Techinical support" label="How can I help you?" online="I am online" offline="I am offline" visibility="wHelp-show-everywhere" sizes="wHelp-btn-lg" sunday="00:00-23:59" monday="23:00-23:59" tuesday="00:00-23:59" wednesday="00:00-23:59" thursday="00:00-23:59" friday="00:00-23:59" saturday="00:00-23:59"]

You can use multiple buttons with different messages or numbers throughout your Elementor site—super flexible.

🚀 Why Use Chat Help?

• Beginner-friendly and fast to set up
• Works on any page builder (including Elementor)
• Includes WooCommerce and WhatsApp group support
• Fully customizable without touching code
• Core features are 100% free

Which Method Should You Use?

Both methods—manual and plugin-based—will get WhatsApp chat up and running on your Elementor site. But the right choice depends on your goals, skill level, and site setup.

Here’s a quick side-by-side comparison to help you decide:

📊 WhatsApp Chat in Elementor – Manual vs Plugin Comparison

Feature / Factor	Manual Method (No Plugin)	Chat Help Plugin
✅ Lightweight setup	✔️ No extra plugin installed	✔️ Lightweight and optimized plugin
⚙️ Easy to configure	❌ Requires some basic HTML/CSS	✔️ Point-and-click setup in dashboard
🎨 Design flexibility	✔️ Full control via custom styles	✔️ Built-in styling options
🛍️ WooCommerce integration	❌ Not available	✔️ Buttons on product & loop pages
💬 Pre-filled messages	✔️ Via URL encoding	✔️ Simple form field
📱 Floating chat bubble	✔️ Needs manual CSS	✔️ Built-in with visual settings
👥 WhatsApp group links	❌ Not supported	✔️ Easily added via settings
🧩 Elementor compatibility	✔️ Uses Button/HTML widgets	✔️ Also works with Shortcode widget
🔄 Display conditions	❌ Manual control only	✔️ Show/hide based on pages/devices
🆓 Cost	✔️ 100% free	✔️ Core features are free, Pro version optional

🧠 Choose the Manual Method If:

• You want a fast, plugin-free solution
• You’re comfortable adding links and CSS
• You need a simple WhatsApp button, no extra features

💡 Choose Chat Help Plugin If:

• You want WooCommerce integration or group chat links
• You prefer visual setup with no coding
• You want a floating WhatsApp bubble site-wide
• You need flexibility and scalability

No matter which method you choose, you’re giving your visitors a faster, more personal way to reach you—and that’s always a win. 🏆

Final Thoughts

Adding WhatsApp chat in Elementor is one of the easiest, most effective ways to turn visitors into customers—and now you know how to do it both with and without a plugin.

If you prefer a hands-on, minimal approach, the manual method gives you full control using just a wa.me link and an Elementor Button widget.

But if you want extra features like:

• A floating chat bubble
• WooCommerce product buttons
• WhatsApp group join links
• Shortcode placement anywhere in Elementor…

👉 Then the Chat Help plugin is your go-to solution. It’s free, beginner-friendly, and designed to work seamlessly with Elementor.

Whether you go manual or plugin-powered, WhatsApp chat Elementor integration boosts engagement, trust, and response rates.

Resources & Tools

Here’s everything you need to complete your WhatsApp + Elementor setup:

• 📘 WhatsApp Click-to-Chat Docs: https://faq.whatsapp.com/710038043866685
• 🔗 URL Encoder Tool for Pre-Filled Messages: https://www.urlencoder.org/
• 🧰 Free WhatsApp Icons for Buttons: https://www.flaticon.com/free-icons/whatsapp
• 💬 Chat Help Plugin (WordPress.org): https://wordpress.org/plugins/chat-help/
• 💬 Chat Help Pro Plugin (themeatelier.net): https://chathelp.themeatelier.net/pricing