# How to Add WhatsApp Chat in Elementor [FREE]

## Key Takeaways

- WDesignKit plugin enables easy integration of WhatsApp Chat in Elementor for free.
- Elementor WhatsApp chat feature enhances customer support, order inquiries, and lead generation.
- Customization options include toggle button text, icon type, and chat window settings in Elementor Editor.
- Advanced styling options allow users to modify colors, fonts, and layouts for the WhatsApp widget.
- The Plus Addons offers over 120 additional widgets to enhance website functionality alongside WDesignKit.

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**](https://wordpress.org/plugins/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.*

Table Of Contents

## 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.

![Benefits of integrating WhatsApp chat on an Elementor website](https://theplusaddons.com/wp-content/uploads/2025/01/Benefits-of-Integrating-whatsapp-chat-on-Website.png)

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.

![WhatsApp chat widget from WDesignKit displayed in the Elementor editor](https://theplusaddons.com/wp-content/uploads/2025/01/Integrate-WhatsApp-Chat.png)

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.

https://youtu.be/jKomtSX2XaI?si=QQm5pfrmkN74EcWY

### 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.

![WDesignKit account sign-in screen](https://theplusaddons.com/wp-content/uploads/2025/01/WDesignKit-account-1.png)

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***.

![WDesignKit dashboard header showing the Widgets tab](https://theplusaddons.com/wp-content/uploads/2025/01/Activate-the-WhatsApp-Widget.png)

![Browse Widgets option in WDesignKit](https://theplusaddons.com/wp-content/uploads/2025/01/Browse-Widgets.png)

Type **WhatsApp** into the search bar and click the **download** icon on the WhatsApp Chat widget card.

![Downloading the WhatsApp Chat widget from WDesignKit](https://theplusaddons.com/wp-content/uploads/2025/01/click-on-the-download.png)

Open ***My Widgets*** to confirm the WhatsApp Chat widget shows as installed.

![WDesignKit My Widgets section with WhatsApp Chat installed](https://theplusaddons.com/wp-content/uploads/2025/01/My-Widgets.png)

### 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.

![WhatsApp Chat widget in the Elementor Navigator](https://theplusaddons.com/wp-content/uploads/2025/01/WhatsApp-option-in-the-Navigator-1.png)

### 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:

![WhatsApp toggle button settings in Elementor](https://theplusaddons.com/wp-content/uploads/2025/01/default-WhatsApp-messages-font-and-color-1.png)

- **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**](https://theplusaddons.com/blog/add-custom-icons-to-elementor/).*

![Setting an avatar and verified icon for the WhatsApp Chat widget](https://theplusaddons.com/wp-content/uploads/2025/01/add-an-icon.png)

- **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.

![Configuring the WhatsApp number and button text in Elementor](https://theplusaddons.com/wp-content/uploads/2025/01/edit-text-displayed-on-the-button.png)

### 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 Header styling for the WhatsApp Chat widget](https://theplusaddons.com/wp-content/uploads/2025/01/Style-the-WhatsApp-Chat-Widget.png)

- **Content Body:** Font and color of the default chat message, timestamp visibility, typing loader color, and chat background.

![Content Body styling controls for the WhatsApp widget](https://theplusaddons.com/wp-content/uploads/2025/01/Content-Body.png)

- **Content Button:** Background color, icon size, border, and padding for the "Start Chat" button inside the popup.

![Content Button styling controls in the WhatsApp widget](https://theplusaddons.com/wp-content/uploads/2025/01/Content-Button.png)

- **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.

![Popup background options for the WhatsApp Chat widget](https://theplusaddons.com/wp-content/uploads/2025/01/Popup-Background.webp)

- **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**](https://theplusaddons.com/blog/how-to-color-custom-svg-icons-in-elementor/).*

![Toggle Button styling controls](https://theplusaddons.com/wp-content/uploads/2025/01/Toggle-Button.png)

- **Extra Option:** Width and alignment for the chat popup (left, right, or center, and a custom px or % width).

![Extra Option settings for WhatsApp Chat widget alignment](https://theplusaddons.com/wp-content/uploads/2025/01/Extra-Option.png)

### 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.

![Advanced tab customizations for the WhatsApp Chat widget](https://theplusaddons.com/wp-content/uploads/2025/01/Make-Advanced-Customizations.png)

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.

![Update button at the bottom of the Elementor editor sidebar](https://theplusaddons.com/wp-content/uploads/2025/01/Click-on-Update.png)

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](https://theplusaddons.com/elementor-extras/display-conditions/) 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](https://theplusaddons.com/elementor-widget/google-reviews/) 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.

![](https://theplusaddons.com/wp-content/uploads/2023/05/20-Checklist-for-WordPress-Site-Maintenance-1024x1024.jpg)

##### Do you Manage WordPress Websites?
Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance.
​

[contact-form-7]

Field LabelSend Me the eBook

## 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](https://theplusaddons.com/elementor-widget/) by POSIMYTH Innovations or compare the [Free vs Pro plans](https://theplusaddons.com/free-vs-pro/) to see which fits your stack.

Check out the [**Complete List of 120+ Widgets and Extensions**](https://theplusaddons.com/elementor-widgets/) here. Start building your dream website without coding!