How to Add a WhatsApp Share Button in a Website - 5 Methods with Examples

WhatsApp has over 2 billion active users worldwide, making it the most widely used messaging platform on the planet. If your website has content worth sharing — a blog post, a product, a news article, a recipe — adding a WhatsApp share button can significantly increase your reach, especially among mobile users in India, Southeast Asia, Latin America, and Europe where WhatsApp dominates messaging.

In this guide we will cover everything about adding a WhatsApp share button to your website — from the basic mobile-only link to a fully responsive button that works on both mobile and desktop, with custom styling, dynamic URLs, and best practices for getting the most shares.

How WhatsApp Sharing Works

WhatsApp provides two official URL schemes for sharing content from a website:

• whatsapp://send?text= — opens the WhatsApp app directly on mobile devices. Works only when WhatsApp is installed.
• https://wa.me/?text= — the modern, recommended URL that works on both mobile and desktop (opens WhatsApp Web on desktop browsers automatically).

The second option — wa.me — is the one you should use for any new project. It is the official WhatsApp API link, works universally, and automatically redirects mobile users to the app and desktop users to WhatsApp Web.

Method 1 — Basic WhatsApp Share Link

The simplest possible implementation — a plain HTML link that opens WhatsApp with a pre-filled message:

<!-- Basic WhatsApp share link -->
<a
  href="https://wa.me/?text=Check%20this%20out%3A%20https%3A%2F%2Ftipsandtricks.dev"
  target="_blank"
  rel="noopener noreferrer"
>
  Share on WhatsApp
</a>

Notice the URL is encoded — spaces become %20, colons become %3A, and forward slashes become %2F. Always encode your share text. We will show you how to do this automatically with JavaScript in the next section.

Method 2 — Dynamic Share Button (Recommended)

Instead of hardcoding the URL, use JavaScript to dynamically build the share link from the current page's title and URL. This way the same button works correctly on every page of your site:

<!-- HTML -->
<a id="whatsappShare" href="#" target="_blank" rel="noopener noreferrer">
  Share on WhatsApp
</a>

// JavaScript — build the share URL dynamically
function setWhatsAppLink() {
  const pageTitle = document.title;
  const pageUrl   = window.location.href;
  const message   = pageTitle + " — " + pageUrl;

  // encodeURIComponent handles all special characters automatically
  const whatsappUrl = "https://wa.me/?text=" + encodeURIComponent(message);

  document.getElementById("whatsappShare").href = whatsappUrl;
}

// Set the link when page loads
window.addEventListener("load", setWhatsAppLink);

When a user clicks this button, WhatsApp opens with the message pre-filled as: "How to Add a WhatsApp Share Button — https://tipsandtricks.dev/p/how-to-add-a-whatsapp-share-button-in-a-website"

Method 3 — Styled Button With WhatsApp Icon

A plain link is functional but does not look like a share button. Here is a properly styled WhatsApp button with the green color and icon that users immediately recognise:

<!-- HTML -->
<a id="whatsappBtn" href="#" target="_blank" rel="noopener noreferrer"
   class="whatsapp-btn">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
       viewBox="0 0 24 24" fill="white" style="vertical-align:middle; margin-right:8px;">
    <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.123.554 4.118 1.528 5.855L.057 23.882l6.2
             -1.448A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0
             22c-1.848 0-3.584-.48-5.095-1.323l-.363-.215-3.764.879.939-3.65-.236-.374
             A9.941 9.941 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
  </svg>
  Share on WhatsApp
</a>

/* CSS */
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  background-color: #25D366;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.whatsapp-btn:hover {
  background-color: #1da851;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.whatsapp-btn:active {
  transform: translateY(0);
}

Method 4 — Mobile Only Button (Hide on Desktop)

The original post used whatsapp:// which only works on mobile. If you specifically want a button that only shows on mobile devices (perhaps because you have a different share option for desktop), use CSS media queries:

/* CSS — hide button on desktop, show only on mobile */
.whatsapp-mobile-only {
  display: none; /* hidden by default */
}

@media screen and (max-width: 768px) {
  .whatsapp-mobile-only {
    display: inline-flex; /* visible only on mobile */
  }
}

<!-- This button is hidden on desktop, visible on mobile -->
<a
  href="whatsapp://send?text=Check this out: https://tipsandtricks.dev"
  class="whatsapp-mobile-only whatsapp-btn"
  data-action="share/whatsapp/share"
>
  Share on WhatsApp
</a>

Method 5 — Share With a Specific Phone Number

If you want to open a WhatsApp conversation directly with a specific number — useful for a "Contact Us on WhatsApp" button — add the phone number to the wa.me URL:

<!-- Opens WhatsApp chat with a specific number -->
<!-- Format: country code + number, no +, spaces, or dashes -->
<a
  href="https://wa.me/919876543210?text=Hello%2C%20I%20need%20help%20with..."
  target="_blank"
  rel="noopener noreferrer"
  class="whatsapp-btn"
>
  Chat With Us on WhatsApp
</a>

<!-- For India: country code is 91 -->
<!-- Number 98765 43210 becomes: 919876543210 -->

This is perfect for customer support buttons, freelancer contact buttons, or any business that uses WhatsApp for communication.

Complete Full Page Implementation

Here is a complete, production-ready HTML page with all the best practices in place — dynamic URL, styled button, mobile and desktop support:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How to Add WhatsApp Share Button</title>
  <style>
    .whatsapp-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background-color: #25D366;
      color: #ffffff;
      padding: 12px 24px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      font-size: 15px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    }

    .whatsapp-btn:hover {
      background-color: #1da851;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    }

    .share-section {
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid #374151;
    }
  </style>
</head>
<body>

  <article>
    <h1>Your Article Title Here</h1>
    <p>Your article content...</p>

    <!-- Share section at the bottom of article -->
    <div class="share-section">
      <p>Found this helpful? Share it with your network:</p>
      <a id="whatsappShare" href="#" target="_blank"
         rel="noopener noreferrer" class="whatsapp-btn">
        📱 Share on WhatsApp
      </a>
    </div>
  </article>

  <script>
    // Dynamically set the WhatsApp share URL
    (function() {
      const pageTitle = document.title;
      const pageUrl   = window.location.href;
      const message   = pageTitle + " — " + pageUrl;
      const waUrl     = "https://wa.me/?text=" + encodeURIComponent(message);

      document.getElementById("whatsappShare").href = waUrl;
    })();
  </script>

</body>
</html>

Adding to Your Existing Blog Post Pages

If you want to add a WhatsApp share button to every blog post on tipsandtricks.dev without editing each post individually, add it to your post layout template. Since you use Laravel + Vue, add it to your post detail Vue component:

<!-- In your PostDetail.vue or BlogPost.vue -->
<template>
  <div>
    <!-- your post content -->

    <!-- WhatsApp share button -->
    <div class="share-section mt-8 pt-8 border-t border-gray-700">
      <p class="text-gray-400 mb-4">Found this helpful? Share it!</p>
      <a :href="whatsappUrl" target="_blank" rel="noopener noreferrer"
         class="whatsapp-btn">
        📱 Share on WhatsApp
      </a>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({ post: Object })

// Build WhatsApp URL from post data
const whatsappUrl = computed(() => {
  const message = props.post.title + ' — ' + window.location.href
  return 'https://wa.me/?text=' + encodeURIComponent(message)
})
</script>

WhatsApp URL Formats — Quick Reference

Best Practices for WhatsApp Share Buttons

• Always use encodeURIComponent() — never manually encode URLs. JavaScript's built-in function handles all special characters correctly including emojis, accented characters, and symbols.
• Include both title and URL in the message — a shared message like "Check out: https://..." with no context gets fewer clicks than "JavaScript Tips for Beginners — https://tipsandtricks.dev/..."
• Always add target="_blank" — opens WhatsApp in a new tab so the user does not lose their place on your page.
• Always add rel="noopener noreferrer" — a security best practice when using target="_blank" to prevent the new tab from accessing your page's window object.
• Use the official WhatsApp green color (#25D366) — users immediately recognise this color as WhatsApp. Do not use a different color for the WhatsApp button.
• Place the button where it is visible — end of article, sticky bottom bar on mobile, or floating button on the side. A share button nobody sees does not get clicked.

Common Issues and Fixes

Button opens browser instead of WhatsApp app on mobile

This happens when you use whatsapp:// instead of https://wa.me/. Switch to the wa.me URL — it handles the app vs web redirect automatically.

Special characters break the URL

// ❌ Wrong — manual encoding misses characters
const url = "https://wa.me/?text=Hello World & more: " + pageUrl;

// ✅ Correct — always use encodeURIComponent
const url = "https://wa.me/?text=" + encodeURIComponent("Hello World & more: " + pageUrl);

Button not working on iOS Safari

Safari on iOS sometimes blocks WhatsApp deep links if they are not triggered directly by a user tap. Make sure your button is a real <a> tag with an href — not a JavaScript window.open() call, which Safari may block as a popup.

Final Thought

A WhatsApp share button is one of the simplest features you can add to a website that has a real measurable impact on traffic, especially for Indian audiences where WhatsApp is the primary way people share content. A single well-placed share button on a popular post can send hundreds of referral visitors over time.

Use the wa.me URL with a dynamic title and URL, style it with the official WhatsApp green, place it at the end of every blog post, and let your readers do the marketing for you.

Have questions about implementing this on your specific framework or CMS? Drop us a message on our contact page and we will help you get it working.

If you want to add more social sharing options, check out our guide on copying text to clipboard with JavaScript which pairs perfectly with share buttons.