Guía para crear un botón flotante de Whatsapp en prestashop

Una de las cosas que más nos solicitan nuestros clientes es que les instalemos un módulo o plugin para tener un botón flotante de contacto por Whatsapp, que esté en toda la web y siempre visible. Es algo normal, ya que se ha convertido en una forma de contacto predominante en la actualidad, y nuestros clientes requieren que resulte de fácil acceso.

Pero… ¿realmente hace falta instalar un módulo o plugin para disponer de este botón flotante? En wordpress la respuesta definitivamente es NO, pero ya existen multitud de tutoriales en la red de como hacer esto, así que en este caso no entraremos ahí (aunque el código de esta guía podría aprovecharse, modificando algunas partes). En prestashop, dependiendo del tipo de theme que tengamos instalado, puede ser necesario. Pero si nuestro tema es Warehouse o cualquier otro que disponga de un módulo que permita insertar html personalizado en posiciones específicas de nuestra web (cosa bastante habitual), la respuesta sigue siendo NO.

En este post veremos explicado paso a paso, de manera que resulte sencillo y viable para personas sin conocimiento de programación, como crear este botón flotante en prestashop con Warehouse (que es el tema que habitualmente utilizamos en Amarillo Limón).

Crear un botón flotante de whatsapp en prestashop con Warehouse

El tema Warehouse es uno de los más utilizados para prestashop, dada su versatilidad, adaptabilidad y capacidad de personalización. Cuenta con varios módulos incluidos que nos hace el desarrollo mucho más cómodo y sencillo a los diseñadores. Para ubicar nuestro botón flotante utilizaremos uno de ellos, llamado “IqitHtmlandBanner”.

Para empezar, entraremos en nuestro apartado de módulos (Módulos-Administrador de módulos, en la columna de la izquierda del backend de nuestro prestashop). Buscamos en la lista “Módulos del tema” y le damos a “Configurar” al módulo “IQITHTMLANDBANNERS” (puede ser necesario desplegar el contenido oculto para encontrarlo).

Es muy posible que el desarrollador de nuestra web haya utilizado este módulo y tenga algunos banners o/y html ya creados en este módulo, pero como el IqitHtmlandBanner puede contener múltiples banners, no hay ningún problema. En la parte inferior derecha del módulo podremos ver dos botones, “New banner widget” y “New html widget”. El banner es para insertar imágenes en cualquier posición de nuestra web, que es lo que queremos, pero cuenta con ciertas limitaciones que no nos interesan, así que pulsaremos en “New html widget.

Tendremos que poner un nombre a nuestro bloque, ya que es obligatorio. Si nuestra web está en varios idiomas veremos que a la derecha tanto del nombre como del Content, hay un desplegable con los idiomas. No es relevante en el caso del título, pero si del Content. Si queremos que nuestro botón aparezca en todos los idiomas tendremos que reproducir el código que creemos en cada uno de ellos.

Bajo en nombre hay dos desplegables, uno que indica el hook (la posición donde anclaremos nuestro botón), y otro que define el espacio (columnas) que ocupará. Establecemos el primero en “displayFooter”, y el segundo lo dejamos en “Auto”.

A continuación vamos a introducir la imagen y el código que “pintará” nuestro botón, con las clases necesarias para luego darle la posición y estilo que deseemos.

Imagen y código html del botón flotante de Whatsapp

Para facilitaros la cosa, he creado un una imagen para el botón con el icono de Whatsapp, de un tamaño más o menos estándar y fondo transparente, para que podáis cogerlo y utilizarlo. Sólo tendréis que pulsar con el botón derecho del ratón en la imagen siguiente, seleccionar “Guardar imagen como…” y descargarla a vuestro ordenador.

Una vez descargado, vamos a subirlo a nuestra web. Sólo tenemos que pulsar en el icono de “Insertar/editar imagen”:

Y a continuación pulsar en el botón con el icono del clip de la ventana desplegable que se nos abre:

Nos aparecerá una ventana con los “medios” (archivos e imágenes) de nuestra web. Para subir la imagen del icono de whatsapp pulsamos en el botón junto a “Acciones”, arrastramos (o hacemos click y buscamos nuestra imagen) al campo central nuestro icono, y pulsamos en “Regresar a la lista de archivos”.

Y a continuación… no hacemos nada 🙂 cerramos la ventana de medios y la de “insertar y editar imagen”. Lo que hemos hecho es subir nuestra imagen pero no vamos a colocarla por el método tradicional, ya que a continuación os pasaré un código que la insertará con los parámetros adecuados.

Pulsamos en el icono de código fuente:

Y pegamos el siguiente código, sustituyendo el número de teléfono (donde pone “34000000000”) por el nuestro. Es recomendable dejar el 34 delante de nuestro teléfono, si es un número de España, pero funcionará igualmente si no lo hacemos. ¡OJO! recordad sustituir los DOS teléfonos.

Es importante que la imagen que hemos subido antes tenga el mismo nombre que la que he puesto para descargar. Si no es así tendremos que modificar las partes del código que pone “whataspp_icon.png”, y poner el nombre de la imagen que hemos subido (ojo que hay dos). Podemos variar el tamaño de nuestro icono cambiando el número 48 del código, pero con la imagen que he subido no recomiendo que sea más de 100, ya que tiene justo ese tamaño, y ampliarlo más haría que la imagen se viese borrosa.

¿Que hace este código? Pone DOS botones de Whatsapp. ¿Y por qué estamos poniendo DOS botones? La razón es simple; según el soporte desde que el que nuestros clientes visiten nuestra web, Whatsapp se debe de ejecutar de una manera o de otra, una para desk (ordenador) y otra para móvil. Pero claro, no queremos que aparezcan dos botones siempre, que es lo que pasa en este momento al guardar nuestro módulo (sí! aquí ya hemos terminado). Así que guardamos, y a continuación insertaremos el código css que terminará de definir nuestro botón para que no aparezca doble y sea flotante.

Insertando código css para el botón flotante de Whatsapp

Warehouse tiene un editor de tema en back, y otro en front totalmente visual. Vamos a insertar nuestro código en el front, para que podamos ver los cambios que vamos realizando en nuestro botón y así poder ponerlo justo a nuestro gusto.

En el backend, en la columna de la izquierda, desplegamos la persiana de “Diseño” en el bloque de “Personalizar”, y clicamos en “IqitThemeEditor – Live”. Esto nos abrirá el editor del tema en front, con lo cual podremos ver nuestra home con los dos botones que hemos creado en el footer, con un título encima y no quedan muy bonitos… ¿verdad? ¡Vamos a arreglarlos y colocarlos en su sitio!

Para empezar, necesitamos saber el id del bloque que hemos creado para nuestro botón. Esta quizás sea la parte más compleja para personas que no tengan mucha idea (o ninguna) de programación, pero voy a explicarlo paso por paso para que no resulte complicado.

Vamos a hacer click con el botón derecho del ratón sobre el primero de nuestros iconos de Whatsapp, y vamos a seleccionar “Inspeccionar” en la lista desplegable que nos sale. Se nos abrirá una columna a la derecha o debajo (según nuestro navegador) que nos muestra parte del código de nuestra web.  El aspecto de lo que aparece será algo muy similar a esto:

Lo que está marcado en amarillo es lo que estás “mirando” en ese momento, o sea, la imagen del primer icono, pero lo que queremos saber es el id del bloque que contiene el código que hemos metido antes en el módulo. En el caso del ejemplo que estoy poniendo el id es “iqithtmlandbanners-block-4”.  Tendremos que copiar ese id para aplicarlo en el código css que pondré más adelante.

Una vez localizado y copiado el id, ya podemos cerrar el inspector (lo que hemos abierto para ver el código). A continuación nos vamos a la columna de la izquierda, la del editor del tema, y clicamos en “Custom Css/Js/Codes/Google Gtag”. Esto nos despliega el código personalizado de nuestra web. Nosotros sólo vamos a utilizar el campo de “Custom Css code”. Es muy probable que el desarrollador de tu web haya insertado ahí ya código, si es así es MUY IMPORTANTE que no modifiques nada del código ya existente, solo que añadas a continuación de la última línea escrita el siguiente código:

Algo habrá cambiado en la previsualización de tu web cuando has hecho esto, pero aun no está bien, verdad? Porque falta cambiar el id. En los tres sitios que pone “iqithtmlandbanners-block-4” tendremos que poner el id que hemos copiado antes, y… ahora si! debe de aparecer tu botón flotante en la parte derecha inferior de tu web.

Este código está hecho para páginas con botón “back-to-top”, por lo cual deja un espacio a la derecha en versión ordenador y abajo en versión móvil para este botón, pero puedes personalizarlo a tu gusto la posición variando las cifras de “right” y “bottom”.  Las cifras que aparecen bajo el “@media (max-width: 714px)” son las que se aplican en móvil, no debemos olvidar revisar la vista en este dispositivo y asegurarnos que queda a nuestro gusto. Puedes verlo haciendo click en los iconos de dispositivos de la parte inferior de la columna del editor (junto al botón de guardar).

Si no lo quieres a la derecha, puedes poner el botón flotante a la izquierda, poniendo este código en lugar del otro:

Si hemos seguido correctamente todos los pasos, ya tendremos nuestro botón de whatsapp flotante personalizado completamente funcional. ¡No olvides guardar tu edición cuando termines!

Espero que este post os resulte de utilidad , y si buscas implementar Warehouse o crear tu tienda online con este tema, ¡ponte en contacto con nosotros y te ayudaremos en el proceso!