Como agregar botón flotante Whatsapp en WordPress, sin plugin + ejemplos

EJEMPLO 1 usando imagen

Agregamos el HTML con la imagen del boton de whatsapp

<a class="botonwhatsapp" href="https://api.whatsapp.com/send?phone=34652116272&amp;text=Hi%21%20I%20want%20Information%20" target="_blank" rel="noopener">
  <img src="https://leninmhs.com/wp-content/uploads/2023/12/botonwhatsapp.png">
</a>

Agregamos el CSS

/** Inicio Boton Whatsapp - Ejemplo 1 **/ 

.botonwhatsapp{ 
  position:fixed; 
  bottom:100px; 
  right:60px; 
  text-align:center; 
  z-index:100; 
} 

.botonwhatsapp:hover { 
  box-shadow: 0px 0px 25px #FF5166; 
  background-color: transparent; 
  border-radius: 55px; 
} 

/** Fin boton whatsapp - Ejemplo 1 **/

EJEMPLO 2 usando icono de font awesome

Si hace falta agregamos la librería de font aweseome:
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css«>

HTML

<a class="botonwhatsapp" href="https://api.whatsapp.com/send?phone=34555555555&amp;text=Hi%21%20I%20want%20Information%20 " target="_blank" rel="noopener">Chat with us<br/>
	<i class="fa fa-whatsapp icon-botonwhatsapp"></i>
</a>

CSS

.botonwhatsapp{
  position:fixed;
  width:80px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color:#D40000;
  color:#000;
  border-radius:5px;
  text-align:center;
  font-size:12px;
  box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.botonwhatsapp:hover {
  text-decoration: none;
  color: #D40000;
  background-color:#000;
}

.icon-botonwhatsapp{
  /*margin-top:16px;*/
  font-size: 30px;
}

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *