WhatsApp Chat Support - Documentation

Introduction

WhatsApp Chat Support is a versatile plugin that adds a floating WhatsApp chat widget to your website. It supports multiple agents, customizable appearance, and is available both as a jQuery plugin and a WordPress plugin.

Features

Multiple agents support with avatars, roles, and online/offline status
Modern UI with smooth animations and transitions
Enhanced status indicators with animated dots
Fully customizable appearance (colors, position, offset)
Pre-filled message templates
Smart Mobile/Desktop WhatsApp detection
Fully responsive design with mobile optimizations
Easy integration with minimal setup

Installation

jQuery Version

Include jQuery and the plugin files:

<link rel="stylesheet" href="src/jquery/whatsapp-chat-support.animations.css">
<link rel="stylesheet" href="src/jquery/whatsapp-chat-support.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="src/jquery/whatsapp-chat-support.js"></script>

Add a container div:
```
<div id="wacs"></div>
```

Initialize the plugin:

$('#wacs').whatsappChatSupport({
    title: 'Chat Support',
    subtitle: 'How can we help?',
    agents: [{
        name: 'John Doe',
        role: 'Support Agent',
        phone: '15551234567'
    }]
});

WordPress Version

Go to WordPress admin panel > Plugins > Add New
Click "Upload Plugin" and choose the plugin ZIP file
Click "Install Now" and then "Activate"
Go to Settings > WhatsApp Chat to configure the plugin

jQuery Usage

The plugin is initialized with the following syntax:

$(selector).whatsappChatSupport(options);

Basic Example

$('#wacs').whatsappChatSupport({
    title: 'Chat Support',
    subtitle: 'Click one of our representatives below',
    position: 'right',
    agents: [{
        name: 'John Doe',
        role: 'Customer Support',
        phone: '15551234567',
        avatar: 'path/to/avatar.jpg',
        prefilledMessage: 'Hi, I have a question about...'
    }]
});

WordPress Usage

Settings Page

Configure the widget in WordPress admin under Settings > WhatsApp Chat:

Set widget title and subtitle
Choose widget position and colors
Add and manage support agents
Configure behavior options

Shortcode Usage

You can add the widget anywhere using the shortcode:

[wacs]

With custom attributes:

[wacs position="left" title="Chat with us"]

Options & Configuration

General Options

Option	Type	Default	Description
title	string	'WhatsApp Chat Support'	Widget title text
subtitle	string	'Click one of our representatives below to chat'	Widget subtitle text
position	string	'right'	Widget position ('left' or 'right')
offsetX	number	20	Horizontal offset from the edge
offsetY	number	20	Vertical offset from bottom
buttonBackground	string	'#25d366'	Button background color
buttonColor	string	'#ffffff'	Button icon color
autoOpen	boolean	false	Auto-open widget on page load
openInNewTab	boolean	true	Open WhatsApp in new tab

Agent Options

Option	Type	Required	Description
name	string	Yes	Agent's name
phone	string	Yes	WhatsApp number with country code
role	string	No	Agent's role or department
avatar	string	No	URL to agent's avatar image
prefilledMessage	string	No	Default message when starting chat

Examples

Single Agent Setup

$('#wacs').whatsappChatSupport({
    title: 'Need Help?',
    subtitle: 'Chat with our support team',
    agents: [{
        name: 'John Support',
        role: 'Customer Service',
        phone: '15551234567',
        prefilledMessage: 'Hi, I need help with...'
    }]
});

Multiple Agents with Custom Styling

$('#wacs').whatsappChatSupport({
    title: 'Contact Us',
    subtitle: 'Choose a department below',
    position: 'left',
    offsetX: 30,
    buttonBackground: '#25d366',
    buttonColor: '#fff',
    agents: [{
        name: 'Sales Team',
        role: 'Sales & Pricing',
        phone: '15551234567',
        avatar: 'https://example.com/sales-avatar.jpg',
        isOnline: true,
        prefilledMessage: 'Hi, I\'m interested in your products'
    }, {
        name: 'Tech Support',
        role: 'Technical Help',
        phone: '15559876543',
        avatar: 'https://example.com/support-avatar.jpg',
        isOnline: false,
        prefilledMessage: 'Hi, I need technical assistance'
    }]
});

Frequently Asked Questions

How do I format phone numbers?

Enter the full phone number including country code, without spaces or special characters (e.g., "15551234567" for US number +1 (555) 123-4567).

Can I use the widget multiple times on one page?

Yes, you can initialize the widget on multiple containers with different configurations.

Why isn't the widget showing up?

Ensure jQuery is loaded before the plugin script and check browser console for any errors.

How do I customize the styling?

You can override the CSS classes in your stylesheet or use the provided color and position options.

Support

For support, bug reports, or feature requests, please contact us through:

CodeCanyon item comments
Email: support@example.com
Documentation updates: Visit our website