Widgets en su propio sitio web

Qué es un widget

Un widget muestra su tienda de Unitlify directamente en su propio sitio web. El cliente permanece en su página, busca una oferta, elige fecha y entradas y paga, sin pasar a unitlify.de. Técnicamente, el widget es su tienda dentro de un marco: todas las ofertas, precios, métodos de pago y textos legales proceden de Unitlify; los colores y las fuentes, del diseñador de tienda.

Los widgets se gestionan en Sistema de reservas → Integración web. Para ello necesita el permiso «Integración web».

Paso 1: autorizar el dominio

Antes de que un widget funcione en su sitio web, el dominio del sitio debe estar registrado en Dominios autorizados. Sin autorización, el widget muestra un mensaje de error en lugar de las ofertas.

• Introdúzcalo sin https://, por ejemplo mi-empresa.es. Con o sin www. es indiferente.
• Si el widget funciona en un subdominio como tienda.mi-empresa.es o entradas.mi-empresa.es, registre ese subdominio. mi-empresa.es por sí solo no basta.
• El sitio web debe funcionar con https.
• Tras el registro puede tardar hasta un minuto en que la autorización surta efecto en todas partes.

Paso 2: crear el widget

Haga clic en Nuevo widget. El editor le guía en cinco pasos: tipo de widget, ajustes, diseño, contenido visible, guardar.

Los cuatro tipos de widget

Ajustes

• Idioma: alemán, inglés, francés o español. Es el idioma de reserva. El widget se rige primero por el idioma de su sitio web (el atributo lang de la página), después por el idioma del navegador del cliente y, por último, por este ajuste.
• SUB-ID: un identificador de libre elección de hasta 60 caracteres, por el que podrá analizar las reservas más adelante. Más información abajo.
• Nombre y descripción: solo para usted; aparecen en la lista de widgets y en la vista de detalle de la reserva.
• Botón: texto del botón (hasta 40 caracteres; en caso contrario, «Reservar ahora»), destino (cuadro de reserva, página de producto, catálogo) y si el botón flota abajo a la derecha o se sitúa en el lado derecho.

Diseño

Anchura en píxeles (vacío = anchura completa), alineación, altura (crece con el contenido o fija), borde y radio de las esquinas. En el catálogo, además, tarjetas o lista, tarjetas por fila y si se destaca la primera oferta. En el móvil siempre hay una tarjeta por fila.

Una altura fija añade una barra de desplazamiento propia dentro del widget. «Crece con el contenido» es casi siempre la mejor opción.

Los colores, la fuente y la forma de las tarjetas no se configuran aquí, sino en el Diseñador de tienda. Se aplican conjuntamente a la tienda y a todos los widgets.

Contenido visible

En catálogo y producto decide qué se ve: imagen, precio, duración y lugar en la tarjeta; encabezado, barra de búsqueda, filtros, número de resultados, vales y barra de confianza alrededor; galería, descripción y puntos destacados en la página de producto. En el widget, los elementos del entorno están desactivados de forma predeterminada, salvo los vales. Los filtros solo aparecen cuando hay algo que filtrar (al menos dos sedes, idiomas o precios). El widget solo muestra vales con «Todas las ofertas».

En el widget Booking solo elige si se muestran el calendario, las entradas restantes y las categorías agotadas.

Paso 3: insertar el código de inserción

Tras guardar, el editor muestra el código de inserción:

<unitlify-katalog widget-id="SU-ID-DE-WIDGET"></unitlify-katalog>
<script src="https://unitlify.de/widget/v1/katalog.js" defer></script>

Inserte ambas líneas en el lugar de su sitio web donde deba aparecer el widget.

• WordPress, Elementor, Wix, Squarespace: inserte el código en un elemento HTML (no en un bloque de texto).
• Varios widgets en una página: cada widget recibe su propio elemento <unitlify-katalog>. El script solo tiene que estar una vez en la página, pero una segunda vez no hace daño.
• Plugins de velocidad como WP Rocket, LiteSpeed Cache o Autoptimize: excluya katalog.js de «Retrasar la ejecución de JavaScript»; de lo contrario, el widget solo aparece tras un clic en la página.

Sobrescribir ajustes en el código

Puede sobrescribir ajustes de diseño directamente en el elemento, sin crear un segundo widget en el panel:

<unitlify-katalog widget-id="…" max-width="640" align="center" frame="border" lang="en"></unitlify-katalog>

El atributo lang="de" es la vía más rápida si el widget aparece en el idioma equivocado, por ejemplo porque su sitio web tiene configurado lang="en-US".

Qué ocurre después de la reserva

El cliente permanece en su confirmación dentro del widget; no se abandona su sitio web. En el widget Botón, la siguiente apertura empieza de nuevo desde cero.

Para su agencia web: tras una reserva completada, el widget dispara en el elemento el evento unitlify:booking, sin datos personales. Con él se puede, por ejemplo, activar un objetivo de conversión en Analytics. El evento significa «reserva creada», no «pagada»: también se produce con transferencia y pago en el sitio. En los métodos de pago con redirección al proveedor (Klarna, iDEAL) no se dispara.

SUB-ID: analizar las reservas por origen

Cada widget puede llevar una SUB-ID, por ejemplo inicio, landingpage-verano o socio-hotel-x. En cada reserva y cada compra de vale a través del widget, la SUB-ID se guarda en la reserva. Varios widgets pueden llevar la misma SUB-ID; entonces se analizan conjuntamente.

Los resultados se ven en tres lugares:

• Integración web: por widget, reservas, participantes e ingresos de 30 días, 90 días, 12 meses o total; debajo, la tabla «Por SUB-ID». Los ingresos incluyen todas las reservas no canceladas, es decir, también las aún no pagadas.
• Lista de reservas: filtros «Todos los widgets» y «Todas las SUB-ID». Los filtros solo aparecen cuando existen widgets o SUB-ID.
• Exportación: columnas «Widget (inserción)» y «SUB-ID».

La SUB-ID se copia al reservar. Si la cambia después, las reservas antiguas conservan el identificador antiguo. Si elimina un widget, sus reservas pierden la asignación al widget; la SUB-ID permanece en la reserva, pero ya no aparece en el filtro mientras ningún otro widget la lleve.

Métodos de pago en el widget

En el widget se aplican los mismos métodos de pago y reglas que en la tienda; véase Configurar los métodos de pago. Para Apple Pay debe registrar además el dominio de su sitio web en Métodos de pago → Dominios registrados.

Vista previa

La vista previa del editor muestra el estado guardado. Los cambios sin guardar no se ven ni en la vista previa ni en su sitio web. Tras guardar, puede tardar hasta un minuto en que la nueva versión aparezca en su sitio web.

Lista de comprobación en caso de problemas

• Mensaje de error en lugar de ofertas: dominio no autorizado, o solo se registró el dominio principal en lugar del subdominio. El mensaje indica el dominio que falta.
• El widget queda vacío: el sitio web funciona con http en lugar de https, o un plugin de velocidad retrasa el script.
• Idioma incorrecto: compruebe el atributo lang de su sitio web o establezca lang="de" en el elemento.
• Cambio no visible: no guardado, o todavía dentro del minuto de caché.
• No hay vales en el catálogo: los vales solo aparecen con «Todas las ofertas».
• Falta Apple Pay en el widget: añada el dominio en Métodos de pago → Dominios registrados.
• Faltan reservas en la estadística del widget: la reserva no llegó a través del widget, sino a través del enlace de la tienda u otro canal.