How to Add WhatsApp Chat to Your Website (Button & Widget Guide)

To add WhatsApp chat to your website is to put your fastest reply channel where customers already are: a button or link that opens a WhatsApp conversation with your business, often with a prefilled message. Visitors who would never fill in a contact form will tap a chat button — and once they message you, the 24-hour customer service window opens and your agent or team can reply properly. The basic version needs no code at all.

Option 1: the click-to-chat link (no code)

WhatsApp's click-to-chat format is a plain link: wa.me followed by your full international phone number, no plus sign, spaces, or dashes — for example, wa.me/15551234567. Add ?text= with a URL-encoded prefilled message (“Hi, I have a question about…”) and the visitor lands in WhatsApp with the message ready to send. Put that link behind any button, menu item, or “Chat with us” text on your site and you have WhatsApp chat on your website in minutes.

Option 2: the floating chat button

A floating button — the familiar green bubble pinned to a corner — is the same link dressed as a widget. Many website builders and plugins offer it as a toggle, or you can add a small snippet that renders the button and an optional greeting popup (“Hi! How can we help?”). Keep it on every page but never covering the checkout button or mobile navigation: bottom-right is standard, and on mobile it should not overlap the buy button.

Prefilled messages that get better chats

The prefilled text is your cheapest qualification tool. A generic “Hi” tells you nothing; “Hi, I'm interested in your Starter plan” or “Hi, I'd like to book an appointment” tells your agent or team exactly how to respond. Use different prefilled messages per page — pricing page, product page, contact page — so the conversation starts with context. Your agent can then answer from your documents immediately instead of spending three messages establishing what the visitor wants.

Visitor taps the pricing-page button: “Hi, I'd like to know if the Growth plan includes Instagram.” Agent: “Yes — Growth at $11.99 a month covers 15,000 AI replies across WhatsApp, Facebook, and Instagram.” One tap, one answer, zero forms.

Placement that converts

The button earns its keep on high-intent pages: pricing, product and service pages, checkout help, and the contact page. On blog posts it is optional — readers there are earlier in the journey and a chat button can distract from reading. Always show business hours next to it or, better, let an AI agent answer after hours: a chat button that goes unanswered at 11 PM is worse than no button, because it sets an expectation and breaks it.

Measure it, then improve it

Count chats per page (use a different prefilled message or link per page to attribute them), track reply time, and note which pages produce real customers versus questions. If a page sends lots of chats but no sales, the page — not the button — needs work. And once chats flow in, the

team inbox guide covers what happens when those chats need more than one person to handle.