How to Add a WhatsApp Chat Button to Your Website (2026)

Your website gets visitors — but a contact form feels like homework and most people won't fill it in. A WhatsApp button turns that friction into a one-tap conversation on the app they already use every day. Add one and you'll capture enquiries you were quietly losing. Here's how to add a WhatsApp button to your website, from the simplest link to a floating chat widget, with copy-paste code.

Why a WhatsApp button beats a contact form

Forms ask people to type their email, wait for a reply, and hope you respond. A WhatsApp button lets them message you like they'd message a friend — instantly, on a channel they check constantly. The result:

• More enquiries — one tap versus a multi-field form.
• Faster conversations — real-time chat, not email tag.
• A saved contact — you keep their number for follow-up (with consent).

For most small businesses, adding a WhatsApp button lifts enquiries noticeably, especially on mobile.

The foundation: the click-to-chat link

Every WhatsApp button is built on the same thing — a click-to-chat link:

https://wa.me/<number>

Where <number> is your WhatsApp number in full international format with no plus sign, spaces, or dashes. For example, a UK number +44 7911 123456 becomes:

https://wa.me/447911123456

You can pre-fill a message so the customer starts with context:

https://wa.me/447911123456?text=Hi!%20I%20have%20a%20question%20about...

(Spaces are written as %20.) That single URL is what every button, link, and widget points to. We cover it in depth in our click-to-chat link guide.

Option 1: A simple text or button link

The quickest button is an HTML link styled as a button:

<a href="https://wa.me/447911123456?text=Hi!%20I'd%20like%20to%20ask..."
   target="_blank" rel="noopener"
   style="display:inline-block;background:#25D366;color:#fff;
          padding:12px 20px;border-radius:8px;text-decoration:none;
          font-weight:600;font-family:sans-serif">
  Chat on WhatsApp
</a>

Paste that anywhere in your page's HTML and you have a working WhatsApp button. Swap in your number and message. (Use WhatsApp's green #25D366 sparingly and describe it as "WhatsApp" — don't imply an official partnership.)

Option 2: A floating chat bubble

The classic bottom-corner bubble that follows the visitor as they scroll. Minimal version:

<a href="https://wa.me/447911123456"
   target="_blank" rel="noopener" aria-label="Chat on WhatsApp"
   style="position:fixed;bottom:20px;right:20px;z-index:9999;
          background:#25D366;width:56px;height:56px;border-radius:50%;
          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="#fff"><path d="M12 2a10 10 0 0 0-8.6 15l-1.4 5 5.1-1.3A10 10 0 1 0 12 2zm5.8 14.2c-.2.7-1.4 1.3-2 1.4-.5.1-1.2.1-1.9-.1-3.3-1-5.4-4.4-5.6-4.6-.2-.2-1.3-1.7-1.3-3.3s.8-2.3 1.1-2.6c.3-.3.6-.4.8-.4h.6c.2 0 .5 0 .7.5l.9 2.1c.1.2.1.4 0 .6l-.4.6c-.1.2-.3.3-.1.6.5.9 1.1 1.5 1.8 2 .4.3.7.4.9.1l.6-.8c.2-.3.4-.2.7-.1l2 1c.3.1.4.2.5.3.1.3.1.9-.1 1.6z"/></svg>
</a>

Drop it just before your closing </body> tag and it appears on every page.

Option 3: Your website builder's WhatsApp element

If you use a builder, you don't need code at all:

• Shopify — add a free WhatsApp chat app from the app store, or a button block linking to your wa.me URL.
• WordPress — install a WhatsApp button plugin, or add the snippet above in a Custom HTML block.
• Wix / Squarespace — use the built-in WhatsApp chat element or a button linked to your wa.me URL.

They all wrap the same click-to-chat link in a friendlier editor.

Make your button actually convert

A button only helps if the conversation on the other side is good:

• Set expectations. Pair it with a greeting message so visitors get an instant, warm reply.
• Pre-fill helpful context with ?text= so you know what page they came from.
• Put it where intent is high — near prices, product details, and your contact page.
• Answer fast. A button that leads to a slow reply wastes the click.

That last point is the big one. A WhatsApp button can send you a flood of enquiries — great, until you can't keep up and people wait. This is where an AI receptionist earns its keep: every visitor who taps your button gets an instant, accurate answer — prices, availability, bookings — 24/7, even at midnight. Your button stops being a lead form and becomes a live front desk. Add a QR code for your physical location and you've covered online and offline.

The takeaway

Adding a WhatsApp button is easy: build a wa.me click-to-chat link with your number in international format, then wrap it in a styled link, a floating bubble, or your website builder's WhatsApp element. It beats a contact form for capturing enquiries — especially on mobile. Just make sure the conversation behind the button is fast and helpful; pair it with an AI receptionist and every click gets answered instantly. Try ChatMunshi free so your website's WhatsApp button never leaves a visitor waiting.