# WhatsApp Floating Widget
🔗 También disponible en: [Português](README.md) | [English](README.en.md) | [Español](README.es.md)
Este es un widget liviano y sencillo de botón flotante de WhatsApp, desarrollado con HTML, CSS y JavaScript puro. Permite que los visitantes de tu sitio contacten directamente vía WhatsApp con un solo clic.
## 🚀 Funcionalidades
- **Sin Dependencias**: Creado con JavaScript y CSS puro.
- **Fácil Integración**: Solo añade el script y el CSS a tu proyecto.
- **Configurable**: Define el número de teléfono, el mensaje inicial y la posición mediante atributos `data`.
- **Ícono SVG**: Ícono de WhatsApp nítido y escalable.
## 📦 Instalación vía NPM
Puedes instalar este paquete fácilmente vía npm:
```bash
npm install whatsapp-floating-widget
```
## 💻 Uso (ES Modules / Bundlers)
Ideal para proyectos React, Vue, Angular o Vanilla JS con Webpack/Vite.
1. **Importa el JS y el CSS:**
```javascript
import WhatsAppWidget from 'whatsapp-floating-widget';
// Si usas un bundler de CSS
import 'whatsapp-floating-widget/widget.css';
```
2. **Inicializa el widget:**
```javascript
WhatsAppWidget.init({
phoneNumber: '553340420000',
message: '¡Hola! Me gustaría más información.',
position: 'right' // 'right' o 'left'
});
```
---
## 🚀 Uso vía Upload (Etiqueta Script)
1. Descarga `widget.js` y `widget.css` y colócalos en tu proyecto.
2. Añade la referencia al CSS dentro del `` de tu HTML:
```html
```
3. Añade el script antes del cierre de la etiqueta ``, configurando los atributos necesarios:
```html
```
## 🚀 Uso vía CDN (jsDelivr)
1. Añade la referencia al CSS dentro del `` de tu HTML:
```html
```
2. Añade el script antes del cierre de la etiqueta ``, configurando los atributos necesarios:
```html
```
## ⚙️ Configuración
Puedes configurar el widget usando los siguientes atributos `data-` en la etiqueta `