Add a WhatsApp Chat Button to Any Website (No Plugin, No jQuery)

Golam Rabbani — Mon, 09 Nov 2026 13:04:20 +0000

Add a WhatsApp Chat Button to Any Website (No Plugin, No jQuery)

If your customers already live on WhatsApp, a chat button is the shortest path between "I have a question" and a sale. This post builds one from scratch, then looks honestly at where the simple version stops being enough.

The 2-minute version

WhatsApp has an official click-to-chat URL:

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

wa.me/<phone> opens a chat with that number (international format, no +, no spaces). The text parameter pre-fills the visitor's message, URL-encoded.

A floating button is just a fixed-position link:

<a class="wa-btn" href="https://wa.me/15551234567?text=Hi!%20I%20have%20a%20question." target="_blank" rel="noopener">Chat on WhatsApp</a>

.wa-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  background: #25d366; color: #07332a; padding: 14px 18px;
  border-radius: 999px; font-family: sans-serif; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

That works on any stack: plain HTML, WordPress, a React app, a Laravel template. If one person answers every chat and they are happy to be reachable at all hours, stop here. You are done.

Where the simple version breaks

Real shops hit the same four walls:

More than one agent. Sales and support are different people. A single number sends every visitor to the same phone, and the wrong questions land with the wrong person.
The 2 a.m. message. A visitor writes at night, gets silence, and buys elsewhere. The button should know working hours and say so honestly instead of pretending someone is there.
Every page asks the same question. A visitor on a product page wants to ask about that product. If the pre-filled message is generic ("Hi!"), half the conversation is spent finding out what they meant.
Checkout. A floating chat button on the checkout page mostly distracts people who were about to pay. It should be possible to hide it there and only there.

What a proper widget needs

Working through the list, a real widget needs:

An agent picker: tap the button, see the team, pick sales or support.
Working hours per agent, with an online/offline state and an offline message when nobody is available.
A different pre-filled message per page, with a sensible default for the rest of the site.
Page rules: hide the widget on checkout, show it everywhere else.
Zero dependencies, so it drops into any site as one snippet.

None of this is hard, but it is a weekend of small details: time zones, day-of-week schedules, encoding the per-page messages, keeping the panel usable on a phone.

Full disclosure, and the shortcut

I built exactly this as a small commercial widget, because I needed it to exist in vanilla JS with no server and no dashboard. You can try the live demo here:

Live demo on Netlify

If you want the ready-made version instead of building your own, it is here (this is my product, and the link is my referral link):

Multi-Agent WhatsApp Chat Widget on Codester

And if the 2-minute version above is all you need, use it with my blessing. For a one-person shop it is genuinely enough.

Questions or a wall I missed? Tell me in the comments. I read all of them.

DEV Community: Golam Rabbani

Add a WhatsApp Chat Button to Any Website (No Plugin, No jQuery)

Add a WhatsApp Chat Button to Any Website (No Plugin, No jQuery)

The 2-minute version

Where the simple version breaks

What a proper widget needs

Full disclosure, and the shortcut