Widget diario multiservicio – Centro de Ayuda del Sistema de Reservas TuriTop

¿En dónde puedo encontrarlo? Servicios >>> Categorías.

En este artículo, te mostraremos qué es el Widget Diario Multiservicio, cómo puede transformar la experiencia de reserva en tu sitio web y los pasos necesarios para instalarlo correctamente. El Widget Diario Multiservicio es una herramienta diseñada para ofrecer una visión global de tu oferta. A diferencia del widget estándar (un único calendario), este formato permite mostrar todos tus servicios disponibles en una sola vista de calendario diario.

Por el momento, el Widget Diario Multiservicio es compatible exclusivamente con servicios de tipo Tour/Actividad.

Cómo instalarlo

Puedes encontrar los códigos de instalación en tu panel TuriTop accediendo a Servicios >>> Categorías.

Paso 1: Instala el script del código global

Instala el script que debe colocarse en la parte inferior de cada página de su sitio web antes del tag.

<script id="js-turitop" src="https://app.turitop.com/js/load-turitop.min.js" data-company="XX" data-buttoncolor="green" data-afftag="ttafid" ></script>

Cambia el código de identificación de compañía XX en data-company="XX"por tu propio ID de TuriTop. Éste se encuentra en la esquina superior derecha del panel de control de tu sistema de reservas TuriTop.

Paso 2: Instala el código del widget

Instala el código del widget diario multiservicio en la parte de tu sitio web donde desees que se muestre.

<div class="load-turitop" data-service="all" data-lang="es" data-embed="box"></div>

Paso 3 (Opcional): Instalar el widget en otros idiomas

El es en el código data-lang="es" representa el idioma en el que aparecerá el widget. Puedes cambiarlo a cualquier idioma disponible que necesites siempre que se haya realizado previamente la traducción.

Si copias el código directamente desde tu panel en la pestaña Servicios >>> PX (Servicio deseado) >>> Instalación, verás un menú que te permite cambiarlo automáticamente.

Otras configuraciones

A continuación, detallamos otras configuraciones avanzadas que te permitirán personalizar tu Widget Diario Multiservicio según tus necesidades. Entre estas opciones, aprenderás a filtrar el widget para mostrar únicamente servicios específicos, configurar la visualización de los días sin eventos para mejorar la navegación del usuario y añadir imágenes de portada que harán tu calendario de disponibilidad mucho más visual y atractivo.

Mostrar servicios específicos

Si deseas que el Widget Diario Multiservicio muestre únicamente un grupo selecto de actividades en lugar de toda tu oferta, sigue estos pasos para filtrarlos por categoría:

Crea una Categoría: Ve a la pestaña Servicios >>> Categorías y crea una nueva categoría que incluya solo los servicios que te interese mostrar.
Identifica el código: Una vez creada, localiza el código identificador de la categoría (por ejemplo: C1, C2, C3, etc.).
Modifica el código del Widget: En el código HTML que obtuviste en el Paso 2, localiza el parámetro data-service="all" y sustitúyelo por data-category="CX", reemplazando la "X" por el número de tu categoría.

<div class="load-turitop" data-category="CX" data-lang="es" data-embed="box"></div>

Visualización de los días sin eventos

Por defecto, el calendario del Widget Diario Multiservicio no distingue visualmente entre los días que tienen disponibilidad y los que no; únicamente diferencia entre fechas pasadas y futuras.

Para mejorar la experiencia de usuario y evitar clics innecesarios, puedes añadir el parámetro data-datepickeravailability="show" en el código de instalación.

Ejemplo:

<div class="load-turitop" data-service="all" data-lang="es" data-embed="box" data-datepickeravailability="show"></div>

¿Cuál es la diferencia?

Sin el parámetro (Modo por defecto): El calendario es "mudo" respecto a la disponibilidad. Todos los días futuros se muestran con la misma apariencia, y el usuario debe ir clicando uno a uno para descubrir si hay plazas o eventos.

Con data-datepickeravailability="show": El calendario se vuelve "inteligente" y funciona como un semáforo visual para guiar al cliente:
- Días en Verde: Indican disponibilidad inmediata, incentivando la reserva.
- Días en Rojo: Indican fechas con eventos agotados o cerrados.
- Días en Gris: Indican días en los que no hay ningún evento programado.

Al habilitar esta función, optimizas el proceso de compra al dirigir la atención del usuario directamente hacia los días con plazas libres, reduciendo la tasa de abandono en tu web.

Debido a la cantidad de datos que procesa, esta versión del widget presenta una latencia de carga superior, por lo que el tiempo de visualización inicial puede ser ligeramente mayor.

Añadir imágenes de portada

Para que tu calendario sea mucho más visual y ayude al cliente a identificar rápidamente tus actividades, esta versión del widget permite incluir imágenes de portada.

Añadir imágenes de portada por servicio

Para que las imágenes se visualicen correctamente en tu widget, primero debes configurar el archivo gráfico dentro de cada actividad. Para ello, dirígete a la pestaña Servicios >>> PX (Servicio deseado) >>> Información del servicio, localiza el apartado 'Subir imagen de portada' y carga la imagen que desees mostrar.

Una vez guardados los cambios, utiliza el siguiente código <div> para proceder con la instalación en tu sitio web:

<div class="load-turitop" data-service="all" data-version="2" data-lang="es" data-embed="box" data-datepickeravailability="show"></div>

Este widget se visualizará de la siguiente manera:

Añadir imágenes de portada por categoría

Una vez guardados los cambios, utiliza el siguiente código <div> para proceder con la instalación en tu sitio web. Aquí, modifica el valor en data-category="CX" dependiendo de la categoría que quieras mostrar:

<div class="load-turitop" data-category="CX" data-version="2" data-lang="es" data-embed=
"box" data-datepickeravailability="show"></div>