Un widget ligero y fácil de usar que agrega botones flotantes de WhatsApp y teléfono a cualquier página web. Los botones aparecen en la esquina inferior derecha con animaciones suaves y son completamente responsivos.
- 📱 Botón de WhatsApp: Abre una conversación directa en WhatsApp
- 📞 Botón de Teléfono: Permite llamar directamente desde dispositivos móviles
- 🎨 Diseño Moderno: Botones circulares con animaciones y efectos hover
- 📱 Responsive: Se adapta automáticamente a dispositivos móviles
- ⚡ Ligero: Sin dependencias externas, solo JavaScript vanilla
- 🎯 Fácil de usar: Configuración simple mediante atributos HTML
- ♿ Accesible: Incluye etiquetas ARIA para mejor accesibilidad
- Descarga
contact-widget.jsocontact-widget.min.js(versión minificada) - Incluye el script en tu HTML:
<script src="contact-widget.js"></script>La forma más rápida de usar el widget es mediante CDN. Simplemente incluye el script en tu HTML:
<script src="https://cdn.elepea.co/contact-widget.min.js"></script>Ventajas del CDN:
- ✅ No necesitas descargar archivos
- ✅ Carga rápida desde servidores optimizados
- ✅ Siempre tendrás la última versión
- ✅ Reduce el tamaño de tu proyecto
<!DOCTYPE html>
<html>
<head>
<title>Mi Página</title>
</head>
<body>
<!-- Tu contenido aquí -->
<!-- Widget de contacto -->
<div data-tel="+1234567890"></div>
<!-- Script del widget (usando CDN) -->
<script src="https://cdn.elepea.co/contact-widget.min.js"></script>
</body>
</html><div
data-tel="+1234567890"
data-whatsapp="+1234567890"
data-phone-tooltip="¡Llámanos ahora!"
data-whatsapp-tooltip="¡Escríbenos por WhatsApp!"
data-show-phone="true"
data-show-whatsapp="true"
></div>| Atributo | Descripción | Requerido | Valor por defecto |
|---|---|---|---|
data-tel |
Número de teléfono (formato internacional recomendado) | Sí* | - |
data-whatsapp |
Número para WhatsApp (si es diferente al teléfono) | No | Usa data-tel si no se especifica |
data-phone-tooltip |
Texto del tooltip del botón de teléfono | No | "¡Llámanos!" |
data-whatsapp-tooltip |
Texto del tooltip del botón de WhatsApp | No | "¡Escríbenos por WhatsApp!" |
data-show-phone |
Mostrar botón de teléfono | No | true (usa "false" para ocultar) |
data-show-whatsapp |
Mostrar botón de WhatsApp | No | true (usa "false" para ocultar) |
* Requerido si data-show-phone="true" o si no se especifica data-whatsapp
<div
data-whatsapp="+1234567890"
data-show-phone="false"
></div><div
data-tel="+1234567890"
data-show-whatsapp="false"
></div><div
data-tel="+1234567890"
data-whatsapp="+0987654321"
></div><div
data-tel="+1234567890"
data-whatsapp="+1234567890"
data-phone-tooltip="Contáctanos por teléfono"
data-whatsapp-tooltip="Chatea con nosotros"
></div>El widget incluye estilos CSS integrados. Los botones se posicionan automáticamente:
- Desktop: Esquina inferior derecha (30px desde el borde)
- Móvil: Esquina inferior derecha (20px desde el borde)
- WhatsApp: 110px desde abajo (o 30px si solo hay WhatsApp)
- Teléfono: 30px desde abajo
- WhatsApp:
#25D366(verde WhatsApp) - Teléfono:
#2196F3(azul Material Design)
Si necesitas inicializar el widget manualmente:
// El widget se inicializa automáticamente, pero puedes forzar la inicialización
window.ContactWidget.init();El widget normaliza automáticamente los números de teléfono:
- Elimina espacios, guiones, paréntesis
- Para WhatsApp: elimina el
+si está presente - Para teléfono: agrega
+si no está presente
Formatos aceptados:
+12345678901234567890+1 (234) 567-8901-234-567-890
- ✅ Chrome/Edge (últimas versiones)
- ✅ Firefox (últimas versiones)
- ✅ Safari (últimas versiones)
- ✅ Opera (últimas versiones)
- ✅ Navegadores móviles (iOS Safari, Chrome Mobile)
contact-widget.js- Versión completa sin minificar (para desarrollo)contact-widget.min.js- Versión minificada (para producción)ejemplo-uso-widget.html- Ejemplo de implementación
- El widget se inicializa automáticamente cuando el DOM está listo
- Los botones se agregan al final del
<body> - El widget puede ser usado múltiples veces en la misma página
- Los estilos CSS se inyectan automáticamente y no requieren archivos adicionales
Las contribuciones son bienvenidas. Por favor:
- Fork el proyecto
- Crea una rama para tu feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
Este proyecto está disponible para uso libre. Siéntete libre de usarlo en tus proyectos.
Si tienes preguntas o encuentras algún problema, por favor abre un issue en el repositorio.
Hecho con ❤️ para facilitar el contacto con tus usuarios