Documentation

Installation#

Using npm

npm install wa-chat-widget

Using CDN

<script src="https://cdn.jsdelivr.net/npm/wa-chat-widget@1.0.3/dist/wa-chat-widget.js"></script>

or

<script src="https://unpkg.com/wa-chat-widget@1.0.3/dist/wa-chat-widget.js"></script>

Usage#

Note:

The Phone number should be entered in the international format without the + sign. For eg: If your number is +1 234-567-9898, then you should enter the phone number as 12345679898.

ES6 Module#

import WaChatWidget from 'wa-chat-widget';
    
    const widget = new WaChatWidget({
        phoneNumber: '1234567890',
        message: "Hello! I'm interested in your services"
    });

Script Tag#

<script src="https://cdn.jsdelivr.net/npm/wa-chat-widget@1.0.3/dist/wa-chat-widget.js"></script>
    <script>
        const widget = new WaChatWidget({
            phoneNumber: '1234567890',
            message: "Hello! I'm interested in your services"
        });
    </script>

Configuration Options#

Option Type Default Description
phoneNumber string '' WhatsApp number in international format without + symbol in front (required)
message string "I'm interested to know more about your offerings." Default message
position string 'bottom-right' Widget position ('top-left', 'top-right', 'bottom-left', 'bottom-right')
backgroundColor string '#25D366' Background color of the widget
textColor string '#fff' Color of the WhatsApp icon
size string '60px' Size of the widget
showTooltip boolean true Show/hide tooltip on hover
tooltipText string 'Chat with us' Text to show in tooltip

Examples#

Basic Usage#

new WaChatWidget({
        phoneNumber: '1234567890'
    });

Custom Styling#

new WaChatWidget({
        phoneNumber: '1234567890',
        backgroundColor: '#075e54',
        textColor: '#ffffff',
        size: '70px',
        position: 'top-right'
    });

Multi-Language Support#

const userLanguage = navigator.language.substring(0, 2);
    const messages = {
        en: "Hi, I'd like to know more",
        es: "Hola, me gustaría saber más",
        fr: "Bonjour, j'aimerais en savoir plus"
    };
    
    new WaChatWidget({
        phoneNumber: '1234567890',
        message: messages[userLanguage] || messages.en,
        tooltipText: 'Chat with us'
    });

Dynamic Control#

const widget = new WaChatWidget({
        phoneNumber: '1234567890'
    });
    
    // Hide widget
    widget.hide();
    
    // Show widget
    widget.show();
    
    // Update options
    widget.updateOptions({
        backgroundColor: '#128C7E',
        size: '65px'
    });
    
    // Destroy widget
    widget.destroy();

Business Hours#

function isBusinessHours() {
        const now = new Date();
        const hours = now.getHours();
        const day = now.getDay();
        return day >= 1 && day <= 5 && hours >= 9 && hours < 17;
    }
    
    new WaChatWidget({
        phoneNumber: '1234567890',
        message: isBusinessHours() 
            ? "Hi, I'd like to speak with your team"
            : "Hi, I'd like to leave a message",
        tooltipText: isBusinessHours()
            ? "Chat with us now!"
            : "Leave us a message",
        backgroundColor: isBusinessHours() ? '#25D366' : '#128C7E'
    });

API Methods#

Method Description
show() Shows the widget
hide() Hides the widget
destroy() Removes the widget from DOM
updateOptions(options) Updates widget configuration

Browser Support#