WhatsApp Floating Widget

🔗 Also available in: Português | English | Español

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:

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:

import WhatsAppWidget from 'whatsapp-floating-widget';
// Se você estiver usando um carregador de CSS
import 'whatsapp-floating-widget/widget.css'; 

2. Inicialize o widget:

WhatsAppWidget.init({
    phoneNumber: '553340420000',
    message: 'Olá! Gostaria de mais informações.',
    position: 'right' // 'right' ou 'left'
});

🚀 Uso via Upload (Script Tag)

<link rel="stylesheet" href="./caminho/para/widget.css">

3. Adicione o script antes do fechamento da tag </body>, configurando os atributos necessários:

<!-- Exemplo de uso -->
<script 
    src="./caminho/para/widget.js" 
    data-phone="553340420000" 
    data-message="Olá! Gostaria de mais informações." 
    data-position="right">
</script>

🚀 Uso via CDN (jsDelivr)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/whatsapp-floating-widget@latest/widget.css">

2. Adicione o script antes do fechamento da tag </body>, configurando os atributos necessários:

<!-- Exemplo de uso -->
<script 
    src="https://cdn.jsdelivr.net/npm/whatsapp-floating-widget@latest/widget.js" 
    data-phone="553340420000" 
    data-message="Olá! Gostaria de mais informações." 
    data-position="right">
</script>

⚙️ Configuração

Você pode configurar o widget usando os seguintes atributos data- na tag <script>:

| Atributo | Descrição | Valor Padrão / Exemplo | |----------|-----------|------------------------| | data-phone | O número do WhatsApp para contato (com código do país). | 553340420000 | | data-message | Mensagem inicial pré-preenchida. | Olá! Gostaria de saber mais. | | data-position | Posição do botão na tela (right ou left). | Padrão: right (se não especificado ou qualquer outro valor) |

🤝 Contribuindo

Contribuições são bem-vindas! Se você tiver sugestões ou melhorias:

1. Faça um Fork do projeto.
2. Crie uma Branch para sua Feature (git checkout -b feature/SuaFeature).
3. Faça o Commit das suas mudanças (git commit -m 'Adiciona funcionalidade X').
4. Faça o Push para a Branch (git push origin feature/SuaFeature).
5. Abra um Pull Request.

📄 Licença

Criado por Gigabaite Tecnologia e distribuído sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.