Agrega un botón flotante de WhatsApp en tu funnel con Código CSS y HTML

Agrega un botón flotante de WhatsApp en tu funnel con Código CSS y HTML

El botón del chat de WhatsApp juega un papel muy importante en tu funnel ya que es un elemento que te sirve para tener una conversación mucho más personalizada con tu posible cliente y esto es una oportunidad para conocer mucho mejor a este avatar lo cual te permitirá optimizar tu funnel y derribar posibles objeciones para que el lead se convierta en un cliente potencial. En este artículo te enseñaremos a conectar este botón mediante el lenguaje de código CCS y HTML por medio de sencillos pasos.

Nota: Ten en cuenta que también existe la otra forma de conectar el botón de WhatsApp mediante las aplicaciones con las cuales MasterTools puede tener integraciones, esto es en caso de que no desees hacerlo por medio de código. En este artículo encontrarás las indicaciones para configurarlo Conecta y activa el botón flotante de WhatsApp en tu Funnel

Sigue este paso a paso:

Crea un link del número del WhatsApp que vas a usar para la atención al cliente de tu producto o servicio; lo puedes hacer a través de la siguiente página https://crear.wa.link/ . En esta página debes ingresar el número del WhatsApp → Saludo del usuario → Generar mi wa.link → Copiar Link.

Dirígete a la configuración del embudo en la barra lateral izquierda y da clic en la sección "Código personalizado".





En la ventana de código personalizado vas a pegar el siguiente código en la sección "Código en body de página":

<a href= " Aquí debes poner tu link de WhatsApp " target="_blank">
<img class="my-button"src="https://img.icons8.com/color/512/whatsapp.png" />
<a/>



Ahora en la sección "CSS en página" pega el siguiente código:

.my-button{

position: fixed;

right: 0px;
bottom: 110px;
width: 70px;
height: 70px;
z-index: 100
}

A continuación te explicaremos la función de cada término:

.my-button: Es el nombre del atributo que pusimos en la sección de Código en Body de página, es decir que este es el nombre de la imagen (logo de whatsapp).
position: fixed; Significa que el botón de WhatsApp siempre va a estar fija.
rigth:0px; Posición del botón hacia la derecha.
bottom: 110px; Posición del botón en la parte de abajo.
width: 70px; Medida de ancho
height: 70px; Medida de alto
z-index: 100 Determina la posición hacia el frente de los demás elementos de la landing.

No olvides que debes guardar los cambios cada vez que pongas un código.



Abre una nueva pestaña e inserta la URL de tu landing page para verificar que el botón haya quedado activo, si das clic sobre el botón flotante debe dirigirte a la app de WhatsApp.



Mira el siguiente video tootorial en donde uno de nuestros expertos hace esta configuración en paso a paso.

Actualizado el: 27/03/2025