Si quieres poner un botón de WhatsApp a tu página web, aquí te presento diferentes maneras de hacerlo. Se puede añadir botones de WhatsApp en página hechas con WordPress, Canva, Notion y cualquier otra plataforma que admita links. Por último, te brindaré códigos HTML y CSS personalizados para botones de WhatsApp que podrás copiar y pegar.
Leyendo el siguiente artículo podrás conocer en detalle estos temas:
1. Poner un botón de WhatsApp en una página web hecha en WordPress
Para añadir un botón flotante de WhatsApp en WordPress, tenemos los mejores plugins que son Social Chat – Click To Chat App y Joichat.
Instrucciones:
1- Para instalarlo, ve a la sección de «Plugins» en tu panel de WordPress
2- Agrega el nombre del plugin.
3- Dale clic a instalar «Ahora» y luego, activar.
4 Configura el botón ingresando tu número y un mensaje personalizado en la sección de ajustes.

Ambos plugins te permiten agregar un botón flotante que puedes configurar para que aparezca después de un tiempo determinado, una vez que tu página web haya cargado. Además, cuentan con opciones adicionales como la ubicación del botón, el tiempo de aparición, colores y otras funcionalidades personalizables.
Si buscas más características, puedes optar por la versión Pro de los plugins, o agregar esa funcionalidad con código personalizado, tal y como lo hemos hecho en el punto numero tres de este artículo.
2. Crear un botón de WhatsApp en una página web hecha en Canva, Notion u otra plataforma gratuita
Si tu sitio web está en una plataforma gratuita como Canva, Notion y otras similares, también puedes agregar un botón de WhatsApp utilizando enlaces nativos.
Simplemente crea un botón dentro de estas plataformas y pega el enlace reemplazando tu numero. De esta manera, cada persona que de clic a ese enlace lo dirige a tu chat de WhatsApp
https://wa.me/598997018222
Crear enlace de WhatsApp con mensaje personalizado Gratis
Si quieres personalizar un enlace de WhatsApp con un mensaje para que te contacten. Usa nuestro generador de enlaces de WhatsApp➤. Solo pon el número, agrega el prefijo de tu país y escribe tu mensaje. Obtendrás el enlace para añadir a tu botón de WhatsApp al instante.

El enlace que se genera nunca caduca, y puedes crear tantos como desees, ¡totalmente gratis!
También puedes pedirle ayuda a la inteligencia artificial de ChatGPT que te genere un enlace de WhatsApp con un mensaje personalizado. Para utilizarlo, simplemente accede al sitio oficial en https://openai.com/. Pídele que te genere un mensaje de WhatsApp con mensaje personalizado, agrega tu numero y dale las indicaciones del mensaje.
3. Poner un botón de WhatsApp con código
Para agregar un botón flotante de WhatsApp sin plugins, solo necesitas código HTML y CSS. Este método es adecuado solo para sitios web que permiten agregar código personalizado, ya que la mayoría de los servicios gratuitos no lo permiten. A continuación, te compartiré un código que puedes copiar y pegar en tu sitio.
Código CSS y HTML para el Botón de WhatsApp
Este código genera un botón flotante de WhatsApp en la esquina inferior de tu página, y puedes personalizar su tamaño, posición y mensaje según tus necesidades. Aunque ofrece funcionalidades similares a plugins de pago, está diseñado para ser fácil de usar, incluso para personas con conocimientos básicos de programación.
Instrucciones:
1- Copia y pega el código.
2- Reemplaza el enlace con el de tu chat de WhatsApp.
3- agrega un mensaje personalizado.
Tu botón quedará 100% funcional. Lo mejor de todo es que es completamente gratuito.
Previsualización del Botón:

<!-- Enlace a Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
#whatsapp {
position: fixed;
bottom: 20px;
right: 20px;
}
#whatsapp a {
display: flex;
justify-content: center;
align-items: center;
width: 60px; /* Ajusta el tamaño del botón */
height: 60px;
border-radius: 50%;
background-color: #25D366; /* Color verde de WhatsApp */
box-shadow: 0 1px 4px rgba(0,0,0,.4); /* Sombra suave */
transition: transform 0.3s ease; /* Transición suave al hacer hover */
animation: echoEffect 1.5s ease-in-out infinite; /* Aplica la animación desde el inicio */
}
#whatsapp i {
font-size: 40px; /* Tamaño del ícono */
color: white; /* Color blanco para el ícono */
}
/* Efecto de eco parpadeante moderado */
@keyframes echoEffect {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); /* Sombra más intensa */
transform: scale(1);
}
50% {
box-shadow: 0 0 15px 7px rgba(37, 211, 102, 0.4); /* Sombra más grande */
transform: scale(1.1); /* Aumento moderado */
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); /* Sombra más intensa */
transform: scale(1);
}
}
</style>
<div id="whatsapp">
<a href="https://api.whatsapp.com/send?phone=598997018222&text=¡Hola!%20Estoy%20interesado%20en%20el%20servicio,%20me%20gustaría%20más%20información." target="_blank">
<i class="fab fa-whatsapp"></i> <!-- Ícono de WhatsApp -->
</a>
</div>
Previsualización de Botones de WhatsApp (EXTRAS)
Todos los códigos de los botones que verás a continuación están disponibles para descargar en nuestro canal de WhatsApp.





Como regalo especial, aquí te compartimos 6 modelos diferentes de botones de WhatsApp en HTML y CSS que puedes usar en tu sitio web. Solo copia y pega el código del modelo que prefieras, reemplaza el enlace con el de tu WhatsApp, agrega un mensaje personalizado ¡y listo!
Preguntas Frecuentes
Agregar un botón de WhatsApp en tu sitio web facilita la comunicación directa con tus visitantes, lo que puede aumentar las conversiones y mejorar la experiencia del usuario.
No, es bastante sencillo. Solo necesitas generar el enlace de WhatsApp con tu número de teléfono y luego insertar el código HTML proporcionado en la sección relevante de tu página web.
Sí, con el código que te compartimos puedes personalizar el diseño del botón según tus preferencias. Puedes cambiar el tamaño, color y forma para que se ajuste al estilo de tu sitio web.
Sí, el botón de WhatsApp es compatible con la mayoría de los dispositivos y navegadores web. Los usuarios podrán acceder a él tanto desde computadoras de escritorio como desde dispositivos móviles.