Guía Completa para Agregar un Botón de WhatsApp a tu Sitio Web

Conectar efectivamente con la clientela es esencial para el éxito de cualquier tienda online. En este artículo, exploraremos cómo integrar de manera eficiente un botón de chat de WhatsApp en tu sitio web, una herramienta clave para mejorar la comunicación con tu audiencia.

La Importancia de un Botón de WhatsApp

Integrar un botón de WhatsApp no es solo facilitar un canal de comunicación; es una oportunidad para crear un vínculo más cercano y directo con quienes visitan tu sitio. Y lo mejor es que es una implementación accesible para todas las plataformas, incluyendo Jumpseller.

Integración Universal

Esta guía es aplicable a cualquier plataforma, no solo a Jumpseller. Así que, sin importar dónde esté alojado tu sitio web, aquí encontrarás información valiosa.

El Código

En la plataforma en que estés deberás tener acceso al editor de HTML, y decidir donde pegarás el objeto HTML. Por ejemplo, en Jumpseller la plantilla Diseño se aplica en todas las páginas de la plantilla, sugiero utilizar esta. A continuación va un código bien explicado para un botón de WhatsApp estándar.

<a href="&amp;text=Hola necesito más información" class="store-whatsapp" title="Envíanos un mensaje de WhatsApp" target="_blank">
  <i class="fa-brands fa-whatsapp"></i>
</a>

En Jumpseller para hacer más sencilla la programación utilizamos etiquetas como que contiene una URL de WhatsApp junto con el número telefónico que registraste en tu tienda. Puedes reemplazarlo por esto https://api.whatsapp.com/send?phone=TUTELEFONOCOMPLETO.

Finalmente va la parte del CSS, que nos permitirá hacer que se vea bien, con colores y posiciones correctas. Para esto debes ubicar un archivo CSS que se cargue en tu tienda, y editarlo. Típicamente ese archivo en Jumpseller se llama theme.css, style.css, styles.css o app.css. Agrega estos estilos al final.

.store-whatsapp {
position: fixed; /* Mantiene el botón en una posición fija en la pantalla */
z-index: 9998; /*  Asegura que el botón esté por encima de otros elementos */
right: 20px; /*  Posiciona el botón a 20px del lado derecho de la pantalla */
bottom: 10px; /*  Posiciona el botón a 10px del fondo de la pantalla */
display: flex; /*  Utiliza Flexbox para el diseño interno del botón */
align-items: center; /*  Centra el contenido (icono) verticalmente */
justify-content: center; /*  Centra el contenido (icono) horizontalmente */
padding: 35px; /*  Espaciado interno alrededor del ícono */
border-radius: 50%; /*  Hace que el botón sea circular */
background: #25D366 !important; /*  Color de fondo del botón */
box-shadow: 0 0 20px transparent; /*  Sombra suave alrededor del botón */
color: #25D366 !important; /*  Color del ícono */
font-size: 40px; /*  Tamaño del ícono dentro del botón */
line-height: 47px; /*  Altura de línea para el texto/icono */
text-align: center; /*  Alineación del texto/icono */
text-decoration: none; /*  Elimina cualquier decoración de texto del enlace */
}

.store-whatsapp:hover {
background: #128C7E !important; /* Color de fondo al pasar el mouse */
box-shadow: 0 0 20px rgb(75 57 75 / 50%); /* Sombra más prominente al pasar el mouse */
color: #128C7E !important; /* Color del ícono al pasar el mouse */
}

Implementación de Jumpseller

En Jumpseller, la integración de elementos como el botón de WhatsApp es aún más sencilla. Cada tema de diseño viene preparado para incorporar estas funcionalidades de manera intuitiva.

Sólo debes ir a tu Panel de Admin: Temas > Editor Visual > Editar Opciones > WhatsApp de la tienda, donde podrás elegir los colores, activar animaciones y definir la posición del botón. Si no lo haz hecho, en tu Panel de Admin: Configuración > General > Redes Sociales, agrega tu número telefónico, esto sería un requisito para activar el botón naturalmente.

Agregar un botón de chat de WhatsApp a tu sitio web es un paso estratégico para mejorar la interacción con tu clientela. Esta guía te brinda las herramientas necesarias para implementarlo de forma sencilla y efectiva, independientemente de la plataforma que utilices. Si estás en Jumpseller, disfrutarás de una integración aún más fluida gracias a las características específicas de la plataforma.

Estamos aquí para ayudarte, si tienes alguna pregunta contáctanos en cualquier momento.