Cómo crear un botón de WhatsApp en una página concreta de WordPress (sin plugins)

Con esta publicación aprenderás a mostrar un botón flotante de Whatsapp en las páginas de WordPress que desees.

• Tiempo de implementación: 2 min
• Nivel de dificultad: Fácil

Inserta este código en la página

En la página o entrada en la que quieras mostrar el botón flotante de Whatsapp inserta una caja de contenido HTML.

Dentro de esa caja introduce este código:

<!-- Botón flotante de WhatsApp -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/brands.min.css">

<a href="https://api.whatsapp.com/send?phone=TUNUMERODETELEFONO&text=Hola%21%20Quisiera%20m%C3%A1s%20informaci%C3%B3n%20sobre%20sus%20servicios." class="float" target="_blank" rel="noopener noreferrer" aria-label="Chatear por WhatsApp">
  <i class="fab fa-whatsapp my-float"></i>
</a>

<style>
.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
  transition: all 0.3s ease;
}

.float:hover {
  background-color: #128C7E;
  transform: scale(1.1);
}

.my-float {
  margin-top: 16px;
}

@media screen and (max-width: 767px) {
  .float {
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
    font-size: 25px;
  }
  
  .my-float {
    margin-top: 13px;
  }
}
</style>

Personaliza el código

• Reemplaza TUNUMERODETELEFONO en el enlace de WhatsApp con tu número de teléfono real, incluyendo el código de país.
• Personaliza el mensaje predeterminado en el parámetro text= del enlace si lo deseas. Recuerda usar %20 para espacios y %21 para signos de exclamación.
• El CSS está incluido dentro de una etiqueta <style>. Si sabes como hacerlo, puedes personalizarlo. Si prefieres también, puedes mover este CSS a tu hoja de estilos principal y eliminarlo de esta caja de código.

¡Ya está! Copia y pega esta caja HTML en las páginas en las que quieras que aparezca el botón. Si quieres que el botón aparezca en todo el sitio web mira esta otra entrada, en la que te explico como hacerlo:

Cómo insertar un botón flotante de WhatsApp en TODO el sitio WordPress (sin plugins)

Explicación del código

Si quieres entender el código que hemos insertado, te dejo por aquí una explicación detallada:

Parte HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/brands.min.css">

Estas líneas cargan los estilos de Font Awesome, una biblioteca de iconos. Específicamente, cargamos solo los estilos necesarios para el ícono de WhatsApp, lo que ayuda a mejorar el rendimiento de la página.

<a href="https://api.whatsapp.com/send?phone=TUNUMERODETELEFONO&text=Hola%21%20Quisiera%20m%C3%A1s%20informaci%C3%B3n%20sobre%20sus%20servicios." class="float" target="_blank" rel="noopener noreferrer" aria-label="Chatear por WhatsApp">
  <i class="fab fa-whatsapp my-float"></i>
</a>

• <a>: Es una etiqueta de enlace que crea el botón clickeable.
• href="...": Es la URL a la que se dirigirá el usuario al hacer clic. Utiliza la API de WhatsApp para abrir una conversación.
• class="float": Asigna una clase CSS que usaremos para estilizar el botón.
• target="_blank": Hace que el enlace se abra en una nueva pestaña.
• rel="noopener noreferrer": Es una medida de seguridad para enlaces que se abren en nuevas pestañas.
• aria-label="...": Proporciona un texto descriptivo para lectores de pantalla, mejorando la accesibilidad.
• <i class="fab fa-whatsapp my-float"></i>: Crea el ícono de WhatsApp usando Font Awesome.

Parte CSS

.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
  transition: all 0.3s ease;
}

• position: fixed;: Mantiene el botón en una posición fija en la pantalla, incluso al desplazarse.
• width y height: Definen el tamaño del botón.
• bottom y right: Posicionan el botón en la esquina inferior derecha.
• background-color: Establece el color de fondo verde característico de WhatsApp.
• color: #FFF;: Hace que el ícono sea blanco.
• border-radius: 50px;: Crea un botón circular.
• text-align: center;: Centra el ícono dentro del botón.
• box-shadow: Añade una sombra sutil para dar profundidad.
• z-index: 100;: Asegura que el botón aparezca por encima de otros elementos.
• transition: Permite una animación suave al pasar el mouse por encima.

.float:hover {
  background-color: #128C7E;
  transform: scale(1.1);
}

Estos estilos se aplican cuando el usuario pasa el mouse sobre el botón:

• Cambia el color de fondo a un verde más oscuro.
• Aumenta ligeramente el tamaño del botón (10% más grande).

.my-float {
  margin-top: 16px;
}

Ajusta la posición vertical del ícono dentro del botón.

@media screen and (max-width: 767px) {
  .float {
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
    font-size: 25px;
  }
  
  .my-float {
    margin-top: 13px;
  }
}

Esta es una media query que ajusta el estilo para pantallas más pequeñas (como teléfonos móviles):

• Reduce el tamaño del botón.
• Lo coloca más cerca de la esquina de la pantalla.
• Ajusta el tamaño del ícono y su posición dentro del botón.

Estas modificaciones aseguran que el botón se vea bien y no ocupe demasiado espacio en pantallas pequeñas.