WhatsApp Button for Website: HTML Code, Generator & Best Practices (2026)

Learn how to add a WhatsApp button to your website with ready-to-use HTML code. Customisable click-to-chat button with pre-filled message, free generator tool, and expert styling tips.

2026-07-07

WhatsApp Button for Website: HTML Code, Generator & Best Practices (2026)

A single WhatsApp button on your website can turn casual browsers into active conversations — and conversations into customers. WhatsApp has a 98% open rate and a median response time of minutes, not hours. An email form? Days. A contact page? Most visitors never fill it out.

This guide gives you ready-to-use HTML code for a WhatsApp button, shows you how to style and animate it, and explains when to use the free generator instead of writing code by hand.

Why a WhatsApp button outperforms contact forms

| Metric | Email contact form | WhatsApp button |

|--------|-------------------|-----------------|

| Open rate | ~20 % | 98 % |

| Median response | 12–24 hours | 2–5 minutes |

| Friction to start | Fill 4+ fields | One tap |

| Visitor intent | Low (forms feel like work) | High (chat feels easy) |

A WhatsApp button works because it reduces the steps between "I'm interested" and "I'm talking to you" to exactly one tap.

The basic WhatsApp button HTML

Here is the simplest WhatsApp button you can paste into any webpage:

<a href="https://wa.me/34612345678?text=Hi%2C%20I%20have%20a%20question"
   target="_blank"
   style="background-color:#25D366; color:#ffffff; padding:12px 24px;
          border-radius:8px; text-decoration:none; font-weight:600;
          display:inline-block; font-family:Arial, sans-serif;">
  Chat on WhatsApp
</a>

Replace 34612345678 with your business number (country code + number, no + sign). The ?text= parameter pre-fills the message.

Styled button with WhatsApp icon

A plain text link works, but the conversion rate nearly doubles when the button uses WhatsApp's green and the official icon:

<a href="https://wa.me/34612345678?text=Hi%2C%20I%27d%20like%20more%20info"
   target="_blank"
   style="background-color:#25D366; color:#ffffff; padding:14px 28px;
          border-radius:50px; text-decoration:none; font-weight:600;
          display:inline-flex; align-items:center; gap:10px;
          font-family:Arial, sans-serif; font-size:16px;
          box-shadow:0 4px 12px rgba(37,211,102,0.3);
          transition:transform 0.2s, box-shadow 0.2s;"
   onmouseover="this.style.transform='scale(1.05)';this.style.boxShadow='0 6px 20px rgba(37,211,102,0.4)';"
   onmouseout="this.style.transform='scale(1)';this.style.boxShadow='0 4px 12px rgba(37,211,102,0.3)';">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
  Chat with us
</a>

This pill-shaped button includes an inline SVG icon, hover animation (scale + deeper shadow), and rounded corners.

Floating WhatsApp button (sticky widget)

The most popular placement in 2026 is a circular floating button fixed to the bottom-right corner of every page. It stays visible as the visitor scrolls, so they can reach out at the moment of peak interest:

<style>
  .wa-floating-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    background-color: #25D366;
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    text-decoration: none;
  }
  .wa-floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
  }
  .wa-floating-btn svg { width: 30px; height: 30px; fill: #ffffff; }
</style>

<a href="https://wa.me/34612345678?text=Hi%2C%20I%20have%20a%20question"
   target="_blank"
   class="wa-floating-btn"
   aria-label="Chat on WhatsApp">
  <svg viewBox="0 0 24 24">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
</a>

The green circle with the WhatsApp icon is instantly recognisable — no text label needed.

Best pre-filled messages for website buttons

| Business type | Pre-filled message |

|---------------|-------------------|

| E‑commerce | Hi%2C%20I%20have%20a%20question%20about%20%5Bproduct%5D |

| SaaS / agency | Hi%2C%20I%27d%20like%20a%20demo |

| Restaurant | Hi%2C%20I%27d%20like%20to%20book%20a%20table |

| Real estate | Hi%2C%20I%27m%20interested%20in%20%5Bproperty%5D |

Keep the message under 200 characters — WhatsApp truncates longer text. Avoid asking for personal data in the pre-fill; collect that in the conversation.

Use the free generator instead of writing code

If you manage multiple buttons or want a polished result without hand-coding HTML, use a dedicated tool.

Waaplink's WhatsApp Button Generator produces a production-ready HTML snippet in three clicks:

Enter your phone number (the tool accepts +, spaces, and dashes).
Write the pre-filled message.
Choose a style (inline button or floating widget, with or without the icon).

The generator outputs copy-paste HTML with the official WhatsApp icon, hover animations, and responsive design — no code required. It also gives you a short link for tracking which pages generate the most leads.

Button placement strategies

| Placement | Conversion impact | Best for |

|-----------|------------------|----------|

| Floating bottom-right | Highest — always visible | Every page |

| Product page (near CTA) | High — context matches intent | E‑commerce, SaaS |

| Contact page | Medium — visitor is looking | Services |

| Checkout / cart page | High — reduces abandonment | Online stores |

| Blog sidebar | Medium — engaged readers | Content marketing |

For maximum impact, combine a floating button with inline buttons on product or service pages.

Common mistakes

| Mistake | Fix |

|---------|------|

| No pre-filled message | Always include ?text= |

| Wrong number format with + | Use wa.me/123... without + |

| Button hidden in footer | Use floating position or place above the fold |

| No target="_blank" | Add target="_blank" so WhatsApp doesn't replace your site |

| Generic "Contact us" label | Use "Chat on WhatsApp" — clarity beats cleverness |

What happens after they click

A WhatsApp button is the start, not the end. Set up your business account to handle incoming volume:

Auto-reply — Acknowledge messages even when offline: "Thanks! We'll reply within 1 hour."
Quick replies — Pre-save answers to your 5 most common questions. Most businesses cut response time by 40 % in the first week.
Labels — Tag chats by source (float button, product page, campaign) to measure which placement drives the most revenue.

Generate your WhatsApp button in seconds

Skip the manual coding. Waaplink's free WhatsApp Button Generator creates a pixel-perfect, copy-paste HTML button with the official WhatsApp icon, hover effects, and a pre-filled message — ready for any website or landing page. No signup, no email, no watermark.

👉 Create your WhatsApp button now →