Copy-paste WhatsApp widget HTML, from the bare wa.me link to a full floating button, plus what the raw code alone leaves you to build yourself.
If you searched for the actual HTML, here it is, no signup required:
<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>Swap 15551234567 for your number in full international format: country code first, no plus sign, no spaces, no leading zero. That link alone is enough to open a WhatsApp chat with your business. It’s also the entire honest answer to “give me the HTML widget code,” because everything past this point is you (or a generator) building the parts that one line doesn’t cover.
A visitor lands on the link with nothing typed. Add the text parameter to have a message waiting in the box when the chat opens:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
Chat with us on WhatsApp
</a>The message has to be URL-encoded: %20 is a space, %2C is a comma, %27 is an apostrophe. Write the sentence you want first, then run it through any URL encoder before pasting it into the text value, since a raw space or punctuation mark in the middle of the query string will break the link on some browsers.
A text link isn’t what most people mean by “WhatsApp widget.” The corner button is CSS on top of the same link:
<a
href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
target="_blank"
rel="noopener"
aria-label="Chat on WhatsApp"
style="
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
"
>
<svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
<path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
</svg>
</a>This version skips a separate icon file by inlining the phone/chat glyph as SVG, so it’s genuinely one self-contained block: paste it before </body> and there’s nothing else to upload. It still leaves four things for you to handle by hand, which is where the actual generator earns its keep.
Mobile and desktop don’t behave the same way, and nothing in this snippet controls that. Click a wa.me link on a phone with WhatsApp installed and it opens the app directly. No app installed, and it sends the visitor to the app store instead, there’s no fallback message or alternate contact method you can configure from the link itself. On a desktop browser, it opens web.whatsapp.com in a new tab, which only works if the visitor is already logged into WhatsApp Web in that browser, otherwise they’re staring at a QR code with no context for why. All three outcomes come from the same href. You can’t detect which one is about to happen or intercept it with plain HTML.
The pre-filled message lives in the URL, not in a form field. Change it and you’re back to hand-encoding a new string, finding every page the link is pasted on, and replacing it there too if you don’t have a shared template.
There’s no icon file to swap without editing the SVG path by hand, and no way to reposition, resize, or recolor the button without touching the inline style block directly, line by line.
Nothing here captures a lead before the chat opens. The link (or the button) goes straight to WhatsApp the moment it’s clicked. If you want a name and a reason for contact before the conversation starts, that’s a separate form you’d have to build, wire up, and somehow pass into the text parameter yourself.
The WhatsApp Chat Widget Generator is a free tool that turns the same handful of settings into one script tag instead of a block of CSS you maintain. Set your number, pick a color, set the position and offsets, write a greeting, and optionally turn on a pre-chat form (a short question, with email or phone marked required or not) that collects context before the WhatsApp window opens at all. The tool outputs this:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#128C7E"
data-position-vertical="bottom"
data-position-horizontal="left"
data-offset-vertical="24"
data-offset-horizontal="24"
data-z-index="999"
data-greeting="Hi! Ask us anything."
data-prechat="true"
data-prechat-title="Before we chat"
data-prechat-description="Tell us what you need help with."
async
defer
></script>Every setting is a labeled data- attribute on one line, so changing the greeting or moving the button to the other corner means re-copying the tag from the form, not hunting through a CSS file. The icon, positioning logic, deep-link handling for mobile versus desktop, and the pre-chat form all live in the hosted script the tag points to, which is what the raw HTML above can’t do on its own without you writing it.
If you’re pasting a generated snippet and want to know what each line controls before you change it by hand, here’s what the tag accepts:
| Attribute | Controls |
|---|---|
data-widget-id | Unique ID issued by the generator, don’t edit this |
data-whatsapp-number | Destination number, international format, no + |
data-color | Button background, any hex value |
data-position-vertical | top or bottom |
data-position-horizontal | left or right |
data-offset-vertical / data-offset-horizontal | Pixel distance from that edge |
data-z-index | Stacking order, raise it if another fixed element covers the button |
data-greeting | Pre-filled message text, no manual URL-encoding needed |
data-prechat | true to show a short form before the chat opens |
data-prechat-title / data-prechat-description / data-prechat-question | Copy shown on the pre-chat form |
Both the raw HTML and the generated script tag go in the same place: somewhere that renders on every page, ideally just before </body>.
theme.liquid, just above </body>, via Online Store → Themes → Edit Code.Does the raw HTML link require a WhatsApp Business account?
No. A personal WhatsApp number works with a wa.me link the same way a Business number does. Business-specific features, like a catalog or automated replies, aren’t part of the link itself.
Why does my button show a broken image instead of an icon?
That happens when the HTML references an external icon file (<img src="/whatsapp-icon.svg">) that hasn’t been uploaded to that path. The inline SVG version above avoids this entirely since the icon is written directly into the HTML.
Can I put the widget HTML inside a <head> tag instead?
Technically the anchor tag itself needs to render in the <body>, since <head> content isn’t displayed. Scripts can load from <head>, but placing the snippet just before </body> avoids render-blocking and is the pattern most site builders expect.
Is there a limit to how many WhatsApp widgets I can add to one page? Nothing stops you from pasting two, but two floating buttons stacked in the same corner usually looks like a bug rather than a feature. If you need two numbers (sales and support, say), give each one a distinct position instead of overlapping them.
Does this work the same on Squarespace? Squarespace’s Code Injection panel (under Settings → Advanced) accepts either version the same way WordPress’s Custom HTML block does, footer injection applies it site-wide in one place.
The literal HTML for a WhatsApp widget is one <a href="https://wa.me/..."> tag, and now you have it. Turning that into the floating, branded, lead-capturing button people usually picture means either writing and maintaining the CSS and deep-link edge cases yourself, or letting the WhatsApp Chat Widget Generator output the finished script tag in one paste, free, no account needed.
Install The Chat Quotient and turn that chat into a tracked lead, a faster reply, and — eventually — a closed deal. Free to start, right inside the WhatsApp Web you already use.