WhatsApp chat widget for support

A WhatsApp chat widget enables users to instantly connect with your support or sales team via WhatsApp. When implemented on a website, it appears as a button (often floating at the bottom corner), and upon clicking, it redirects the user to WhatsApp (desktop or mobile app) with a pre-filled message.

There are three major ways to add a WhatsApp chat widget:

Manual Integration using basic HTML and links
Using Third-Party Tools like Elfsight, Chaty, or GetButton
Custom JavaScript Widget for better control

Section 1: Manual WhatsApp Chat Link Integration

This is the simplest way to add WhatsApp chat support.

Step 1: Use WhatsApp API Link

WhatsApp provides an official link format:

https://wa.me/yourPhoneNumber?text=yourTextMessage

Replace yourPhoneNumber with your number in international format (without + or 0)
Replace yourTextMessage with a URL-encoded message

Example:

<a href="https://wa.me/15551234567?text=Hi%20I%20need%20support" target="_blank">
  Chat with us on WhatsApp
</a>

Step 2: Customize the Button Appearance

<a href="https://wa.me/15551234567?text=Hello%2C%20I%20need%20help!" target="_blank" style="
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: white;
  padding: 12px 20px;
  border-radius: 50px;
  font-family: Arial, sans-serif;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 9999;
">
  Chat with us
</a>

Section 2: WhatsApp Floating Chat Widget Using Custom JavaScript

This method adds an interactive widget with a WhatsApp icon.

Step 1: HTML Container

Add this in your HTML body:

<div id="whatsapp-chat"></div>

Step 2: JavaScript for Floating Chat

<script>
  const whatsappNumber = "15551234567"; // Your number
  const message = "Hello, I have a question!";
  const encodedMessage = encodeURIComponent(message);
  const link = `https://wa.me/${whatsappNumber}?text=${encodedMessage}`;

  const widget = document.createElement("a");
  widget.href = link;
  widget.target = "_blank";
  widget.style.cssText = `
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25D366;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    padding: 15px;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  `;
  widget.innerHTML = "💬";

  document.getElementById("whatsapp-chat").appendChild(widget);
</script>

You can replace the emoji 💬 with an image of the WhatsApp icon for a more branded look:

widget.innerHTML = '<img src="https://img.icons8.com/ios-filled/30/ffffff/whatsapp.png" />';

Section 3: Using Third-Party Tools

Third-party platforms make integration easier and provide rich features like:

Multiple agents
Operating hours
Custom themes
Auto-responses

Popular Tools:

Elfsight (https://elfsight.com)
- Sign up and configure a WhatsApp widget
- Copy the script and paste into your website
Chaty (https://chaty.app)
- Offers WhatsApp along with Messenger, Telegram, etc.
- WordPress plugin available
GetButton.io (https://getbutton.io)
- Free and easy to use
- Supports multiple chat options

Steps (Generic):

Visit the provider’s site
Choose WhatsApp and customize your message, design, and position
Copy the generated code snippet
Paste it into your website’s <head> or before the closing </body> tag

Example Snippet from GetButton.io:

<script type="text/javascript">
    (function () {
        var options = {
            whatsapp: "15551234567",
            call_to_action: "Message us",
            position: "right",
        };
        var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
        var s = document.createElement("script");
        s.type = "text/javascript"; s.async = true; s.src = url + "/widget-send-button/js/init.js";
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName("script")[0]; x.parentNode.insertBefore(s, x);
    })();
</script>

Section 4: Custom Features and Enhancements

Predefined Messages with URL Encoding

const message = encodeURIComponent("Hi, I'm interested in your service");
const whatsappURL = `https://wa.me/15551234567?text=${message}`;

Add Analytics Event on Click

widget.addEventListener("click", () => {
  gtag('event', 'whatsapp_click', {
    'event_category': 'engagement',
    'event_label': 'WhatsApp Chat Clicked'
  });
});

Hide Widget Outside Business Hours

<script>
  const now = new Date();
  const hour = now.getHours();
  if (hour >= 9 && hour <= 18) {
    document.getElementById("whatsapp-chat").style.display = "block";
  } else {
    document.getElementById("whatsapp-chat").style.display = "none";
  }
</script>

Security and Best Practices

Use official API links: Prevents phishing and redirects
Keep business WhatsApp active: Ensure timely response
Use Business Profile: Add display name, logo, business info
Track click-through rates using analytics
Customize styling to match website theme

Common Use Cases

Customer support chat
Pre-sales queries
Booking confirmations
After-sales follow-ups
Marketing opt-ins

Leave a Reply Cancel reply