WhatsApp Chat Widget

A lightweight and customizable jQuery plugin that adds a floating WhatsApp chat button and popup box to your website.

📦 Built for easy integration and fast setup.
🌐 No backend required.
✅ Responsive design & fully customizable.

📦 Installation

Using npm

npm install whatsapp-chat-widget

📦 Installation

Using npm

npm install whatsapp-chat-widget

🚀 Usage

1. Include Required Scripts

<!-- Load the plugin -->
<script src="node_modules/whatsapp-chat-widget/dist/whatsapp.chat.1.0.0.js"></script>
<script src="node_modules/whatsapp-chat-widget/index.js"></script>

2. Initialize the Widget

<script>
  akasaWhatsappLoader({
    enabled: true,
    chatButtonSetting: {
      ctaText: "Chat with Us",
      position: "right",
      backgroundColor: "#25d366"
    },
    brandSetting: {
      brandName: "Akasa Support",
      brandSubTitle: "Typically replies within seconds",
      phoneNumber: "+94778786733",
      brandImg: "assets/img/avatar.jpg",
      welcomeText: "Hi there!\nHow can we help you?",
      messageText: "Hi, I'm interested in your services.",
      autoShow: false
    }
  });
</script>

⚙️ Options

| Option | Type | Description | | ----------------------------------- | --------------------- | ---------------------------------- | | enabled | boolean | Enable or disable the widget | | chatButtonSetting.ctaText | string | Button text | | chatButtonSetting.position | "left" or "right" | Button position | | chatButtonSetting.backgroundColor | string | Button background color | | brandSetting.brandName | string | Business or person name | | brandSetting.phoneNumber | string | WhatsApp number (no + or spaces) | | brandSetting.brandImg | string | Profile image URL | | brandSetting.welcomeText | string | Text shown in chat box | | brandSetting.messageText | string | Pre-filled message when chat opens | | brandSetting.autoShow | boolean | Show chat box on load |

✅ Features

• ✅ Auto-loads jQuery if not present
• ✅ Custom button & chat box styling
• ✅ Works on mobile and desktop
• ✅ One-line integration

🖼 Example

🔐 License

MIT

👤 Author

Developed by Madhushan Udeshike

---

Let me know if you'd like:
- A minified version of your script (`.min.js`)
- A live CodePen or GitHub Pages demo
- A `package.json` to finalize your npm publishing

I'm happy to help!