How to Add a WhatsApp Link to Your Website, Button, Widget, or Simple Link

Want customers to reach you on WhatsApp directly from your website? Add a WhatsApp link. It gives visitors one tap from your page into a real conversation.

This guide shows three practical ways to add the link to your site: a button, a floating widget, or a simple text link. You can use a raw wa.me URL, or create a shorter trackable link with mssg.to. If visitors need context before they message, use a WhatsApp contact card instead of a direct redirect.

Why add a WhatsApp link to your website?

Forms are fine, but they make people wait. A WhatsApp link starts the conversation while the visitor is still interested.

It works especially well when:

• customers have a pre-purchase question
• you sell services, appointments, food, real estate, or local products
• your visitors are mostly on mobile
• you want fewer abandoned contact forms

The best part: WhatsApp click-to-chat links are free. The only decision is whether you want a plain wa.me link or a short link with analytics.

If you need the link format first, read wa.me link format. If you just want the fastest setup, use the free WhatsApp link generator.

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.

If you do not want a button, you can also use a simple text link like this:

<a href="https://wa.me/YOURNUMBER?text=Hi%20I%27m%20interested"
   target="_blank"
   rel="noopener noreferrer">
  Chat with us on WhatsApp
</a>

That works well in contact pages, footer links, and short paragraphs of copy.

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, cleaner URL, and you can see whether people actually click it.

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 are flying blind. With mssg.to, you can create a separate link for your homepage, pricing page, product page, or contact page and see which one gets clicked.

That matters because a WhatsApp button is usually not a one-time setup. You add it, watch where clicks come from, then move it closer to the pages that already have buying intent.

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.

---

Best Places to Add a WhatsApp Link on Your Website

The best spot depends on the page type:

• Contact page if you want a direct alternative to forms
• Pricing page if visitors often have pre-purchase questions
• Product or service pages if people need quick clarification before buying
• Sticky or floating widget if you want the link visible across the whole site
• Footer if you want a lightweight site-wide option

If your site gets different kinds of traffic, create separate links for different pages so you can track what actually drives conversations.

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.

---

How to know if your WhatsApp link is working

Do not judge the button by vibes. Track the basics:

• clicks from your homepage
• clicks from product or service pages
• clicks from your pricing page
• clicks from your contact page
• which pre-filled message gets the best replies

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

• product pages
• pricing pages
• contact page
• checkout or booking page
• high-intent blog posts

If one page gets clicks but weak replies, change the pre-filled message. If a page gets traffic but no clicks, move the button higher or make the copy more specific.

---

Final answer

To add a WhatsApp link to your website, create the link, paste it into a button or floating widget, and test it on mobile and desktop. Here is 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 free WhatsApp website link →

Related reading

• How to Create a WhatsApp Link
• wa.me Link Format
• WhatsApp Click to Chat Link
• Best WhatsApp Link Generators