
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
wa-chat-widget
Advanced tools
A lightweight, customizable WhatsApp chat widget that adds a floating WhatsApp button to your website. When clicked, it opens a WhatsApp chat with a pre-defined message.
npm install wa-chat-widget
<script src="https://unpkg.com/wa-chat-widget@1.0.0/dist/wa-chat-widget.js"></script>
import WaChatWidget from 'wa-chat-widget';
const widget = new WaChatWidget({
phoneNumber: '1234567890',
message: "Hello! I'm interested in your services"
});
<script src="https://unpkg.com/wa-chat-widget@1.0.0/dist/wa-chat-widget.js"></script>
<script>
const widget = new WaChatWidget({
phoneNumber: '1234567890',
message: "Hello! I'm interested in your services"
});
</script>
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 |
new WaChatWidget({
phoneNumber: '1234567890'
});
new WaChatWidget({
phoneNumber: '1234567890',
backgroundColor: '#075e54',
textColor: '#ffffff',
size: '70px',
position: 'top-right'
});
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'
});
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();
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'
});
Method | Description |
---|---|
show() | Shows the widget |
hide() | Hides the widget |
destroy() | Removes the widget from DOM |
updateOptions(options) | Updates widget configuration |
git checkout -b feature/amazing-feature
git commit -m 'Add some amazing feature'
git push origin feature/amazing-feature
This project is licensed under the GPL-3.0 License - see the LICENSE file for details.
Raghu Chinnannan
For support, please open an issue in the GitHub repository.
FAQs
A simple WhatsApp chat widget for websites
The npm package wa-chat-widget receives a total of 7 weekly downloads. As such, wa-chat-widget popularity was classified as not popular.
We found that wa-chat-widget demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.