# WhatsApp Floating Widget
🔗 Also available in: [Português](README.md) | [English](README.en.md) | [Español](README.es.md)
This is a lightweight and simple WhatsApp floating button widget, built with HTML, CSS and vanilla JavaScript. It allows visitors to contact you directly via WhatsApp with a single click.
## 🚀 Features
- **Zero Dependencies**: Built with plain JS and CSS.
- **Easy Integration**: Just add the script and CSS to your project.
- **Configurable**: Set phone number, initial message and position via data attributes.
- **SVG Icon**: Crisp, scalable WhatsApp icon.
## 📦 Install via NPM
You can install this package easily via npm:
```bash
npm install whatsapp-floating-widget
```
## 💻 Usage (ES Modules / Bundlers)
Ideal for React, Vue, Angular or Vanilla JS projects using Webpack/Vite.
1. **Import the JS and CSS:**
```javascript
import WhatsAppWidget from 'whatsapp-floating-widget';
// If using a CSS bundler
import 'whatsapp-floating-widget/widget.css';
```
2. **Initialize the widget:**
```javascript
WhatsAppWidget.init({
phoneNumber: '553340420000',
message: 'Hello! I would like more information.',
position: 'right' // 'right' or 'left'
});
```
---
## 🚀 Usage via Upload (Script Tag)
1. Download `widget.js` and `widget.css` and place them in your project.
2. Add the CSS reference inside the `` of your HTML:
```html
```
3. Add the script before closing the `` tag, configuring the needed attributes:
```html
```
## 🚀 Usage via CDN (jsDelivr)
1. Add the CSS reference inside the `` of your HTML:
```html
```
2. Add the script before closing the `` tag, configuring the needed attributes:
```html
```
## ⚙️ Configuration
You can configure the widget using the following `data-` attributes on the `