How to Create a WhatsApp Share Link

WhatsApp share links let users share content or start conversations with pre-filled messages. There are two main URL formats: one for sharing to any contact, and one for clicking to chat with a specific phone number.

Share to Any Contact

WhatsApp share links work differently from social media platforms. Instead of posting publicly, they open a private conversation. This makes WhatsApp particularly effective for e-commerce order confirmations, appointment reminders, and content that users want to share with specific friends or family.

Use this format for "Share on WhatsApp" buttons. It opens WhatsApp and lets the user choose who to send the message to:

<a href="https://api.whatsapp.com/send?text=Check%20out%20this%20article:%20https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  Share on WhatsApp
</a>

This HTML creates a share button that opens WhatsApp with your message pre-filled. The user then selects a contact or group to send it to. Including your URL in the message text gives recipients a clickable link to your content.

Click to Chat (Specific Number)

Click-to-chat links are different from share links because they open a conversation with a specific phone number. These are perfect for customer support buttons, sales inquiries, and any situation where you want customers to message your business directly.

Use wa.me to create links that open a chat with a specific phone number. Perfect for customer support or sales:

URL Parameters Reference

WhatsApp links are simpler than other social platforms, with only two main parameters. The key is getting the phone number format right and properly encoding your message text.

Understanding which URL format to use depends on whether you want users to choose their recipient or contact a specific number.

URL Format Comparison

WhatsApp supports multiple URL formats that behave slightly differently. The table below helps you choose the right format for your use case. All formats work on both mobile and desktop.

With the URL formats clear, let's look at practical implementations for common business scenarios.

Ready-to-Use Examples

These examples cover the most common WhatsApp integration patterns. Copy the code and replace the phone numbers and messages with your own business details.

Share Button for Website

<!-- Share current page -->
<a href="https://api.whatsapp.com/send?text=Check%20this%20out:%20https://example.com/article"
   class="whatsapp-share-btn">
  <img src="/whatsapp-icon.svg" alt="WhatsApp" />
  Share
</a>

<!-- With JavaScript for dynamic URL -->
<button onclick="shareOnWhatsApp()">Share on WhatsApp</button>

<script>
function shareOnWhatsApp() {
  const text = encodeURIComponent('Check out: ' + window.location.href);
  window.open('https://api.whatsapp.com/send?text=' + text, '_blank');
}
</script>

The JavaScript version dynamically includes the current page URL, making it reusable across your entire site. The encodeURIComponent function ensures special characters in the URL don't break the WhatsApp link.

Customer Support Chat

<a href="https://wa.me/15551234567?text=Hi,%20I%20need%20help%20with%20my%20order"
   class="whatsapp-support">
  Chat with Support
</a>

Support links should include helpful context in the pre-filled message. This saves customers time and helps your support team understand the issue faster.

Order Inquiry with Details

function createOrderInquiry(orderNumber, productName) {
  const message = `Hi! I have a question about my order:
Order #: ${orderNumber}
Product: ${productName}

Can you help me?`;

  const encoded = encodeURIComponent(message);
  return `https://wa.me/15551234567?text=${encoded}`;
}

// Usage
const link = createOrderInquiry('12345', 'Blue Widget');
// Opens WhatsApp with formatted message

This function generates order-specific inquiry links with formatted details. Template literals with backticks allow multi-line messages that are easy to read. The encoded output will display as formatted text in WhatsApp.

Building Links Dynamically

When integrating WhatsApp into web applications, you'll want reusable functions that handle URL construction and encoding. These utilities ensure consistent behavior across your site.

// Share to any contact
function createWhatsAppShareLink(message) {
  const url = new URL('https://api.whatsapp.com/send');
  url.searchParams.set('text', message);
  return url.toString();
}

// Click to chat with specific number
function createWhatsAppChatLink(phoneNumber, message) {
  // Remove any non-digit characters
  const cleanNumber = phoneNumber.replace(/\D/g, '');

  const url = new URL(`https://wa.me/${cleanNumber}`);
  if (message) {
    url.searchParams.set('text', message);
  }
  return url.toString();
}

// Usage
const shareLink = createWhatsAppShareLink('Check out https://example.com');
const chatLink = createWhatsAppChatLink('+1 (555) 123-4567', 'Hi there!');

The createWhatsAppChatLink function strips non-digit characters from phone numbers, so you can pass numbers in any format. This is especially useful when phone numbers come from user input or databases with inconsistent formatting.

React Component

For React applications, a reusable component makes WhatsApp integration consistent across your app. This component handles both share-to-anyone and click-to-chat modes based on whether you provide a phone number.

interface WhatsAppButtonProps {
  message: string;
  phoneNumber?: string;
  children: React.ReactNode;
}

function WhatsAppButton({ message, phoneNumber, children }: WhatsAppButtonProps) {
  const handleClick = () => {
    let url: URL;

    if (phoneNumber) {
      const cleanNumber = phoneNumber.replace(/\D/g, '');
      url = new URL(`https://wa.me/${cleanNumber}`);
    } else {
      url = new URL('https://api.whatsapp.com/send');
    }

    url.searchParams.set('text', message);
    window.open(url.toString(), '_blank');
  };

  return (
    <button onClick={handleClick} className="whatsapp-btn">
      {children}
    </button>
  );
}

// Usage
<WhatsAppButton message="Hi, I'm interested in your services">
  Chat with us
</WhatsAppButton>

<WhatsAppButton
  phoneNumber="+1-555-123-4567"
  message="Hello, I have a question"
>
  Contact Sales
</WhatsAppButton>

The component determines which URL format to use based on the phoneNumber prop. If omitted, it creates a share link. If provided, it creates a click-to-chat link. The phone number cleaning logic handles various input formats gracefully.

Mobile vs Desktop Behavior

WhatsApp links behave differently depending on the user's device and installed apps. Understanding this helps you set appropriate expectations and design better user experiences.

WhatsApp links behave differently based on the device:

You can optionally detect the device type to customize button text or behavior. However, the standard WhatsApp URLs handle cross-platform behavior automatically in most cases.

// Optional: Detect mobile for different UX
function isMobile() {
  return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
}

// Show different messaging based on device
const buttonText = isMobile()
  ? 'Open in WhatsApp'
  : 'Chat on WhatsApp Web';

This simple detection changes button text based on device type. Mobile users expect the WhatsApp app to open, while desktop users typically use WhatsApp Web in their browser.

Best Practices

These recommendations come from real-world implementations across e-commerce, customer support, and content sharing scenarios. Following them will improve both user experience and response rates.

With proper implementation, WhatsApp links can significantly increase customer engagement compared to traditional contact forms or email links.

Try the URL Builder

Use our WhatsApp Share URL template to build and test your links interactively.