xsukax WhatsApp Widget

📦 Installation

Add this single line to your HTML before the closing </body> tag:

<script src="xsukax-whatsapp-widget.js" data-phone="1234567890" data-title="Your Business"></script>

That's it! The WhatsApp button will appear automatically.

⚙️ Configuration Options

Customize the widget using data attributes:

Attribute	Description	Default	Required
`data-phone`	WhatsApp phone number with country code (no +)	-	✅ Yes
`data-title`	Business name shown in chat header	"Business"	❌ No
`data-position`	Button position: "right" or "left"	"right"	❌ No
`data-button-size`	Button size in pixels	"60"	❌ No
`data-button-color`	Button background color (hex)	"#25d366"	❌ No
`data-greeting`	Initial greeting message	"Hi! 👋 How can I help you today?"	❌ No
`data-placeholder`	Input field placeholder text	"Type a message..."	❌ No
`data-auto-show`	Auto-open chat on page load: "true" or "false"	"false"	❌ No
`data-auto-show-delay`	Delay before auto-show (milliseconds)	"3000"	❌ No

💡 Usage Examples

Basic Setup

<script src="xsukax-whatsapp-widget.js" 
        data-phone="1234567890" 
        data-title="Tech Support"></script>

Full Customization

<script src="xsukax-whatsapp-widget.js" 
        data-phone="1234567890"
        data-title="Acme Corporation"
        data-position="left"
        data-button-size="70"
        data-button-color="#0088cc"
        data-greeting="Welcome! How can we assist you today? 😊"
        data-placeholder="Ask us anything..."
        data-auto-show="true"
        data-auto-show-delay="5000"></script>

Auto-Open After 3 Seconds

<script src="xsukax-whatsapp-widget.js" 
        data-phone="1234567890"
        data-title="Customer Service"
        data-auto-show="true"
        data-auto-show-delay="3000"></script>

Left-Side Position

<script src="xsukax-whatsapp-widget.js" 
        data-phone="1234567890"
        data-title="Sales Team"
        data-position="left"></script>

🎮 JavaScript API

Control the widget programmatically:

Open Chat

xsukaxWhatsAppWidget.open();

Close Chat

xsukaxWhatsAppWidget.close();

Get Configuration

console.log(xsukaxWhatsAppWidget.config);

Example: Open chat on button click

<button onclick="xsukaxWhatsAppWidget.open()">Contact Us</button>

✨ Features

Single JavaScript file - no dependencies
Lightweight (~8KB minified)
WhatsApp-style chat interface
Customizable business name and avatar
Responsive design for mobile and desktop
Smooth animations and transitions
Pulse effect on button for attention
Auto-show option for proactive engagement
Keyboard accessibility (ESC to close)
Opens WhatsApp with pre-filled message
Works on all modern browsers
GPL-3.0 open source license

📱 How It Works

Visitor sees floating WhatsApp button with pulse animation
Clicking opens WhatsApp-style chat interface
Business name and custom greeting appear
Visitor types their message
Clicking send opens WhatsApp with message pre-filled
Conversation continues in WhatsApp app/web

🔧 Browser Support

Works in all modern browsers:

Chrome 60+
Firefox 60+
Safari 12+
Edge 79+
Opera 47+
Mobile browsers (iOS Safari, Chrome Mobile)

📄 License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0)

Free to use, modify, and distribute. Any modifications must also be released under GPL-3.0.

🚀 xsukax WhatsApp Widget