Direct WhatsApp Links
Implement instant WhatsApp communication with pre-filled messages for better customer experience.
Business Communication Platform
Connect with customers through WhatsApp Business integration
This guide provides comprehensive implementation guidelines for integrating WhatsApp Business communication into your platform. The integration supports both direct WhatsApp links and fallback scenarios when chat widgets are unavailable.
Implement WhatsApp direct link functionality for users who prefer instant messaging:
<!-- Basic WhatsApp Direct Link -->
<a
href="https://wa.me/YOUR_WHATSAPP_NUMBER?text=Hello%20Support%2C%20I%20need%20assistance."
target="_blank"
class="whatsapp-support-btn"
rel="noopener noreferrer">
<!-- WhatsApp icon -->
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/whatsapp/whatsapp-original.svg"
alt="WhatsApp Icon"
width="24"
height="24"/>
WhatsApp Support
</a>
For more advanced implementations with user context:
<!-- WhatsApp Integration with User Context -->
<script>
/**
* Generate WhatsApp link with user context
* @param {string} phoneNumber - WhatsApp Business number
* @param {Object} userContext - User information for personalized message
* @returns {string} Complete WhatsApp URL
*/
function generateWhatsAppLink(phoneNumber, userContext = {}) {
const baseMessage = "Hello Support, I need assistance";
// Build personalized message
let message = baseMessage;
if (userContext.userName) {
message += ` (User: ${userContext.userName})`;
}
if (userContext.userEmail) {
message += ` (Email: ${userContext.userEmail})`;
}
if (userContext.issue) {
message += ` regarding: ${userContext.issue}`;
}
// URL encode the message
const encodedMessage = encodeURIComponent(message);
return `https://wa.me/${phoneNumber}?text=${encodedMessage}`;
}
/**
* Open WhatsApp with user context
* @param {Object} userContext - User information
*/
function openWhatsAppSupport(userContext = {}) {
const whatsappNumber = "YOUR_WHATSAPP_NUMBER"; // Replace with your number
const whatsappUrl = generateWhatsAppLink(whatsappNumber, userContext);
// Track WhatsApp activation for analytics
if (window.gtag) {
gtag('event', 'whatsapp_opened', {
'event_category': 'support',
'event_label': 'whatsapp_direct'
});
}
// Open WhatsApp
window.open(whatsappUrl, '_blank', 'noopener,noreferrer');
}
</script>
<!-- WhatsApp Button with Dynamic Context -->
<button
onclick="openWhatsAppSupport({userName: 'John Doe', userEmail: '[email protected]'})"
class="whatsapp-support-btn"
type="button">
<!-- WhatsApp icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<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-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
</svg>
WhatsApp Support
</button>
Use WhatsApp as a fallback when chat widgets are unavailable:
/**
* Opens chat widget with WhatsApp fallback
* Integrates with Kontato chat widget or falls back to WhatsApp
*/
function openSupportChannel() {
try {
// Try to open chat widget first
if (window.kontatoChat && typeof window.kontatoChat.open === 'function') {
// Open the chat widget
window.kontatoChat.open();
// Track chat activation
if (window.gtag) {
gtag('event', 'chat_opened', {
'event_category': 'support',
'event_label': 'kontato_widget'
});
}
} else {
// Fallback to WhatsApp if chat widget is not available
console.warn('Chat widget not loaded. Opening WhatsApp fallback...');
openWhatsAppSupport();
}
} catch (error) {
// Error handling - fallback to WhatsApp
console.error('Error opening chat:', error);
openWhatsAppSupport();
}
}
/**
* Auto-fallback based on device detection
* Prefer WhatsApp on mobile devices
*/
function openPreferredSupportChannel() {
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobile) {
// Prefer WhatsApp on mobile devices
openWhatsAppSupport();
} else {
// Prefer chat widget on desktop
openSupportChannel();
}
}
Create specific message templates for different support scenarios:
const messageTemplates = {
general: "Hello Support, I need assistance with my account.",
technical: "Hello Support, I'm experiencing technical issues.",
billing: "Hello Support, I have a question about billing.",
account: "Hello Support, I need help with my account settings.",
emergency: "Hello Support, I have an urgent issue that needs immediate attention."
};
/**
* Open WhatsApp with specific message template
* @param {string} templateKey - Key for message template
* @param {Object} userContext - Additional user context
*/
function openWhatsAppWithTemplate(templateKey, userContext = {}) {
const template = messageTemplates[templateKey] || messageTemplates.general;
const whatsappNumber = "YOUR_WHATSAPP_NUMBER";
let message = template;
// Add user context if available
if (userContext.userName) {
message += ` (User: ${userContext.userName})`;
}
if (userContext.orderId) {
message += ` (Order ID: ${userContext.orderId})`;
}
const encodedMessage = encodeURIComponent(message);
const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${encodedMessage}`;
window.open(whatsappUrl, '_blank', 'noopener,noreferrer');
}
<!-- Support Menu with Template Options -->
<div class="support-menu">
<button onclick="openWhatsAppWithTemplate('general')" class="support-option">
General Support
</button>
<button onclick="openWhatsAppWithTemplate('technical')" class="support-option">
Technical Issues
</button>
<button onclick="openWhatsAppWithTemplate('billing')" class="support-option">
Billing Questions
</button>
<button onclick="openWhatsAppWithTemplate('emergency')" class="support-option">
Urgent Support
</button>
</div>
Ensure your WhatsApp Business number is in the correct international format:
// Correct formats
const whatsappNumbers = {
brazil: "5511999999999", // +55 11 99999-9999
usa: "15551234567", // +1 555-123-4567
uk: "447911123456", // +44 7911 123456
international: "COUNTRYCODE + NUMBER"
};
// Example implementation
const WHATSAPP_NUMBER = "5511999999999"; // Replace with your actual number
Properly encode messages for URL compatibility:
/**
* Properly encode WhatsApp message for URL
* @param {string} message - Raw message text
* @returns {string} URL-encoded message
*/
function encodeWhatsAppMessage(message) {
// Replace common characters that need encoding
return encodeURIComponent(message)
.replace(/'/g, '%27')
.replace(/"/g, '%22')
.replace(/&/g, '%26');
}
Implement analytics to track WhatsApp usage:
/**
* Track WhatsApp interaction events
* @param {string} action - Action type (opened, clicked, etc.)
* @param {Object} metadata - Additional tracking data
*/
function trackWhatsAppEvent(action, metadata = {}) {
// Google Analytics 4
if (window.gtag) {
gtag('event', `whatsapp_${action}`, {
'event_category': 'support',
'event_label': 'whatsapp_business',
'custom_parameters': JSON.stringify(metadata)
});
}
// Facebook Pixel
if (window.fbq) {
fbq('track', 'Contact', {
content_category: 'whatsapp_support',
content_name: action
});
}
// Custom analytics
if (window.customAnalytics) {
window.customAnalytics.track('whatsapp_interaction', {
action: action,
timestamp: new Date().toISOString(),
...metadata
});
}
}
WhatsApp link not working on desktop
Message encoding problems
encodeURIComponent()
functionMobile compatibility issues
Analytics not tracking
For WhatsApp Business integration support: