🚀 Universal WhatsApp Widget

Add a beautiful WhatsApp chat button to any website in seconds

📦 Quick Start

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

<script src="../src/whatsapp-widget.js" data-phone="1234567890" data-header-title="Your Business Name" data-message="Hi! How can I help you?" ></script>

Note: Replace the phone number with your WhatsApp number (include country code without + or spaces)

✨ Features

🎨 Customizable

Change colors, text, position, and branding to match your brand

📱 Responsive

Works perfectly on mobile, tablet, and desktop devices

⚡ Lightweight

No dependencies, pure vanilla JavaScript and CSS

🔧 Easy Integration

Just one script tag - no complex setup required

♿ Accessible

Keyboard navigation and screen reader support

🌐 Cross-browser

Works on all modern browsers including mobile

⚙️ Configuration Options

Customize the widget using data attributes on the script tag:

Attribute Description Default
data-phone WhatsApp phone number (required, with country code) -
data-header-title Chat window header title "Chat with us"
data-header-subtitle Status text below title "Online"
data-message Pre-filled message in chat "Hi! How can I help you?"
data-button-text Text on the "Start chat" button "Start chat"
data-position Button position: bottom-right, bottom-left, top-right, top-left "bottom-right"
data-theme-color Primary color (hex code) "#4DC247"
data-branding Show branding text (true/false) "true"
data-branding-text Custom branding text "Powered by WhatsApp Widget"
data-branding-url URL for branding link ""

💡 Examples

Basic Setup

<script src="../src/whatsapp-widget.js" data-phone="1234567890" ></script>

Fully Customized

<script src="../src/whatsapp-widget.js" data-phone="919876543210" data-header-title="Customer Support" data-header-subtitle="Typically replies in 5 minutes" data-message="Hello! I need help with..." data-button-text="Chat Now" data-position="bottom-left" data-theme-color="#FF6B6B" data-branding="false" ></script>

With Custom Branding

<script src="../src/whatsapp-widget.js" data-phone="1234567890" data-header-title="My Company" data-branding-text="Powered by My Company" data-branding-url="https://mycompany.com" ></script>

🚀 Deployment

To use this widget in production:

  1. Host the files: Upload whatsapp-widget.js and whatsapp-widget.css to your web server or CDN
  2. Update the script src: Change the src path to your hosted URL
  3. Add to your website: Include the script tag on every page where you want the widget

CDN Example

<script src="https://your-cdn.com/whatsapp-widget.js" data-phone="1234567890" data-header-title="Your Business" ></script>

📱 Browser Support

The widget works on all modern browsers: