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.
Key Takeaways
- 1Use api.whatsapp.com/send for share buttons (opens WhatsApp with message)
- 2Use wa.me/PHONENUMBER for click-to-chat links to a specific number
- 3Phone numbers must include country code without + or leading zeros
- 4The text parameter sets the pre-filled message
- 5Links work on both mobile (opens app) and desktop (opens WhatsApp Web)
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:
https://api.whatsapp.com/send?text=Check%20out%20this%20article:%20https://example.com<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:
https://wa.me/15551234567?text=Hi,%20I%20have%20a%20question%20about%20your%20productPhone Number Format
Use the full international format without + or 00 prefix, and without dashes or spaces.
✓ Correct: 15551234567 (US number)
✗ Wrong: +1-555-123-4567, 01onal555123456
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.
| Parameter | Description | Example |
|---|---|---|
text | Pre-filled message (URL-encoded) | text=Hello%20there |
phone | Phone number (api.whatsapp.com only) | phone=15551234567 |
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.
| Format | Use Case | Example |
|---|---|---|
api.whatsapp.com/send | Share to any contact | ?text=Hello |
api.whatsapp.com/send | Chat with specific number | ?phone=15551234567&text=Hi |
wa.me/PHONE | Short URL for specific number | wa.me/15551234567?text=Hi |
wa.me | Share only (no number) | wa.me?text=Hello |
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
https://wa.me/15551234567?text=Hi,%20I%20need%20help%20with%20my%20order%20%23<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 messageThis 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:
| Device | Behavior |
|---|---|
| Mobile (WhatsApp installed) | Opens WhatsApp app directly |
| Mobile (no WhatsApp) | Opens app store to download |
| Desktop (WhatsApp Desktop installed) | Opens WhatsApp Desktop |
| Desktop (browser) | Opens WhatsApp Web in browser |
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.
Keep messages concise
Pre-filled messages should be short. Users can add more details.
Use line breaks for readability
Use %0A for line breaks in longer messages.
Include context in support chats
Pre-fill order numbers, product names, or page URLs so agents have context.
Don't use fake or test numbers
Only use real, active WhatsApp numbers for click-to-chat links.
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.