How to Add a WhatsApp Button to Your Website (3 Easy Methods)

Want customers to reach you on WhatsApp directly from your website? A WhatsApp chat button is the fastest way to turn website visitors into conversations.

In this guide, we'll show you three methods — from a simple HTML button to a floating widget — with copy-paste code for each. No technical skills required.

---

Why Add a WhatsApp Button?

Before we dive in, here's why it matters:

• Higher response rates. WhatsApp messages get 98% open rates vs. 20% for email.
• Lower friction. One tap to start a conversation — no forms, no email chains, no phone tag.
• Personal touch. Customers prefer messaging over calling. WhatsApp feels natural.
• Free. WhatsApp's click-to-chat feature costs nothing.

According to Meta, businesses that add WhatsApp to their website see 3-5x more customer conversations than those using contact forms alone.

---

Method 1: Simple HTML Button (5 Minutes)

The quickest method. Just HTML and CSS — no JavaScript, no plugins, no third-party tools.

Step 1: Get Your WhatsApp Link

Your WhatsApp link follows this format:

https://wa.me/YOURNUMBER?text=Hello

Replace YOURNUMBER with your full phone number in international format (no spaces, no dashes, no plus sign):

• US: 1234567890 (country code + number)
• UK: 447123456789
• Colombia: 573001234567
• Brazil: 5511987654321

The ?text=Hello part is optional — it pre-fills a message so the customer doesn't start with a blank chat.

Step 2: Add the Button HTML

Paste this anywhere in your website's HTML:

<a href="https://wa.me/YOURNUMBER?text=Hi%20I'm%20interested"
   target="_blank"
   rel="noopener noreferrer"
   style="display:inline-flex;align-items:center;gap:8px;background:#25D366;color:white;padding:12px 24px;border-radius:8px;text-decoration:none;font-family:sans-serif;font-weight:600;font-size:16px;">
  💬 Chat on WhatsApp
</a>

That's it. You have a green WhatsApp button.

Step 3: Customize (Optional)

Change the pre-filled message: Replace Hi%20I'm%20interested with your own URL-encoded text. Spaces become %20.

Change the button text: Replace "💬 Chat on WhatsApp" with whatever you want.

Change the color: The official WhatsApp green is #25D366. But it's your button — make it match your brand.

Pros:

• Zero dependencies — pure HTML
• Works everywhere
• Loads instantly (no external scripts)

Cons:

• No analytics (you don't know how many people click)
• Long, ugly wa.me URL visible in the link
• Have to manually URL-encode messages

---

Method 2: Short Link with Analytics (Recommended)

This method uses mssg.to to create a short, trackable WhatsApp link. Same button, but now you get click analytics and a clean URL.

Step 1: Create Your Link on mssg.to

1. Go to mssg.to
2. Enter your WhatsApp number
3. Add a pre-filled message (e.g., "Hi! I found you on your website")
4. Click "Create Link"

You'll get a short URL like mssg.to/abc123 (or mssg.to/YourBrand on paid plans).

Step 2: Use It as Your Button

<a href="https://mssg.to/YOUR-LINK"
   target="_blank"
   rel="noopener noreferrer"
   style="display:inline-flex;align-items:center;gap:8px;background:#25D366;color:white;padding:12px 24px;border-radius:8px;text-decoration:none;font-family:sans-serif;font-weight:600;font-size:16px;">
  💬 Chat on WhatsApp
</a>

Step 3: Track Clicks in Your Dashboard

Log in to mssg.to to see:

• How many people clicked your button
• When they clicked (time of day, day of week)
• Where they came from (which page, which referrer)

Pros:

• Click analytics — know exactly how your button performs
• Short URL — mssg.to/YourBrand looks better than wa.me/573001234567?text=...
• Editable — change the phone number or message without touching your website code
• QR code included — download and use on business cards, flyers, etc.

Cons:

• Requires a (free) mssg.to account for more than the instant link

Why This Is the Recommended Method

Most businesses want to know: "Is this button actually working?" With a raw wa.me link, you're flying blind. With mssg.to, you see exactly how many visitors become WhatsApp conversations.

And since the free plan includes 5 links with full analytics, there's no cost to try it.

Create your free WhatsApp button link →

---

Method 3: Floating Widget (Bottom-Right Corner)

Want that classic floating WhatsApp icon in the bottom-right corner of your website? Here's a lightweight version — no plugins, no libraries.

The Code

Add this before your closing </body> tag:

<!-- WhatsApp Floating Button -->
<a href="https://mssg.to/YOUR-LINK"
   target="_blank"
   rel="noopener noreferrer"
   style="position:fixed;bottom:24px;right:24px;z-index:9999;background:#25D366;color:white;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.15);text-decoration:none;font-size:28px;transition:transform 0.2s;"
   onmouseover="this.style.transform='scale(1.1)'"
   onmouseout="this.style.transform='scale(1)'">
  💬
</a>

This creates a floating green circle in the bottom-right corner with a chat icon. It stays visible as the user scrolls.

Customize It

Use a WhatsApp SVG icon instead of emoji:

Replace the 💬 with an SVG for a more professional look:

<svg viewBox="0 0 24 24" width="28" height="28" 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-.347z"/>
  <path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.611.611l4.458-1.495A11.952 11.952 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.387 0-4.592-.822-6.332-2.199l-.44-.357-2.634.883.883-2.634-.357-.44A9.935 9.935 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
</svg>

Position it on the left instead: Change right:24px to left:24px.

Make it appear after a delay: Add opacity:0 to the style, then use JavaScript:

<script>
  setTimeout(() => {
    document.querySelector('[data-wa-widget]').style.opacity = '1';
  }, 3000); // appears after 3 seconds
</script>

(And add data-wa-widget to the anchor tag.)

Pros:

• Always visible — follows the user as they scroll
• Professional look
• No external scripts to load

Cons:

• Can overlap with other floating elements (chat widgets, cookie banners)
• May need z-index adjustments

---

Which Method Should You Choose?

Method	Best For	Analytics	Difficulty
HTML Button	Simple websites, blog posts	❌	Easy
Short Link (mssg.to)	Businesses that want tracking	✅	Easy
Floating Widget	E-commerce, service businesses	✅ (with mssg.to link)	Easy

Our recommendation: Use Method 2 (short link) even if you're going with a floating widget. The analytics alone are worth it — and it takes the same amount of effort.

---

Platform-Specific Guides

WordPress

1. Create your link on mssg.to
2. Add a Custom HTML block where you want the button
3. Paste the HTML from Method 1, 2, or 3
4. Publish

For a floating widget, paste the code in Appearance → Theme Editor → footer.php (before </body>), or use a plugin like "Insert Headers and Footers."

Shopify

1. Go to Online Store → Themes → Edit Code
2. Open theme.liquid
3. Paste the floating widget code before </body>
4. Save

Wix

1. Add an Embed → Custom Element or HTML iframe
2. Paste the button HTML
3. Publish

Or use Wix's built-in "Chat" button and set it to open your WhatsApp link.

Squarespace

1. Go to Settings → Advanced → Code Injection
2. Paste the floating widget code in the Footer section
3. Save

---

Common Mistakes to Avoid

1. Wrong Phone Number Format

The most common error. Your number must be in international format without the plus sign, spaces, or dashes.

❌ +57 300 123 4567 ❌ 57-300-123-4567 ✅ 573001234567

2. Not URL-Encoding the Message

Spaces in your pre-filled message must be %20 (or use +). Special characters need encoding too.

❌ ?text=Hi I want to buy ✅ ?text=Hi%20I%20want%20to%20buy

Pro tip: Use mssg.to and it handles encoding automatically.

3. Using a Personal Number for Business

If you're adding a WhatsApp button for your business, use a WhatsApp Business account. It gives you:

• Business profile (logo, description, hours)
• Auto-replies and quick replies
• Labels for organizing chats
• Catalog for products

4. No Pre-filled Message

A blank chat is intimidating. Always include a pre-filled message like:

• "Hi! I found you on your website"
• "Hello, I'm interested in your services"
• "Hi! I'd like to know more about [product]"

This breaks the ice and gives you context about where the customer came from.

5. Not Tracking Clicks

If you don't know how many people click your button, you can't optimize it. Use mssg.to to track clicks for free.

---

Real Results: What to Expect

After adding a WhatsApp button to your website, you can typically expect:

• 2-5x more conversations compared to contact forms
• Faster response times (WhatsApp feels instant; email feels slow)
• Higher customer satisfaction (messaging is their preferred channel)
• Lower bounce rate on pages with the button (visitors engage instead of leaving)

The key is placement. Put the button where visitors make decisions:

• Product pages
• Pricing pages
• Contact page
• Checkout page (for support questions)

---

Wrapping Up

Adding a WhatsApp button to your website takes less than 5 minutes and can dramatically increase customer conversations. Here's the quick version:

1. Get a WhatsApp link — either wa.me/YOURNUMBER or a short link from mssg.to
2. Add it to your site — as a button, a floating widget, or both
3. Track performance — use mssg.to analytics to see if it's working

The best part? It's completely free. WhatsApp charges nothing for click-to-chat, and mssg.to's free plan includes 5 links with full analytics.

Create your WhatsApp button link free →