Poner botón de WhatsApp en mi web

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.

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. Para instalarlo, simplemente ve a la sección de «Plugins» en tu panel de WordPress, buscalos por su nombre, instálalo y actívalo. Luego, 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, que te permitirá incorporar múltiples agentes dentro de tu botón de WhatsApp.

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 personalizados. WhatsApp te permite personalizar estos enlaces para incluir mensajes específicos.

Simplemente crea un botón dentro de estas plataformas y pega el enlace personalizado. De esta manera, podrás dirigir a los usuarios a WhatsApp con un mensaje predeterminado para que te contacten.

Crear un enlace de WhatsApp con un mensaje personalizado

Este es el formato para configurar tu enlace y mensaje de WhatsApp, cópialo y modifícalo según tu preferencia :

https://wa.me/598997018222?text=¡Hola!%20Estoy%20interesado%20en%20el%20servicio,%20me%20gustaría%20más%20información.

Generar botón de WhatsApp con ChatGPT

Si quieres ahorrar tiempo, pídele a la inteligencia artificial de ChatGPT que te genere un enlace de WhatsApp con un mensaje personalizado, tal como se muestra a continuación. Para utilizarlo, simplemente accede al sitio oficial en https://openai.com/. Una vez dentro, escribe la siguiente instrucción en el chat:

Generame un enlace de botón de WhatsApp para el número 099710118200 con el mensaje 'Me gustaría más información del servicio'

Puedes personalizar el mensaje y también especificar el propósito del enlace de WhatsApp, ya que tenemos enlaces para unirse a un canal, enviar mensajes, unirse a un grupo, entre otros. Cuanto más específico seas, mejor será el resultado.

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.

Copia y pega el código, reemplaza el enlace con el de tu chat de WhatsApp, agrega un mensaje personalizado y tu botón quedará 100% funcional. Lo mejor de todo es que es completamente gratuito.

<!-- 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

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