How to Add WhatsApp Chat in Elementor [FREE]

Updated on January 2, 2025 by Editorial Team

Are you looking for a way to make it easier for your website visitors to connect with you instantly? Then, adding a WhatsApp chat button or feature to your site is a smart move.

With over 2 billion users worldwide, WhatsApp is one of the most popular messaging platforms, making it a familiar and trusted choice for users.

Adding WhatsApp chat in WordPress allows your site visitors to contact you or your team effortlessly, ensuring faster, more personalized, and more secure interactions.

In this blog, we’ll walk you through the steps on how to add WhatsApp chat in Elementor for free!

So, let’s get started!

Table Of Content

What is WhatsApp Chat integration in Elementor, and why is it useful?

If you’re using the Elementor page builder on your WordPress website, you can easily add WhatsApp chat with third-party plugins.

WhatsApp Chat feature can benefit your site in several ways.

Here are some reasons why adding a WhatsApp chat can be useful:

Benefits of integrating whatsapp chat on website how to add whatsapp chat in elementor [free] from the plus addons for elementor
  • Quick Support: Real-time chats enable you to resolve queries or technical issues promptly, enhancing customer satisfaction.
  • Order Inquiries: The WhatsApp chat feature is quite useful for eCommerce websites, as customers can ask questions about products, delivery, or returns directly.
  • Lead Generation: Engage instantly with your potential clients, thus maximizing the chances of converting visitors into customers.
  • Feedback Collection: Allow users to submit feedback or reviews through personal chats.
  • Build Trust: Direct communication builds credibility, showing that your business is accessible and approachable.
  • Event Registration or Queries: Help users with event signups or answer questions about the event details.
  • Post-Purchase Assistance: Offer after-sales services like installation help, troubleshooting, or product guidance through WhatsApp.
  • Localized Communication: Communicate in a preferred language or time zone to cater to specific audience needs.

WhatsApp is a familiar tool, so users are more likely to engage with you without hesitation.

With WhatsApp Chat integration, your website becomes a powerful hub for communication, offering users the ease of contacting you while you benefit from better engagement and stronger customer relationships.

How to Integrate WhatsApp Chat in Elementor [Step-by-Step]

You can easily add a WhatsApp chat button to your Elementor site for free through the WDesignKit plugin.

Its WhatsApp Chat widget is simple to set up and is lightweight.

You can customize it fully using Elementor or tweak it with code if needed. It supports cross-browser compatibility, loads quickly, and is SEO-friendly.

The widget also supports multiple agents, so your team can handle chats easily.

Integrate whatsapp chat how to add whatsapp chat in elementor [free] from the plus addons for elementor

Before we learn how to add WhatsApp chat to your site, the first thing to ensure is you have installed and activated the WDesignKit plugin on your WordPress website.

Rest, you can continue reading…

Now, let’s proceed with instructions to add the WhatsApp chat widget by WDesignKit.

Alternatively, if you want to watch a video for instructions, you can watch the video here:

And in case, you want textual steps, read along..

Step 1: Log in to your WDesignKit account

The first step is to log in to your WDesignKit account. If you don’t have an account on WDesignKit, you can sign up to create a new account.

Alternatively, you can also sign up with your Google or Facebook account.

Wdesignkit account 1 how to add whatsapp chat in elementor [free] from the plus addons for elementor

Once done, Log in to your account by entering the email and password.

Step 2: Activate the WhatsApp Widget

After you log in, you’ll see this interface.

Activate the whatsapp widget how to add whatsapp chat in elementor [free] from the plus addons for elementor

Then click on Widgets in the header section of the interface. Next, select the Browse Widgets option.

Browse widgets how to add whatsapp chat in elementor [free] from the plus addons for elementor

In the search bar, type WhatsApp, and then click on the download icon to download the WhatsApp Chat widget for Elementor.

Click on the download how to add whatsapp chat in elementor [free] from the plus addons for elementor

To ensure your widget is downloaded, you can check it in My Widgets.

My widgets how to add whatsapp chat in elementor [free] from the plus addons for elementor

Step 3: Add the WhatsApp Widget to the Elementor page

Open the page where you want to add WhatsApp chat widget.

Then choose Edit with Elementor option.

In the Elementor Editor, drag and drop the widget or simply choose the WhatsApp option in the Navigator.

Whatsapp option in the navigator 1 how to add whatsapp chat in elementor [free] from the plus addons for elementor



Step 4: Edit the Whatsapp Chat

In the left sidebar of the Elementor Editor, you’ll get 3 tabs – Content, Style, and Advanced.

In the Content tab, you’ll get the 2 options – Toggle Button and Content.

Opening the Toggle Button option, you’ll get the following sub-options:

Default whatsapp messages font and color 1 how to add whatsapp chat in elementor [free] from the plus addons for elementor
  • Text – This option lets you add a text of your choice to the toggle button.
  • Icon Type – Here, you can choose to add an icon in the toggle button or leave it as it is. If you choose an icon, then an upload option will open where you can add an icon.
  • Show Dot – It lets you show or hide the red notification dot over the toggle button.
  • Default Enable – This option lets you keep the chat window open by default whenever users enter the webpage.

Next, opening the Content Tab, you’ll get the following sub-options:

  • Avatar Image – Here, you can set your WhatsApp profile pic. It would be better if you use a professional photo.

Recommended Read: How to Fix Blurry Images in Elementor

  • Title – You can set a title in the WhatsApp chat, such as your company’s name or your name.
  • Verified Icon – You can add a verified icon to make your WhatsApp chat more professional and trusted. To do so, you’ll need to add a custom icon.

You can refer to this complete tutorial on how to add a custom icon to your Elementor site to add the Verified icon.

  • Subtitle – Here, you can add more details like designation or text like ‘replies within a day or anything you want to add.
  • Subtitle Prefix Icon – You can add an icon in the prefix of the subtitle.
Add an icon how to add whatsapp chat in elementor [free] from the plus addons for elementor
  • Text – This option allows you to edit the message that will be displayed in the Chat.
  • Button – You can edit text displayed on the button, such as by customizing the text to Let’s Chat or something that matches your brand.
  • WhatsApp Number – Here, you can add your WhatsApp number to ensure that whenever users click on the chat button, they are redirected to WhatsApp.
Edit text displayed on the button how to add whatsapp chat in elementor [free] from the plus addons for elementor

Step 5: Style the WhatsApp Chat Widget

In the Style tab, you’ll find the following sub-options:

  • Content Header – Here, you can style your WhatsApp header section, such as changing the color of the dot on the profile pic, the dimensions of the WhatsApp profile image/pic, the background color, the subtitle’s font and color, or adding an image to the background.
Style the whatsapp chat widget how to add whatsapp chat in elementor [free] from the plus addons for elementor
  • Content Body – This option lets you change the default WhatsApp message’s font and color, time shown in the default message, loader’s color, and background type.
Content body how to add whatsapp chat in elementor [free] from the plus addons for elementor
  • Content Button – Using this option, you can customize the chat’s button color, icon size, border type, background type, and padding.
Content button how to add whatsapp chat in elementor [free] from the plus addons for elementor
  • Popup Background – Here, you can set a custom color, gradient, or even an image as the popup background as per your website’s branding.
Popup background how to add whatsapp chat in elementor [free] from the plus addons for elementor
  • Toggle Button – In this option, you change the toggle button’s text color, icon size, SVG size, border type, and more.

Also, you can refer to this blog to learn how to change custom SVG icons’ color in Elementor.

Toggle button how to add whatsapp chat in elementor [free] from the plus addons for elementor
  • Extra Option – Using this option, you can set the width and alignment of the Whatsapp chat.
Extra option how to add whatsapp chat in elementor [free] from the plus addons for elementor

Step 6: Make Advanced Customizations

In the Advanced tab, you can customize the layout, and border type, add motion effects, mask, or even your custom CSS code and a lot more.

Make advanced customizations how to add whatsapp chat in elementor [free] from the plus addons for elementor



This way, you can easily add WhatsApp chat and customize the WhatsApp chat widget to align with your website’s branding.

Once done with all the changes, hit the Update (or Publish) button present at the bottom of the Elementor Editor’s sidebar.

Click on update how to add whatsapp chat in elementor [free] from the plus addons for elementor

Now, you’re all set.

20 checklist for wordpress site maintenance how to add whatsapp chat in elementor [free] from the plus addons for elementor
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​



    Wrapping Up

    Adding a WhatsApp chat widget can make your website more interactive and user-friendly, giving you an edge over competitors.

    WDesignKit makes it easy to add a WhatsApp Chat widget in Elementor for free, with options to customize it to suit your needs.

    Whether you’re a beginner or prefer adding custom code, this widget by WDesignKit is designed for all types of users.

    That’s not all, WDesignKit also offers over 150+ widgets and 1000+ templates to help you create world-class websites easily.

    The Plus Addons seamlessly integrates with all WDesignKit widgets.

    To further enhance your website’s functionality and interactivity, explore The Plus Addons’ widgets like Event Tracker, Testimonial Carousel, Progress Bar, Pricing Table, and more.

    With over 120 Elementor widgets, The Plus Addons provides useful tools to elevate your site’s design and features. You can check out the complete list here.

    Check out the Complete List of 120+ Widgets and Extensions here. Start building your dream website without coding!

    FAQs on Adding WhatsApp Chat in Elementor

     How to integrate WhatsApp in a website?

    You can integrate WhatsApp by adding a widget with third-party plugins like the WDesignKit and customize it fully. Alternatively, you can add a chat button using Elementor and embed a direct WhatsApp link with a custom message, but this method offers limited customization.

    Can I add a WhatsApp Chat button without using any plugins?

    Yes, you can create a WhatsApp Chat button manually by adding a custom HTML widget in Elementor and linking it to your WhatsApp number using a URL format like https://wa.me/<YourNumber>.

    How do I link my WhatsApp number to the chat button in Elementor?

    You can easily link your WhatsApp number to the chat button in Elementor third-party plugins like WDesignKit. The plugin redirects your users to your WhatsApp number whenever they click on the chat widget.

    Will adding WhatsApp Chat affect the performance of my Elementor website?

    If implemented correctly, it has minimal impact. However, excessive use of external plugins or scripts can slightly affect page load time. Lightweight plugins are recommended for optimal performance.

    Is it possible to display the WhatsApp Chat button only on specific pages in Elementor?

    Yes, you can control visibility by using Elementor’s display conditions or plugins that allow page-specific settings for widgets.

    Related Blogs