Botón flotante de WhatsApp: cómo crearlo sin plugin

¿Qué es un botón flotante de WhatsApp y cuándo usarlo?

Es un botón fijo, normalmente redondo y verde, que queda en la esquina inferior de la pantalla. Aunque la persona se desplace por la página, sigue ahí. Esto hace que el contacto esté siempre a mano, sin tener que volver arriba a buscarlo.

Tiene sentido en sitios con mucho desplazamiento, como blogs, páginas de servicios y tiendas. En páginas muy cortas, un botón normal dentro del contenido puede ser suficiente.

¿Por qué crear el botón flotante sin plugin?

Los plugins son prácticos, pero cada uno añade archivos y scripts al sitio, y no todos te dejan elegir el enlace de destino. Un botón hecho a mano es ligero, controlas el color, el tamaño y la dirección, y funciona en cualquier tipo de sitio que acepte un fragmento de código.

El punto principal es la dirección. Si el botón apunta a un wa.me, solo abre la conversación. Si apunta al enlace de WhatsClicks, además registra cada clic.

Otra ventaja es el mantenimiento. Con un plugin dependes de las actualizaciones para que siga funcionando. Con un fragmento propio, solo lo tocas cuando quieres cambiar el aspecto.

Cómo crear el botón flotante de WhatsApp con HTML y CSS

Primero, crea tu cuenta gratis en WhatsClicks y copia tu enlace, con el formato https://whatsclicks.com/w/codigo. Después, pega el fragmento de abajo en el lugar de tu sitio que acepte código, como un bloque de HTML personalizado o el pie del tema. El nombre de ese lugar varía según la plataforma.

Tras pegar, guarda y abre el sitio en el móvil. Confirma que el botón aparece en la esquina, que no tapa texto importante y que, al tocarlo, abre WhatsApp con el mensaje registrado en el panel. Si algo queda descolocado, ajusta las distancias de bottom y right hasta encontrar una posición cómoda.

Si tu sitio usa un tema que ya trae un botón flotante integrado, desactiva el antiguo antes de poner el nuevo. Dos botones iguales en la misma esquina confunden al visitante y estropean la cuenta, porque los clics quedan repartidos entre enlaces distintos.

• HTML: crea un enlace normal con el texto WhatsApp, cuya dirección sea tu enlace de WhatsClicks (por ejemplo, https://whatsclicks.com/w/abc123?src=flotante), y ponle un nombre de clase, como zap.
• CSS: posición fija (position: fixed), distancia de 20px desde abajo y desde la derecha (bottom y right), fondo verde, texto blanco, esquinas redondeadas (border-radius), relleno interno (padding) y un z-index alto para que quede por encima del resto.

Si no estás seguro de dónde pegar el código, pide ayuda a quien se encarga de tu web. El nombre del lugar varía según la plataforma.

Antes y después de la dirección en el botón

Si ya usas un botón flotante prefabricado, o un código con wa.me, solo necesitas cambiar la dirección del enlace:

• Antes: https://wa.me/573001234567?text=Hola
• Después: https://whatsclicks.com/w/abc123?src=flotante

El fragmento ?src=flotante le dice al panel que el clic vino del botón flotante. Si el sitio tiene varias páginas y quieres separarlas, añade &p= con la página.

¿Cómo saber si el botón flotante funciona mejor que los demás?

Una buena práctica es etiquetar cada botón con un nombre distinto en src. Imagina un sitio con un botón flotante, un botón arriba y un botón al final del texto. Usando ?src=flotante, ?src=arriba y ?src=final, la tabla Por botón del panel muestra cuántos clics recibió cada uno.

Pasadas unas semanas, compara. Si el flotante lidera, merece destacarse. Si casi nadie hace clic, tal vez esté detrás de otro elemento o sea demasiado pequeño en el móvil. El panel también muestra el dispositivo usado, y eso ayuda a decidir el tamaño del botón.

Cuidados para que el botón flotante no moleste

Un botón fijo puede resultar molesto cuando tapa parte del contenido. Unos cuidados sencillos evitan el problema:

Por último, recuerda que el botón flotante aparece en todas las páginas donde pegues el código. Por eso, si solo etiquetas src, el panel muestra el total del botón. Para verlo por página, añade también ?p= cuando el código sea específico de una página, como la de contacto o la de precios.

• Deja un tamaño cómodo para el dedo en el móvil, pero sin ocupar la pantalla.
• No lo pongas encima de otros botones fijos, como las barras de cookies o de compra.
• Pruébalo en móvil y en computadora antes de publicar.
• Prefiere un texto o icono que deje claro que el botón abre WhatsApp.

Tus propios clics también cuentan en el panel. Los rastreadores de buscadores y los robots conocidos no entran en la cuenta.