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

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

El botón del chat de Messenger 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.

Sigue este paso a paso:

Para configurar un enlace para que te escriban a Messenger, puedes crear un enlace m.me. Este enlace funciona como un puente entre los usuarios y tu página web, y los lleva directamente al chat contigo.

Para crear un enlace m.me, debes agregar tu nombre de usuario al final de la URL m.me/___
Por ejemplo, https://m.me/mastertools.la

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 Messenger " target="_blank">
<img class="my-button"src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Facebook_Messenger_logo_2020.svg/2048px-Facebook_Messenger_logo_2020.svg.png" />
<a/>



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

.my-button{

position: fixed;

right: 10px;
bottom: 30px;
width: 60px;
height: 60px;
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 Messenger siempre va a estar fijo.
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 Messenger.

Actualizado el: 22/04/2025