Documentation
Installation
Using npm
npm install wa-chat-widget
Using CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/wa-chat-widget.js"></script>
or
<script src="https://unpkg.com/[email protected]/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/[email protected]/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
- Chrome (Latest)
- Firefox (Latest)
- Safari (Latest)
- Edge (Latest)
- Opera (Latest)