How to Add a Free WhatsApp Chat Widget to Your Website (No Code)

How to add a free WhatsApp chat widget to any website in a few minutes: the raw wa.me link approach, and a generator that outputs a customizable, no-code snippet.

A floating WhatsApp chat button in the corner of a website next to a code snippet

There are two honest ways to add a WhatsApp chat widget to a website without paying for one: paste a plain wa.me link and style it yourself, or use a generator that hands you a finished, customizable snippet. Both are genuinely free and both take a few minutes. They just leave you in very different places six months from now.

This walks through both, starting with the raw link so you know exactly what you’re opting out of when you skip it.

Method 1: the plain wa.me link

The absolute minimum version is one line of HTML:

<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>

Replace 15551234567 with your number in full international format, no plus sign, no spaces, no leading zero. The text parameter is a pre-filled message, URL-encoded, so %20 is a space and %2C is a comma. Click it and WhatsApp opens with that message already typed into the box, waiting for the visitor to hit send.

wa.me is Meta’s own short link for this, so the behavior on the other end is consistent: on a phone, it opens the WhatsApp app directly if it’s installed, or sends the visitor to the app store if it isn’t. On a desktop browser with no app installed, it opens web.whatsapp.com in a new tab instead. You don’t have to build any of that detection yourself, which is the one part of this approach that’s genuinely solved for you.

Everything else isn’t. That single link is just underlined blue text wherever you drop it. To turn it into the floating bottom-corner button people actually mean when they say “WhatsApp chat widget,” you’re writing the CSS yourself:

<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
   target="_blank" rel="noopener"
   style="position:fixed; bottom:20px; right:20px; z-index:5000;
          width:56px; height:56px; border-radius:50%;
          background:#25D366; display:flex; align-items:center;
          justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
  <img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>

That works, but now you also need an icon file, a z-index high enough to sit above your cookie banner and any modals without covering your own nav on mobile, and a plan for what happens when someone wants the message text changed next month, which means opening this same block of markup again, wherever it’s pasted, on every page or template that has it.

The WhatsApp Chat Widget Generator does the same job of the link above, plus the styling, positioning, and icon, and hands back one script tag instead of a block of custom CSS you’re responsible for maintaining. It’s free, doesn’t require an account, and doesn’t touch the WhatsApp Business API, so there’s no verification step before you can use it.

Here’s the actual walkthrough:

Enter your WhatsApp number. The generator has a country code picker built in, defaulting to whatever country your browser reports, so you’re not guessing at the international dialing prefix by hand.
Pick a color. A color swatch sets the button’s background. WhatsApp’s own green (#25D366) is the default, but the field takes any hex value if you want it to match your site’s brand color instead.
Set the position. Two dropdowns control whether the button sits at the top or bottom of the screen, and the left or right side, each with its own pixel offset field so you can nudge it away from a floating nav bar or another widget already living in that corner.
Set the z-index. A numeric field, 5000 by default, controls what the button stacks above. Raise it if a chat tool, cookie banner, or modal on your site is currently covering it.
Add a greeting message. Whatever you type here becomes the pre-filled text in the visitor’s WhatsApp message box, the same idea as the text parameter in the raw link, but editable from the form instead of a URL-encoded string.
Turn on the popup, optionally. A checkbox adds a small speech-bubble prompt (with its own custom question text and a delay in seconds before it appears) that shows up next to the button before anyone clicks it, meant to nudge attention toward the widget rather than waiting for someone to notice a plain icon in the corner.

As you fill in the form, a live preview of the button renders right on the page, and the code panel next to it updates in real time with the finished snippet:

<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
  data-widget-id="wgt_xxxxxxxx"
  data-whatsapp-number="15551234567"
  data-color="#25D366"
  data-position-vertical="bottom"
  data-position-horizontal="right"
  data-offset-vertical="20"
  data-offset-horizontal="20"
  data-z-index="5000"
  data-greeting="Hi! How can we help?"
  async
  defer
></script>

Click Copy, paste that single tag anywhere before the closing </body> tag on your site, and the widget is live. Nothing else needs to be uploaded, no icon file, no separate stylesheet. Every setting from the form (color, position, offsets, greeting, popup) is encoded as a data- attribute on that one tag, so the whole thing travels as one paste.

Why the generated snippet holds up better

The two outputs look similar on the surface, a button in the corner that opens WhatsApp, but they age differently.

With the hand-rolled version, every setting is a value buried inside inline styles or a separate CSS file. Changing the greeting means finding and editing the text parameter in a URL-encoded string. Moving the button because a new cookie banner now overlaps it means re-editing the CSS on every page or template where you pasted it, and if you forgot one, that page quietly has a broken-looking widget until someone notices. None of this fails loudly, it just drifts out of sync page by page.

The generated snippet keeps every one of those settings as a labeled attribute on one line you can re-copy from the form in seconds, then find-and-replace across your site if you’re not using a shared header or footer include. And because the actual button logic lives in the hosted script file the tag points to, not in code you pasted, bug fixes and behavior improvements to the widget itself ship without you touching your site again.

Where to paste the snippet

The mechanics are the same everywhere: get the snippet somewhere that renders on every page, ideally just before </body>.

A plain HTML site: paste it directly into your shared footer template, or into every page if you don’t have one.
WordPress: a Custom HTML block, or your theme’s footer via Appearance → Theme File Editor, works without installing a separate plugin.
Shopify: paste it into theme.liquid, just above the closing </body> tag, via Online Store → Themes → Edit Code.
Wix: use the built-in Custom Code panel under Settings → Custom Code, and set it to load on all pages.
Webflow: the Footer Code field under Project Settings → Custom Code applies it site-wide in one place.

Each of these has its own quirks worth a longer look on its own, we’ll cover WordPress in more detail separately, but the paste step itself is identical everywhere: one script tag, one place, applied to every page at once.

Testing it before you call it done

Load the site in an incognito window so cached styles don’t hide a real problem, and check the button on both desktop and a real phone, not just a resized browser window. Click it once from each and confirm it opens WhatsApp (the app on mobile, web.whatsapp.com on desktop) with your number and greeting message already filled in. Then scroll the page with any cookie banners or sticky elements visible, the most common failure at this point is a z-index conflict, where the widget renders behind another fixed-position element instead of on top of it.

Frequently asked questions

Is this actually free, or is there a catch? The generator itself is free with no account required. The widget script it points to is hosted and served at no cost. If you later install The Chat Quotient’s Chrome extension to manage the conversations that come in through the widget, that has its own free plan too, but it’s a separate, optional step, not a requirement to use the widget.

Is a WhatsApp widget the same as WhatsApp Web? No, and this is a common mix-up. WhatsApp Web (web.whatsapp.com) is the interface you use to read and send WhatsApp messages from a browser. A WhatsApp widget web element is the small button you add to your own site that, when clicked, opens a chat, either in the WhatsApp app on mobile or in WhatsApp Web on a desktop that doesn’t have the desktop app installed. The widget is something you embed; WhatsApp Web is where the resulting conversation happens to open.

Does the widget work if a visitor doesn’t have WhatsApp installed? On mobile, clicking it without the app installed sends the visitor to their app store to install WhatsApp first. There’s no way around that step, since the link only knows how to hand off to WhatsApp itself, not to substitute another messaging channel.

Can I have more than one WhatsApp number, like sales and support, on the same widget? Not on one button. The widget is built around a single WhatsApp number per instance. If you need two entry points, you’d add two widgets with different positions and greetings, though at that point a dedicated contact page with both listed separately is usually clearer for visitors than two floating buttons stacked in the same corner.

Do I need to know how to code to use the generator? No. Every setting is a form field, and the only thing you paste is the single script tag it produces, the same copy-paste step regardless of which platform your site runs on.

The bottom line

A wa.me link is genuinely all you need if you’re comfortable writing and maintaining your own CSS and don’t mind revisiting that code every time something needs to change. The WhatsApp Chat Widget Generator produces the same result, a floating button that opens a pre-filled WhatsApp chat, without the CSS, the icon file, or the maintenance that comes with hand-rolling it, and it’s still free.