Top 7 Free WhatsApp Chat Widgets & Plugins for Websites in 2024

When you create a website, blog, or shop for your business, there are certain essential website components that not only add value to your business but also help boost conversion rates.

For instance, you might use a countdown widget (to entice urgency & fear of missing out), a website notification bar (to announce special discounts on your store), a contact form creator (to add a Contact Us widget), and testimonials widget generator (to showcase customer reviews).

One of the vital elements of a business is the live chat. It allows website visitors to contact your business representatives or customer service directly in real-time. Among many chat software, you can utilize social messengers like WhatsApp, which is one of the most popular platforms with 2.7+ billion users worldwide, to provide customer service.

Can you add WhatsApp Chat to a website?

Yes, you can. But WhatsApp natively does not provide a widget for websites. So, how do you integrate a WhatsApp Chat widget on your website?

For that, you have to use third-party WhatsApp Chat widget generators and embed the WhatsApp Chat HTML code for the website just before the closing body tag on your website.

Previously, we shared how to add a Telegram Chat widget and the Click-to-call widget to your website. However, in this article, you will find several free WhatsApp widgets for websites, benefits and use cases of WhatsApp Chat widgets, and things to consider when using them.

WhatsApp Chat button vs WhatsApp QR Code

You can have a WhatsApp Chat button or a QR code with an ingrained message and your WhatsApp contact information. Here are the key differences:

The WhatsApp Chat button can be displayed on your website as a floating widget and can be embedded within content. When clicked on it, the user will be directed to the WhatsApp App (installed on their devices) or WhatsApp web (on devices the app is not installed), accessible from whichever device they use. However, with WhatsApp QR code, the user must have a mobile device that is capable of scanning the QR code or have to download the QR code image and scan it online if they are on a desktop device.
With the WhatsApp Chat widget, you can design it to have your profile picture, name, bio, and even a greeting message with a link to helpful resources, which will have a personalized experience for your visitors. by letting them know who will be in contact on WhatsApp. However, QR code cannot be customized like that.
People can download the QR code for WhatsApp contact information and share it with others, leading to a viral effect. However, WhatsApp Chat widgets are embedded on your site.
You can print a QR code image and showcase it in your local store and business place.
A WhatsApp Chat plugin can be customized to have multiple agents and a personalized initial message based on the user’s input. In contrast, WhatsApp QR code data is fixed.

You can use both WhatsApp accessories for your business for marketing campaigns. Use the following QR code generator and make a QR code for WhatsApp by selecting the WhatsApp template.

Why should you use a WhatsApp Chat widget on your website in 2024?

Reason	Benefit	Usecase
Instant Customer Support	A potential customer visiting an e-commerce website has a quick question about a product. With the WhatsApp chat widget, they can instantly connect with a customer support representative to get the information they need, leading to a higher chance of making a purchase. Also, you can create a custom welcome message popup when the potential customer arrives on a specific page, encouraging them to ask questions via the WhatsApp live Chat widget on the website.	A service-based business, such as a salon or a medical clinic, can allow customers to schedule appointments directly through the WhatsApp Chat widget. This makes the process more convenient for customers, who can quickly confirm or reschedule appointments.
Enhanced User Engagement	WhatsApp is a widely used messaging platform (2+ billion global MAUs), and incorporating a chat widget can boost user engagement by meeting them on a platform they are already familiar with.	A blog visitor interested in a particular topic wants to discuss it further or seek additional information. The WhatsApp chat widget enables them to engage in a direct conversation and re-engage since conversion is saved in their WhatsApp accounts. Also, Since WhatsApp is a multi-media messenger, visitors can share screenshots, start a voice call or video call, send large files up to 2GB per file, and even react to messages, leading to a friendly conversation.
Convenient Appointment Scheduling	Businesses can use WhatsApp chat widgets to streamline appointment scheduling and bookings.	WhatsApp is widely used on mobile devices, making it convenient for users to interact with a website via the smartphone chat widget.
Mobile Accessibility	WhatsApp is a global messaging platform (with the #1 messaging app in top leading economies), enabling businesses to connect with a diverse audience regardless of geographical location.	A traveler exploring a hotel website on their mobile device has a question about room availability. The WhatsApp chat widget allows them to inquire instantly, making the booking process seamless, especially when on the go, rather than helpdesk support, which requires logging into the helpdesk software back and forth.
Global Reach	Businesses can use WhatsApp Chat widgets to capture “WhatApp leads” to share promotional offers, updates, and marketing content directly.	WhatsApp is a global messaging platform (with the #1 messaging app in top leading economies), enabling businesses to connect with a diverse audience regardless of geographical location.
Promotion and Marketing	Businesses can use WhatsApp Chat widgets to capture “WhatApp leads” to directly share promotional offers, updates, and marketing content.	An online subscription service promotes a limited-time discount directly through WhatsApp. Marketers can use WhatsApp automation tools to automate messaging and even collect other data such as email addresses and phone numbers and integrate with CRM software via tools like Zapier to reach customers using other communication methods.
Trust and Transparency	Incorporating a WhatsApp Chat add-on adds a human touch to online interactions, unlike most live chat software, which uses AI and bots for communication.	A charity website uses the WhatsApp Chat widget to allow donors to connect directly with the organization via text messaging or call a human representative. This personal touch creates a sense of trust and transparency, encouraging more people to contribute.

4 factors to consider when using WhatsApp Chat on a website

• Use your WhatsApp Business account — This not only gives potential customers trust in your brand but also prevents spam to your personal number. Not to mention that WhatsApp Business provides many features, such as eCommerce, which might be helpful.
• Customize the widget — Add your profile picture, name, a concise bio, and link to your social profiles like LinkedIn & X, a welcome message with a question like How may I help you today? Or Do you have any questions about our product? To get people to respond. Also, consider changing the look and feel of the widget to resonate with your business color palette.
• Concern about user experience — Sometimes, overdoing something or making mistakes can destroy the positive experience on your site. Display the WhatsApp Chat widget on your website on the necessary pages and at the right time. Ensure the WhatsApp Chat button does not overlap with other floating widgets such as sharing buttons, cookie consent management widgets, and email capture teaser boxes. Furthermore, since you would likely use WhatsApp on the entire website or shop, it can impact the loading speed. Load its content after others are loaded by placing the WhatsApp Chat widget’s HTML code just before the closing body tag (</body>). Consider using a script management service like Google Tag Manager.
• Getting Opt-in — One of the benefits of using WhatsApp Messenger on your website is that you can get people to opt-in for future messages from your business. Make sure you carefully read the requirements.

Best WhatsApp Chat Widget Creators to Use Free Today

Elfsight’s WhatsApp Chat Widget

Elfsight is one of the best platforms that provide HTML codes for widgets such as before-after image sliders, photo galleries, age verification popups, and 85+ others. All its widget creators come with responsive templates, layout options, widget customization options, content filters, and even custom CSS and JavaScript input fields.

Elfsight’s WhatsApp Chat Widget is free to use, comes with a visual editor, and requires no coding skills to create a WhatsApp Chat widget for your website.

Features:

• Templates — The WhatsApp widget builder of Elfsight provides 8+ templates based on the design. Some of them are General (the native WhatsApp chat design), Support, Sale, Booking, Onboarding, Embed Chat Button, and Embed Chat window.
• Use your personal or business account — Integrate WhatsApp phone number and short link for personal and business accounts, respectively. Once the user clicks on the CTA button on the WhatsApp Chat widget on your website, the WhatsApp app will open with a conversion with you if the visitor is using a mobile device. Suppose the visitor uses a computer that does not have the WhatsApp application installed. In that case, a window will be opened (on the WhatsApp.com website) with two options: Download WhatsApp to your computer or use WhatsApp Web and start chatting.
• Edit WhatsApp Chat widget — Elfsight offers a variety of options to edit the widget as you prefer. You can change the chat bubble icon, chat representative’s identity, caption (show as currently is online, reply time text or a custom one), and welcome message. Use the Welcome Message to address core questions your visitors might have at the moment.
• Set widget’s position — This feature allows you to change the widget’s type. Floating Bubble (widget will be sticky), Embed Bubble, and Embed Chat window are three options. Also, you can display the widget on the page’s left, center, or right side.
• Display settings — Control where and when to show the WhatsApp Chat widget on your website. It can be shown based on the page, device, and visitor type (new visitors, returning visitors, or all visitors). However, there isn’t an option for targeting the location. Also, you can turn the widget on and off based on the days of the week and even schedule the WhatsApp Chat widget’s appearance with timezone specification, which is a useful feature for businesses to turn it off outside of business hours automatically.
• Customize appearance — Change the look and feel of the widget by changing the font, colors, bubble animation, and button. Also, there are custom CSS and JavaScript for further customization and tracking.
• Widget management, stats, and hiding the WhatsApp widget from the website.

How to create a WhatsApp Chat widget using Elfsight

Use the following WhatsApp widget builder below to make your WhatsApp Chat widget. Select a template, click the “Continue with this template” button, add your WhatsApp number/short link, customize it, and get the embed code.

Or you can sign up on the Elfsight website, search for the “WhatsApp Chat” app from the Apps Catalog, and start designing it. Watch the following video for a demo tutorial:

The HTML embed code

The embed code for WhatsApp Chat will be similar to the below:

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-fe99554-188d-4cec-ae7f-a0ad8885ba158" data-elfsight-app-lazy></div>

It will include two parts: 1) a JavaScript file and 2) an HTML Div tag with a class name. The JavaScript file is used to load resources, and the div tag is used to load the specific WhatsApp Chat tool on the website.

Copy and paste the code footer just before the closing body tag of your website’s theme, template, or source code. It must be embedded on all pages to load the widget on the entire site. You do not need to load the JavaScript file again if other Elfsight widgets, such as background music or a back-to-top button, are currently utilized.

Pricing

Elfsight’s WhatsApp Chat widget is free to use. However, the free plan is limited to 200 page views per month and consists of the Elfsight branding. For more pageviews and to remove the branding, you have to upgrade to a paid plan starting from $6 per month, 5 WhatsApp widgets & 5,000 pageviews/mo.

Click here to try Elfsight’s WhatsApp Chat widget.

CommonNinja’s WhatsApp Chat widget

CommonNinja’s WhatsApp Chat is another tool to create an embeddable WhatsApp Chat widget for your website. CommonNinja is a service similar to Elfsight, with 150+ apps in its library, from engaging users to boosting sales. Its popular apps include weather forecasts, business opening hours, comments, AdBlock detectors, currency converter, and Messenger chat.

CommonNinja’s WhatsApp Chat widget is free, including customization options and integrations with Google Analytics.

Features:

• Change widget’s content — Integrate your WhatsApp account with the phone number, add an initial message, set up contact status (i.e., typically replies instantly), contact image, chat body message (with or without current time), and the button text.
• Customize appearance — Change the look and feel of the widget by using a custom icon, position on the website, background, colors, fonts, sizes, and more. A custom CSS field is under the “Advanced” customization section to add custom styles. CSS class names for each item of the WhatsApp Chat widget of CommonNinja are listed, so there is no need to use the inspect element to find those!
• Integrations with Google Analytics & Mixpanel, analytics, projects to manage brands/websites, widget cloning, and more.

Here’s a video on how to create a WhatsApp Chat widget for your website using CommonNinja.

The embed code is similar to Elfsight’s. There is no need to load the JavaScript part again if other CommonNinja widgets are installed already on the page.

Pricing

CommonNinja’s WhatsApp Chat, like most other apps, is free to use. However, the free plan is limited to one widget per account, up to 300 pageviews, and includes the branding on widgets. To increase the number of views and get access to features like custom CSS, you have to upgrade to a paid plan starting from $10/mo for five apps, one collaborator, and unlimited views.

Click here to try CommonNinja’s WhatsApp Chat widget.

Widgio’s WhatsApp Chat Plugin

Widgio is a site like Elfsight and CommonNinja with 60+ customizable plugins for websites such as popups, email signup forms, Instagram feeds, team showcases, Line Chat, and All-in-One Chat.

Even though features aren’t as powerful as the ones you find in Elfsight and CommonNinja, Widgio lets you build a WhatsApp Chat plugin for your website with its visual builder.

Features:

• Edit content — Integrate through phone number, edit the agent’s name, profile picture, reply time text, and welcome message.
• Styles & appearances — Change the position of the chat widget, colors, and on which devices the widget should be displayed.

Pricing

Widgio’s WhatsApp Chat plugin is free to use, with up to 300 views. You have to upgrade to a paid plan starting from $5 per month for more views.

Click here to try Widgio.

Hoversignal’s WhatsApp Chat

Hoversignal is a no-code website widgets creator with 10+ apps in its library. Some apps are the Easter Eggs, Spinning Wheel, Lucky Lottery, Facebook Reviews, Instagram Feed, Feedback & NPS, and Social Proof Signals.

Hoversignals’ WhatsApp App for the website comes with templates, customization options, custom display rules, and a page-level targeting system.

Widget customization is pretty basic and weak compared to others, such as Elfsight.

Features:

• Edit content — Change the widget’s caption, welcome message, and design.
• Triggers — Set the size of the widget, its position on the page, animation, and icon.
• Location targeting — Specify on which pages and devices the widget should appear.

Pricing

Hoversignal’s WhatsApp App is free to use. However, the free plan is limited to 3,000 impressions. Paid plans start from $19/month and are pretty expensive compared to competitors.

Click here to try Hoversignal.

WP Chat App [WordPress]

If you are looking for a plugin solution to add WhatsApp Chat to your WordPress, the WP Chat App is one of the best out there. It allows you to add multiple profiles for customer service agents, sales reps, and technical support. It is also compatible with popular WordPress cache plugins like LiteSpeed, W3 Total Cache, and WP Rocket. It supports WPML (to translate to available languages) and is compatible with Woocommerce (Add Order on WhatsApp button and more.).

Features:

• Widget types — The WhatsApp floating widget shows the WhatsApp chat widget on selected pages or all pages’ corners, and you can change its position to not distract/conflict with other floating plugins. The WP Chat App block for the Gutenberg page editor allows you to embed chat on the WhatsApp button on content areas such as the sidebar, menubar, and footer.
• GDPR-friendly WordPress WhatsApp plugin — Selling in EU region using WhatsApp Business? No problem! You can enable a built-in GDPR cookie notice checkbox so that the visitors have to tick to agree with your terms and conditions before sending messages.
• Customization — Change the agent’s name & title, color, and greeting message of the widget. Also, you can set pre-filled messages with dynamic shortcodes.
• Woocommerce integration — This integration allows you to add an “Order on WhatsApp” button on WooCommerce product pages, choose a specific agent/expert for products, and display the WooCommerce WhatsApp button after the ‘Add to cart’ CTA button.
• Multiple agent accounts, control which pages the widget should appear on, and more.

WP Chat App plugin is free to use, and there is a Pro edition with extra features such as event tracking and custom availability & working hours.

Click here to download the WP Chat App WhatsApp plugin for WordPress.

JoinChat [WordPress]

JoinChat offers one of WordPress’s best WhatsApp Chat widgets with robust features, advanced customization, custom triggers, dynamic variables, opt-in text, QR code, and Wocommerce integration.

Features:

• Settings at page or archive level — Change main settings for the WhatsApp Chat box on every Post, Page, Product, or Custom Post Type and Tag or Category archive page.
• Customize widget — Show a notification (use a balloon on the button to get the visitor’s attention), custom Call-to-Action buttons on each page, custom conversion start message and change the message with dynamic variables, change WhatsApp icon, colors, sizes, widget position and more.
• GDPR-compliance and opt-in text — Opt-in is a user’s consent to receive messages from a business. You can make it mandatory and turn off contact until the user accepts it.
• Chat triggers — The JoinChat plugin has three chat triggering options:
  1. On page load (by URL) – e.g., using a query parameter such as ?joinchat=5 (in which 5 indicates 5 seconds in delay for WhatsApp Chat widget window) or query hash #joinchat to show chat window.
  2. On click – Use either class “joinchat_app” or link href “#whatsapp” to directly launch WhatsApp and class “joinchat_open” or link href “#joinchat” to open JoinChat CTA. Also, you can set a custom phone (e.g., data-phone= “99999999”) and initial message (e.g., data-message= “Only for this trigger message”) for direct WhatsApp triggers.
  3. On scroll – Opens the embedded WhatsApp Chat widget when a specific element appears on the screen. Use class “joinchat_show” to open Joinchat CTA for the first time and class “joinchat_force_show” to show it consistently.
• Theme colors and automatic dark mode — Choose a color (preferably your brand color), and with WhatsApp Chat, the widget builder will automatically customize the entire visual theme of the widget. Also, the JoinChat plugin provides a dark mode that displays the chat window with dark colors and white text. Furthermore, you can enable the plugin to automatically detect the device’s configuration and set the color mode accordingly.
• Multi-language and RTL support — The plugin is compatible with WPML and Polylang, and RTL languages are also supported.
• Analytics integration — Automatically send events to Google Analytics, Google Tag Manager, and Facebook Pixel when the user opens WhatsApp. Create your own custom events or add event parameters.
• Wocommerce integration — Add a WhatsApp Contact button directly on your product page next to the “Add to cart” button or choose the best position, even on products without a price.
• Custom CSS, preview WhatsApp widget before publishing, and more.

JoinChat is free to use and can be downloaded directly from WordPress plugins. Also, JoinChat offers premium add-ons such as Chat funnels (a messaging chatbot), integrate multiple WhatsApp accounts for agents, random phone, omnichannel (add more contact channels like TikTok, Telegram, Facebook, SMS, phone, Skype, FaceTime), and CTA extras (display links, videos, image and embedded content from other platforms such as Calendly, surveys, forms, quizzes, rating box).

Click here to download JoinChat.

CodePen

CodePen is a platform where coders can share their projects with source code (HTML, CSS, and JavaScript), and people can use the code on their projects. These projects are called “Pens” in CodePen.

CodePen features various pens, such as patterns for backgrounds, image galleries, sliders, and much more.

Some professional web designers have shared pens to embed WhatsApp Chat popups on a website.

Here is one of them:

See the Pen Whatsapp-button by César Henrique Maranho (@cmaranho) on CodePen.

More WhatsApp Chat Plugins and Widgets

Here are more tools that allow you to create WhatsApp Chat buttons, popups, and floating widgets. Note that some of the following items lack customization features and also might require a paid membership to use.

1. Fouita — Fouita is a site like Elfsight with 50+ widgets for websites. Its All-in-One Social Chat plugin features WhatsApp as a messaging channel. Select the WhatsApp, add your phone number, customize the widget, and get the embed code.
2. Wati — Wati’s WhatsApp Chat button generator allows you to create an embeddable floating widget with a welcome message and pre-filled text. Even though its features are limited and contain the branding on the widget, if you are looking for a basic WhatsApp Chat button for a website, Wati is a good option to consider.
3. TimelinesAI — This website offers a free WhatsApp widget with an option to add multiple contacts. Apart from the widget for WhatsApp messenger, TimelinesAI provides a variety of other WhatsApp-related tools & services such as WhatsApp inbox (for multiple devices), workspaces (and agent collaboration), WhatsApp group chat, ChatGPT + WhatsApp Autoresponder, and many others to utilize WhatsApp channel in your marketing campaigns.
4. DelightChat — DelightChat is another service that provides free WhatsApp Chat buttons and floating widget generators that can change color, CTA text, button position, and greeting text.
5. GetButton — GetButton provides a floating Chat button for WhatsApp, Facebook, Line, Telegram, etc. Its WhatsApp website widget-maker lets you add multiple agents (and set avatar, position, and pre-fille message for each agent), customize buttons, set display frequency, track clicks in Google Analytics, and more. However, the widget costs $3.99 per month, billed annually.

What is the best WhatsApp Widget for your website?

It depends on your requirements.

For example, suppose you want to provide more than WhatsApp as a communication channel on your site, such as email, Telegram, Facebook Chat, etc. In that case, I recommend an all-inclusive social live chat plugin like this one from Elfsight. Even though WhatsApp is a vastly popular messager app, there’s still a chance your potential customer might not use it.

However, if you are looking for a dedicated WhatsApp Chat widget for your website, there are a few options.

1. Use a dedicated widget provider with the ability to manage your WhatsApp Chat widgets.
2. Use a simple WhatsApp button on the website with a link to the message.

Both can work seamlessly to add WhatsApp Chat to a website. Even so, using a service such as Elfsight and CommonNinja is recommended as you can manage your widget (apart from scheduling the WhatsApp Chat gadget on your website) by disabling it, installing it on multiple domains, and adding them to clients’ websites (if you are an agency), etc.,

Not to mention that you get to have other widgets installed on your site, like a custom PayPal button, comparison tables for affiliate marketing, and reviews widgets.

Besides, if you genuinely want a simple WhatsApp Chat button without tracking and management features, use a script from CodePen or a free WhatsApp button generator.

Conclusion on Best WhatsApp Chat Widgets

WhatsApp is used by over 2.7 billion people worldwide, and the WhatsApp Business allows businesses to sell on the app. With automation tools, you can reach your WhatsApp leads and broadcast messages.

So, why don’t you use WhatsApp Chat on your website to let people reach out to your business? It will increase engagement rates and let you follow up with them later, as you now have their contact information.

Also, check out these All-in-One Social Live Chat widgets that let you integrate more messaging channels into one widget.