Adding WhatsApp chat in Elementor lets your site visitors message you directly from any page, turning casual traffic into qualified leads and faster customer support replies. This guide shows you the fastest free method that works with Elementor Free, plus how to style and target the chat button to match your brand.
WhatsApp chat in Elementor is a floating message button you embed on your WordPress site so visitors can start a one-tap WhatsApp conversation with your team without leaving the page. It works on desktop and mobile, opens the WhatsApp web app or mobile app automatically, and removes the friction of contact forms or email replies.
WhatsApp is one of the most widely used messaging platforms in the world, which makes it a familiar channel for buyers in nearly every region. When you add it to your Elementor site, you give visitors a contact method they already trust and use daily.
This walkthrough uses WDesignKit by POSIMYTH Innovations, which ships a free WhatsApp Chat widget that drops straight into the Elementor editor. No Elementor Pro required.
All instructions in this article were last verified in May 2026 on WordPress 6.9 with WDesignKit 2.3 and The Plus Addons for Elementor 6.4.
What Is a WhatsApp Chat Widget in Elementor?
A WhatsApp chat widget in Elementor is a customizable button or floating popup that lets your visitors start a WhatsApp conversation with a single click. Once the user taps the button, WhatsApp opens with a pre-filled message addressed to your team’s WhatsApp number, ready to send.
Unlike a plain “Contact Us” form, the WhatsApp widget moves the conversation into a channel your visitor already lives in, which usually means faster replies on both sides and a record of the chat saved on their phone for future reference.
Why Add WhatsApp Chat to Your Elementor Site?
A WhatsApp chat button on your Elementor site shortens the gap between interest and conversation. Visitors who would not fill out a form will often message you on a channel they already use, which improves lead capture, support speed, and post-purchase engagement.
Specific benefits to expect after adding the widget:
- Faster customer support: Real-time replies replace email back-and-forth and shorten ticket resolution time.
- Higher lead capture: Visitors who skip contact forms will often send a one-line WhatsApp message asking about pricing or availability.
- Order and delivery inquiries: WooCommerce stores can answer product, shipping, or refund questions before the cart is abandoned.
- Post-sale assistance: Customers can reach you for setup, troubleshooting, or warranty questions without searching for a support email.
- Trust and credibility: A direct messaging channel signals that a real team is behind the site.
- Localized communication: Multi-agent setups let regional teams handle chats in the visitor’s preferred language.
- Feedback collection: Casual WhatsApp replies surface honest feedback that survey forms rarely capture.
How to Add WhatsApp Chat in Elementor (Step-by-Step)
The fastest free way to add WhatsApp chat in Elementor is to use the WhatsApp Chat widget from WDesignKit by POSIMYTH Innovations. The widget is free, works with Elementor Free, ships with full styling controls, and supports multiple agent numbers out of the box.
Before you start, install and activate the WDesignKit plugin from your WordPress dashboard at Plugins → Add New → Search “WDesignKit”, then download and activate it. The free version is enough for this entire walkthrough.
Prefer video? Watch the full setup below.
Step 1: Sign In to Your WDesignKit Account
Open the WDesignKit plugin from your WordPress sidebar and sign in with your existing WDesignKit account. New users can create an account with an email and password or sign up with Google or Facebook.
The account ties your widget downloads to your site so updates and new widgets sync automatically across every install.
Step 2: Activate the WhatsApp Chat Widget
From the WDesignKit dashboard, open the Widgets section in the header and click Browse Widgets.
Type WhatsApp into the search bar and click the download icon on the WhatsApp Chat widget card.
Open My Widgets to confirm the WhatsApp Chat widget shows as installed.
Step 3: Add the WhatsApp Widget to Your Elementor Page
Open any WordPress page or post and click Edit with Elementor. In the widget panel on the left, search for WhatsApp, then drag the WhatsApp Chat widget onto the page. You can also add it from the Navigator panel if you prefer a tree view of all the elements on the page.
Step 4: Configure the Chat Content
The widget settings live in the left sidebar under three tabs: Content, Style, and Advanced. The Content tab controls the text and the chat behavior, the Style tab controls colors and typography, and the Advanced tab controls layout, motion, and custom CSS.
In the Content tab, expand the Toggle Button section first:
- Text: The label shown next to the floating chat icon, such as “Chat with us” or “Get a quote.”
- Icon Type: Pick a built-in icon, upload an SVG, or leave the button text-only.
- Show Dot: Toggle the red notification dot that draws attention to the chat button.
- Default Enable: Open the chat window automatically when a visitor lands on the page.
Next, expand the Content section to set what the chat window itself shows to the visitor:
- Avatar Image: Upload a profile photo of the team member who handles chats. A real face usually outperforms a logo for direct-message channels.
- Title: Your business name or the agent’s name shown at the top of the chat popup.
- Verified Icon: Add a custom SVG check icon next to the title to mimic WhatsApp Business verification.
- Subtitle: A short status line like “Replies within 1 hour” or your team’s working hours.
- Subtitle Prefix Icon: A small icon before the subtitle (clock, online dot, or any custom SVG).
Need a custom SVG icon for the Verified mark? Read our walkthrough on how to add custom icons to Elementor.
- Text: The pre-written message shown inside the chat bubble before the visitor starts typing.
- Button: Label for the action button (for example, “Start Chat” or “Message Us”).
- WhatsApp Number: The full international number that will receive the message, with country code and no spaces or symbols.
Step 5: Style the WhatsApp Chat Widget
Open the Style tab to match the widget to your brand. The styling controls are split into six sections, each focused on one part of the chat popup:
- Content Header: Color for the online dot, avatar image dimensions, subtitle font and color, and an optional background image for the header.
- Content Body: Font and color of the default chat message, timestamp visibility, typing loader color, and chat background.
- Content Button: Background color, icon size, border, and padding for the “Start Chat” button inside the popup.
- Popup Background: Solid color, gradient, or image background for the entire chat popup so the widget matches a dark theme, a brand color, or a textured background.
- Toggle Button: Text color, icon size, SVG dimensions, and border style for the floating button itself.
To color the SVG icon to match your brand, read the guide on changing custom SVG icon color in Elementor.
- Extra Option: Width and alignment for the chat popup (left, right, or center, and a custom px or % width).
Step 6: Apply Advanced Customizations
The Advanced tab is where you control layout, responsiveness, motion effects, masks, and custom CSS. This is where you fine-tune the floating button’s position on mobile, add entrance animations, or hide the widget on specific pages with conditional rules.
When the styling is done, click Update (or Publish on a new page) at the bottom of the Elementor editor sidebar to push the chat live.
Visit the live page to confirm the widget appears in the correct corner, opens cleanly, and routes messages to the right WhatsApp number on both desktop and mobile.
Best Practices for WhatsApp Chat on an Elementor Site
A WhatsApp button only works as well as the team behind it. A few practical rules that turn the widget from decoration into a real lead channel:
- Set realistic reply times in the subtitle. “Replies within 1 hour” is more credible than “Live chat 24/7” if your team is small. Visitors check.
- Use a real photo as the avatar. Faces convert better than logos for direct-message channels because the visitor knows who they are messaging before they hit Send.
- Pre-fill a context-aware message. Open the chat with a line like “Hi! I have a question about [Product Name]” so the agent gets context the moment the conversation lands.
- Hide the widget on the cart and checkout pages. Use the Display Conditions extension in The Plus Addons for Elementor to remove distractions during purchase.
- Route different pages to different numbers. Pricing pages can hit sales, support pages can hit support. Drop a separate widget instance on each template.
- Track clicks as conversions. Use the GA4 Event Tracker (Pro) in The Plus Addons for Elementor to capture WhatsApp button clicks as a conversion event without writing code.
If you also want to pair the chat button with social proof, the Google Reviews widget in The Plus Addons for Elementor by POSIMYTH Innovations places live reviews next to the chat trigger, which lifts message rates by giving the visitor a reason to engage with your team.
![How to add whatsapp chat in elementor [free]](https://theplusaddons.com/wp-content/uploads/2023/05/20-Checklist-for-WordPress-Site-Maintenance-1024x1024.jpg "How to Add WhatsApp Chat in Elementor [FREE]")
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance.
Should You Add WhatsApp Chat to Your Elementor Site?
If your audience uses WhatsApp daily and your team can answer messages within business hours, the WhatsApp chat widget is one of the highest-impact additions you can ship on an Elementor site. It is free with WDesignKit, takes about 10 minutes to set up, and starts capturing leads the same day.
Best for: service businesses, agencies, WooCommerce stores, real estate sites, education and coaching brands, and any local business where buyers expect direct contact.
Not for: sites with no team to monitor messages, or B2B accounts where buyers prefer email trails. A neglected chat widget is worse than no chat widget.
To extend the same Elementor site with more conversion-focused widgets (Pricing Tables, Countdown Timers, Popups, Display Conditions, GA4 Event Tracker, and more), explore the 120+ widgets in The Plus Addons for Elementor by POSIMYTH Innovations or compare the Free vs Pro plans to see which fits your stack.
Check out the Complete List of 120+ Widgets and Extensions here. Start building your dream website without coding!
![Top 3 Elementor Education Templates [Complete Kit]](https://theplusaddons.com/wp-content/uploads/2025/06/Elementor-Education-Templates.jpg)
![Top 3 Elementor Medical Templates [Complete Kit]](https://theplusaddons.com/wp-content/uploads/2025/06/Elementor-Medical-Templates.jpg)
![Top 3 Elementor SaaS Templates [Complete Kit]](https://theplusaddons.com/wp-content/uploads/2025/06/Elementor-SaaS-Templates.jpg)
![Top 3 Elementor Fashion Templates [Complete Kit]](https://theplusaddons.com/wp-content/uploads/2025/06/Elementor-Fashion-Templates.jpg)
![Top 3 Elementor Business Templates [Complete Kit]](https://theplusaddons.com/wp-content/uploads/2025/06/Elementor-Business-Templates.jpg)
![Top 3 Elementor Agency Templates [Complete Kit]](https://theplusaddons.com/wp-content/uploads/2025/06/Elementor-Agency-Templates.jpg)
![Top 3 Elementor Photography Templates [Complete Kit]](https://theplusaddons.com/wp-content/uploads/2025/06/Elementor-Photography-Templates.jpg)
![Top 3 Elementor Architecture Templates [Complete Kit]](https://theplusaddons.com/wp-content/uploads/2025/06/Elementor-Architecture-Templates.jpg)