Blog.

integrate whatsapp chat on website

Cover Image for integrate whatsapp chat on website
SDX VISION
SDX VISION

Integrating WhatsApp chat on your website enables direct communication with visitors, improving customer support and lead generation. This guide will teach you how to add WhatsApp chat functionality.

Why Add WhatsApp Chat?

Benefits:

  • High Engagement: 98% message open rate
  • Familiar Platform: Users comfortable with WhatsApp
  • Quick Responses: Instant communication
  • Mobile-Friendly: Works on all devices
  • Cost-Effective: Free to implement

Implementation Methods

Method 1: Simple Click-to-Chat Link

Simplest Approach:

HTML Implementation:

<a href="https://wa.me/919876543210?text=Hello" 
   target="_blank" 
   class="whatsapp-button">
  Chat on WhatsApp
</a>

URL Format:

https://wa.me/[phone_number]?text=[message]

Phone Number Format:

  • Country code + number (no +, spaces, or dashes)
  • Example: 919876543210 (India: +91 98765 43210)

Pre-filled Message:

https://wa.me/919876543210?text=Hi,%20I%20am%20interested%20in%20your%20services

Method 2: Floating Chat Widget

HTML/CSS/JavaScript:

<!-- WhatsApp Widget -->
<div id="whatsapp-widget" class="whatsapp-widget">
  <a href="https://wa.me/919876543210?text=Hello" 
     target="_blank"
     class="whatsapp-float">
    <svg><!-- WhatsApp icon SVG --></svg>
  </a>
</div>

<style>
.whatsapp-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.whatsapp-float {
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float svg {
  width: 35px;
  height: 35px;
  fill: white;
}
</style>

Method 3: Advanced Widget with Popup

Full Implementation:

<div id="whatsapp-chat-widget">
  <!-- Chat Button -->
  <button id="whatsapp-toggle" class="whatsapp-toggle">
    <svg><!-- WhatsApp icon --></svg>
  </button>
  
  <!-- Chat Popup -->
  <div id="whatsapp-popup" class="whatsapp-popup">
    <div class="whatsapp-header">
      <h3>Chat with Us</h3>
      <button id="whatsapp-close">×</button>
    </div>
    <div class="whatsapp-body">
      <p>Hi! How can we help you?</p>
      <a href="https://wa.me/919876543210?text=Hello" 
         target="_blank" 
         class="whatsapp-start-chat">
        Start Chat
      </a>
    </div>
  </div>
</div>

<style>
.whatsapp-chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.whatsapp-popup {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 300px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  display: none;
}

.whatsapp-popup.active {
  display: block;
}

.whatsapp-header {
  background: #25D366;
  color: white;
  padding: 15px;
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.whatsapp-body {
  padding: 20px;
}

.whatsapp-start-chat {
  display: block;
  background: #25D366;
  color: white;
  padding: 12px 20px;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  margin-top: 10px;
}
</style>

<script>
const toggle = document.getElementById('whatsapp-toggle');
const popup = document.getElementById('whatsapp-popup');
const close = document.getElementById('whatsapp-close');

toggle.addEventListener('click', () => {
  popup.classList.toggle('active');
});

close.addEventListener('click', () => {
  popup.classList.remove('active');
});
</script>

WordPress Integration

Plugin Method:

Popular Plugins:

  • Click to Chat
  • WhatsApp Chat
  • WP Chat App

Setup:

  1. Install plugin
  2. Configure phone number
  3. Customize appearance
  4. Set display options
  5. Activate widget

Manual Integration:

Add to Theme:

// functions.php
function add_whatsapp_widget() {
  ?>
  <div class="whatsapp-widget">
    <a href="https://wa.me/919876543210?text=Hello" 
       target="_blank"
       class="whatsapp-float">
      <img src="<?php echo get_template_directory_uri(); ?>/whatsapp-icon.svg" alt="WhatsApp">
    </a>
  </div>
  <?php
}
add_action('wp_footer', 'add_whatsapp_widget');

React/Next.js Integration

Component Example:

// components/WhatsAppWidget.jsx
'use client';

import { useState } from 'react';

export default function WhatsAppWidget() {
  const [isOpen, setIsOpen] = useState(false);
  const phoneNumber = '919876543210';
  const message = 'Hello, I am interested in your services';
  
  const whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
  
  return (
    <div className="fixed bottom-6 right-6 z-50">
      {isOpen && (
        <div className="absolute bottom-20 right-0 w-72 bg-white rounded-lg shadow-lg p-4">
          <div className="flex justify-between items-center mb-3">
            <h3 className="font-semibold">Chat with Us</h3>
            <button 
              onClick={() => setIsOpen(false)}
              className="text-gray-500 hover:text-gray-700"
            >
              ×
            </button>
          </div>
          <p className="text-sm text-gray-600 mb-3">
            Hi! How can we help you?
          </p>
          <a
            href={whatsappUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="block bg-[#25D366] text-white text-center py-2 px-4 rounded hover:bg-[#20BA5A] transition"
          >
            Start Chat on WhatsApp
          </a>
        </div>
      )}
      
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="bg-[#25D366] w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition-transform"
        aria-label="WhatsApp Chat"
      >
        <svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
          <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-.372a9.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 00-3.48-8.413Z"/>
        </svg>
      </button>
    </div>
  );
}

Advanced Features

1. Auto-Detect User Message

Implementation:

// Get page context for pre-filled message
const getPageContext = () => {
  const pageTitle = document.title;
  const pageUrl = window.location.href;
  return `Hi, I'm interested in: ${pageTitle} - ${pageUrl}`;
};

const whatsappUrl = `https://wa.me/919876543210?text=${encodeURIComponent(getPageContext())}`;

2. Multiple Phone Numbers

Implementation:

const phoneNumbers = {
  sales: '919876543210',
  support: '919876543211',
  general: '919876543212'
};

// Show options to user
function showPhoneOptions() {
  // Display buttons for different departments
}

3. Schedule-Based Display

Show During Business Hours:

function isBusinessHours() {
  const now = new Date();
  const hour = now.getHours();
  const day = now.getDay();
  
  // Monday-Friday, 9 AM - 6 PM
  if (day >= 1 && day <= 5 && hour >= 9 && hour < 18) {
    return true;
  }
  return false;
}

if (isBusinessHours()) {
  // Show WhatsApp widget
} else {
  // Show "We'll respond when we're back" message
}

4. Analytics Tracking

Track Clicks:

function trackWhatsAppClick() {
  // Google Analytics
  gtag('event', 'whatsapp_click', {
    'event_category': 'engagement',
    'event_label': 'WhatsApp Chat'
  });
  
  // Or custom analytics
  fetch('/api/analytics', {
    method: 'POST',
    body: JSON.stringify({ event: 'whatsapp_click' })
  });
}

document.querySelector('.whatsapp-button').addEventListener('click', trackWhatsAppClick);

Styling Options

Custom Styling:

/* Modern WhatsApp Widget */
.whatsapp-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.whatsapp-button {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25D366 0%, #20BA5A 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  animation: pulse 2s infinite;
}

.whatsapp-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

@keyframes pulse {
  0% {
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.6);
  }
  100% {
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  }
}

Mobile Optimization

Responsive Design:

/* Mobile adjustments */
@media (max-width: 768px) {
  .whatsapp-widget {
    bottom: 15px;
    right: 15px;
  }
  
  .whatsapp-button {
    width: 56px;
    height: 56px;
  }
  
  .whatsapp-popup {
    width: calc(100% - 40px);
    right: 20px;
    left: 20px;
  }
}

Best Practices

1. Phone Number Format

Correct Format:

  • Country code + number
  • No spaces, dashes, or +
  • Example: 919876543210

Wrong Formats:

  • +91 98765 43210
  • 91-98765-43210
  • (91) 98765 43210

2. Pre-filled Messages

Best Practices:

  • Keep messages short
  • Make them relevant
  • Include context
  • Be friendly

Examples:

  • "Hi, I'm interested in your services"
  • "Hello, I'd like to know more about [product]"
  • "Hi, I saw your website and want to learn more"

3. Widget Placement

Best Positions:

  • Bottom right (most common)
  • Bottom left
  • Fixed position
  • Visible but not intrusive

4. User Experience

Considerations:

  • Easy to find
  • Clear purpose
  • Quick access
  • Mobile-friendly
  • Non-intrusive

Testing

Testing Checklist:

  • [ ] Widget displays correctly
  • [ ] Click opens WhatsApp
  • [ ] Phone number is correct
  • [ ] Message pre-fills properly
  • [ ] Works on mobile
  • [ ] Works on desktop
  • [ ] Styling is correct
  • [ ] Analytics tracking works

Common Issues

Issue 1: Link Not Working

Solutions:

  • Check phone number format
  • Verify URL encoding
  • Test on mobile device
  • Check WhatsApp installation

Issue 2: Widget Not Visible

Solutions:

  • Check z-index
  • Verify CSS
  • Check positioning
  • Test on different devices

Issue 3: Message Not Pre-filling

Solutions:

  • URL encode message
  • Check special characters
  • Verify message format
  • Test URL directly

Implementation Checklist

  • [ ] Phone number obtained
  • [ ] Implementation method chosen
  • [ ] Widget code added
  • [ ] Styling customized
  • [ ] Mobile optimized
  • [ ] Testing completed
  • [ ] Analytics configured
  • [ ] Launched

Next Steps

  1. Get Phone Number: Obtain WhatsApp Business number
  2. Choose Method: Select implementation approach
  3. Add Widget: Implement on website
  4. Customize: Style to match brand
  5. Test: Verify functionality
  6. Monitor: Track usage and responses

Thanks for reading the blog. If you want more help, do contact us at https://sdx.vision