How to add a WhatsApp chat button to your website

To add a WhatsApp chat button to a website, make a click-to-chat link (https://wa.me/ followed by your full international number, with a pre-filled message if you like) and put it behind a button in your page's HTML. A visitor who taps it lands in a WhatsApp chat with your number, on a phone or on WhatsApp Web.

For a sales team, the button is the easy part. It replaces a contact form with a conversation the buyer can start in one tap, which is why many Indian businesses put it on their sales pages. What decides whether those chats turn into customers is where the button sits, how you tell one page's leads from another's, and who answers when the chat arrives. This guide covers all three, with code you can paste.

What do you need before you add the button?

• A number with an active WhatsApp account. WhatsApp's click-to-chat link opens a chat with any number that has one; a number that isn't on WhatsApp gives the visitor nobody to talk to.
• Someone to answer it. A button on a busy page sends chats all day, so decide whose phone, or which shared inbox, the number lives on before it goes live.
• A first message for each page. The pre-filled text is how you'll know which page a lead came from (more on that below).

How do you make the WhatsApp link for the button?

The link is WhatsApp's own click-to-chat format. Its help centre sets the rules: the number goes in full international format, with no plus sign, leading zeros, brackets or dashes, and an optional message goes after ?text= in URL-encoded form. The free WhatsApp link generator builds it as you type and copies a ready-made button snippet.

1. 1Write the number with its country code and nothing else: 098765 43210 in India becomes 919876543210.
2. 2Put it after https://wa.me/ to get https://wa.me/919876543210.
3. 3To pre-fill a message, add ?text= and the message with spaces as %20: https://wa.me/919876543210?text=Hi%2C%20I'm%20on%20your%20pricing%20page.
4. 4Open the link on your phone and on a computer to check it starts the right chat before it goes on the site.

What is the HTML code for a WhatsApp button?

Any link works as a button. The simplest is a plain text link; a floating button that stays in the corner of the screen is a few lines more. Both use only HTML and CSS, so they add no plugin, script or page weight. Replace the number and message with your own.

<a href="https://wa.me/919876543210?text=Hi%2C%20I'm%20on%20your%20pricing%20page"
   target="_blank" rel="noopener">Chat with us on WhatsApp</a>

<a class="wa-button" href="https://wa.me/919876543210?text=Hi%2C%20I'm%20on%20your%20website"
   target="_blank" rel="noopener" aria-label="Chat on WhatsApp">Chat on WhatsApp</a>

<style>
  .wa-button {
    position: fixed; right: 16px; bottom: 16px; z-index: 50;
    padding: 12px 18px; border-radius: 999px;
    background: #25d366; color: #111;
    font: 600 15px/1 system-ui, sans-serif; text-decoration: none;
  }
</style>

Keep the floating button clear of your site's own cookie banner and chat icons, and check it on a narrow phone screen, where a fixed button can cover a form's submit button.

Can you use WhatsApp's own Chat on WhatsApp button?

Yes. WhatsApp publishes a branded Chat on WhatsApp button, in green or white and in small, medium and large sizes, and as of October 2026 only in English. Its guidance is to use the latest version exactly as downloaded, unchanged, and to make sure it is visible and easy to read. You put the image inside the same link: an a element with your wa.me address, around an img with alt text "Chat on WhatsApp". The button download is linked from WhatsApp's help centre article on click to chat, which points to Meta's WhatsApp brand resources page for the brand guidelines it follows; both are listed under Sources.

Where should the button go to bring in leads?

• Pricing and quote pages, where buyers have questions that decide the sale.
• Product and service pages, next to the main call to action rather than instead of it.
• The contact page, alongside the phone number and email.
• A floating button on mobile, kept small enough not to hide the page.
• Order confirmation and thank-you pages, so a buyer with a follow-up question reaches you rather than a review site.

How do you know which page a lead came from?

WhatsApp doesn't tell you which link someone tapped, and as of October 2026 it reports no clicks at all. The first message does the job instead: give every page its own pre-filled text, such as "Hi, I'm on your pricing page" on one and "Hi, I'm asking about the 2BHK in Baner" on another. When a visitor sends it unchanged, the opening line of the chat tells your team where the lead started. Your website analytics can still count clicks on the button itself, as it would for any outbound link.

Keep a short list of which message belongs to which page, in the same sheet where you track enquiries. If you log chats automatically, as in WhatsApp to Google Sheets, the first message lands in its own column and the source can be read straight off it.

What happens after someone taps the button?

The chat arrives on the number in the link, like any other WhatsApp message. If that number lives on one salesperson's phone, every lead from the website waits for that person. A team does better with the number connected to a shared inbox, where a manager hands each new chat to a rep and two people don't answer the same buyer. WavesFlo's shared inbox does that for every connected number; assigning WhatsApp chats explains the options, including what the WhatsApp Business app allows on its own.

Answer quickly, and from the number the buyer messaged, so the conversation stays in one thread. For leads from ads rather than your site, see Click-to-WhatsApp ad leads; for the whole process of owning and following up every enquiry, see WhatsApp for sales teams.

How do you add it in WordPress, Shopify or Wix?

Every common website builder lets you add a link to a button or paste custom HTML into a page or theme. Put the wa.me link into a button block's link field for a single page, or paste the floating button code into the builder's custom-code or footer area to show it on every page. Plugins and apps exist for this too, but a plain link does the same job with nothing extra to install or keep updated. On Wix, site-wide custom code works only once the site is published with a connected domain, Wix's help centre says; until then, put the wa.me link on a button element instead.