Free Tool

Build a WhatsApp chat widget for your website

Configure it below and try it out right on this page. The bubble in the corner is the real widget, live.

Configure your widget

Changes update the live preview and the snippet instantly.

Pick your country so the code is right (WhatsApp can't find the chat without it), then enter the rest of the number, digits only.

Raise this if the widget ends up hidden behind another element on your site, like a cookie banner or a different chat tool.

Your embed snippet

Paste this before the closing </body> tag on your website.

Live preview

Look at the bottom corner of this page. That's your widget, rendered from the settings above using the real embed script.

Manage your leads on WhatsApp Web

Download the free Chat Quotient Chrome extension to see and manage every conversation directly inside WhatsApp Web, a full WhatsApp CRM experience.

Add to Chrome, It's Free

What is a WhatsApp chat widget?

A WhatsApp chat widget is a small button that sits in the corner of a website and, when clicked, opens a WhatsApp conversation with the business, either straight to the business's WhatsApp number or through a short form first. It replaces a static "Contact us" link or email form with a channel most visitors already have open on their phone.

It's different from a plain "click to chat" link (just a piece of text or an icon that opens wa.me) in that a widget is configurable: position, color, and a pre-filled greeting.

How to add a WhatsApp chat widget to your website

  1. 1

    Configure your widget

    Enter your WhatsApp number, then pick a color and a corner for the widget.

  2. 2

    Copy the snippet

    Use the "Copy snippet" button above. It's a single <script> tag, no other files or dependencies.

  3. 3

    Paste it into your site

    Add it right before the closing </body> tag of your site's HTML.

  4. 4

    Publish

    That's it. The widget renders itself from the snippet, no build step, backend, or account required.

Where to paste it, by platform

WordPress
Use a plugin like "Insert Headers and Footers" or "WPCode", or paste it directly into your theme's footer.php before </body> via Appearance → Theme File Editor.
Shopify
Online Store → Themes → Edit code → theme.liquid, and paste the snippet just above </body>.
Wix
Settings → Custom Code → Add Code, set it to load on all pages in the "Body - end" section.
Webflow
Project Settings → Custom Code → Footer Code, then publish your site.
Any other site
If you can edit your site's HTML, paste it before </body>. It works the same everywhere.

Why add a WhatsApp button to your website

No form, no email, no page reload

Visitors reach you in an app they already have open on their phone, instead of typing into a contact form and waiting for a reply.

It meets visitors where they already are

WhatsApp is the default messaging app for billions of people worldwide. For most visitors, there's nothing new to download or sign up for.

Every chat starts with context

A pre-filled greeting means the conversation doesn't start cold. Visitors land in WhatsApp with their message already framed.

You control exactly where it sits

Set the color, corner, and offset so the widget matches your site instead of a generic default bubble.

Free, with no approval process

No WhatsApp Business API application, no separate number, no code beyond one script tag.

Chat button vs. chat widget: what's the difference?

Chat button

A static link or icon that opens a WhatsApp chat when clicked. No configuration beyond the destination number.

Chat widget

  • Configurable color, position, and a pre-filled greeting
  • Works everywhere: WordPress, Shopify, Wix, Webflow, or plain HTML, no dependencies
  • This is exactly what you're building above

Frequently asked questions

Is this WhatsApp chat widget generator free? +

Yes. The redirect widget you build above (with your number, color, position, and greeting) is free, with a small "Powered by Chat Quotient" badge. A Pro, AI-agent-powered version is planned for the future.

Do I need the WhatsApp Business API to use it? +

No. The widget opens a normal WhatsApp chat using your existing WhatsApp number. No Business API approval or separate number required.

Will it work on WordPress, Shopify, Wix, or any other website? +

Yes. It's a single script tag with no dependencies, so it works anywhere you can paste HTML: WordPress, Shopify, Wix, Webflow, Squarespace, or a hand-built site.

Does the widget slow down my website? +

It shouldn't be noticeable. The script is small, loads with async and defer so it never blocks your page, and renders inside an isolated Shadow DOM so it can't clash with your site's own styles.

Can I collect a visitor's name before they go to WhatsApp? +

Not yet. Lead capture before the WhatsApp handoff is on the roadmap, and we'll add the toggle back here once it's ready.

Where is my configuration stored? +

Nowhere on our servers. Your settings live entirely inside the script tag you paste onto your site. To change something later, come back to this page, reconfigure, and copy the new snippet (keep a copy of your current one, since we don't store it for you).

What's the difference between a chat button and a chat widget? +

A "chat button" is usually just a static link that opens WhatsApp. A "chat widget" (what this tool builds) is a floating launcher with a configurable greeting, position, and color.

Can I use my personal WhatsApp number, or do I need a business number? +

Any WhatsApp number works, personal or business. Just enter it with the country code and no spaces or plus sign.