# WhatsApp Floating Widget
🔗 Also available in: [Português](README.md) | [English](README.en.md) | [Español](README.es.md)
Este é um widget leve e simples de botão flutuante do WhatsApp, desenvolvido com HTML, CSS e JavaScript nativo. Ele permite que os visitantes do seu site entrem em contato diretamente via WhatsApp com um clique.
## 🚀 Funcionalidades
- **Zero Dependências**: Feito com Vanilla JS e CSS puro.
- **Fácil Integração**: Basta adicionar o script e o CSS ao seu projeto.
- **Configurável**: Defina o número de telefone, mensagem inicial e posição através de atributos de dados.
- **Ícone SVG**: Ícone do WhatsApp nítido e escalável.
## 📦 Instalação via NPM
Você pode instalar este pacote facilmente via npm:
```bash
npm install whatsapp-floating-widget
```
## 💻 Uso (ES Modules / Bundlers)
Ideal para projetos React, Vue, Angular ou Vanilla JS com Webpack/Vite.
1. **Importe o JS e o CSS:**
```javascript
import WhatsAppWidget from 'whatsapp-floating-widget';
// Se você estiver usando um carregador de CSS
import 'whatsapp-floating-widget/widget.css';
```
2. **Inicialize o widget:**
```javascript
WhatsAppWidget.init({
phoneNumber: '553340420000',
message: 'Olá! Gostaria de mais informações.',
position: 'right' // 'right' ou 'left'
});
```
---
## 🚀 Uso via Upload (Script Tag)
1. Baixe os arquivos `widget.js` e `widget.css` e coloque-os no seu projeto.
2. Adicione a referência ao CSS no `` do seu HTML:
```html
```
3. Adicione o script antes do fechamento da tag ``, configurando os atributos necessários:
```html
```
## 🚀 Uso via CDN (jsDelivr)
1. Adicione a referência ao CSS no `` do seu HTML:
```html
```
2. Adicione o script antes do fechamento da tag ``, configurando os atributos necessários:
```html
```
## ⚙️ Configuração
Você pode configurar o widget usando os seguintes atributos `data-` na tag `