Insertar la página de reservas en tu sitio web

En Univents, tu página de reservas funciona como una página pública independiente. Pero también puedes insertarla directamente en tu sitio web actual, por ejemplo en una subpágina de catering, eventos o catas. Univents genera el código iFrame necesario ya listo para usar, así que no tienes que escribir nada tú.

Qué necesitas antes

Antes de insertarla, necesitas una página de reservas terminada. Si aún no tienes ninguna, créala primero. Abre el resumen de tus páginas de reservas y haz clic arriba a la derecha en Nueva página de reservas. Ahí le pones un nombre, eliges un diseño (Webshop, solicitud o Stepper), los productos y espacios reservables, y defines qué preguntas deben responder tus clientes.

Para que la página insertada sea visible para tus clientes, tiene que estar activa. Lo ves en el badge de estado junto al nombre en el resumen: En vivo significa publicada, Borrador significa que todavía no es visible. Haz clic en el badge para cambiar entre los dos estados. Una página en modo borrador no se muestra en el iFrame.

Obtener el código de inserción

El código de inserción está directamente en el resumen de páginas de reservas. Cada página tiene allí, en el borde derecho, una fila de iconos de acción.

1. Abre el resumen de tus páginas de reservas.
2. Busca la fila de la página de reservas que quieras.
3. Haz clic a la derecha en el icono de código con el tooltip Copiar fragmento de inserción.
4. Univents copia el código iFrame ya listo en tu portapapeles y lo confirma con el mensaje Código de inserción copiado.

El código copiado se parece a esto:

<iframe
  src="https://univents.app/embed/dein-workspace/deine-seite"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

Si solo necesitas el enlace directo en lugar del código iFrame, usa en su lugar el icono con el tooltip Copiar enlace de reserva.

Colocar el código en tu sitio web

Ahora pega el código copiado en el lugar de tu sitio web donde quieras que aparezca la página de reservas.

1. En tu constructor de sitios web, abre la página en la que debe aparecer la reserva.
2. Añade un elemento para código HTML propio. En WordPress, este bloque suele llamarse «HTML personalizado»; en otros sistemas, «Código», «Insertar» o «HTML».
3. Pega el código iFrame copiado en ese elemento.
4. Guarda y publica la página.

El ancho está definido en el código como width="100%", así que la página de reservas se adapta automáticamente al área de contenido. min-height:700px define la altura mínima. Si tu página de reservas es larga y se ve cortada por abajo, aumenta este valor.

Para desarrolladores: ajustar la altura automáticamente en lugar de fijarla

El valor fijo min-height:700px del código de inserción es solo una altura mínima: si no hay espacio suficiente, la página de reservas se corta por abajo. Si tienes acceso al código de tu sitio web (o tu desarrollador web lo tiene), puedes hacer que la altura crezca automáticamente: la página insertada envía por sí sola un mensaje a la ventana principal cada vez que cambia de tamaño.

Un pequeño script en tu sitio web captura ese mensaje y ajusta la altura del iFrame en tiempo real:

<iframe
  id="univents-booking-iframe"
  src="https://univents.app/embed/dein-workspace/deine-seite"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

<script>
  window.addEventListener('message', function (event) {
    if (event.data && event.data.type === 'univents-embed-resize') {
      var iframe = document.getElementById('univents-booking-iframe');
      if (iframe) iframe.style.height = event.data.height + 'px';
    }
  });
</script>

Sin este script, todo sigue funcionando como siempre: solo tendrás que aumentar a mano el valor fijo de min-height cuando haga falta (consulta las preguntas frecuentes más abajo).

Cookies en el área insertada

La página de reservas insertada no muestra un banner de cookies propio y no instala cookies. Es intencionado: dos banners uno encima del otro, el tuyo en el sitio web y otro en el iFrame, solo confundirían a tus visitantes. Así, el consentimiento queda por completo en tu propio sitio web; para la página de reservas insertada no tienes que recabar nada adicional.

Si alguien accede a la página de reservas desde su propia dirección, es decir, sin estar insertada, ocurre lo contrario: ahí Univents muestra su propio banner de cookies.

Probar y comprobar

Antes de dar la página insertada a tus clientes, comprueba el resultado.

1. Abre la página de tu sitio web en la que has colocado el código.
2. Comprueba que la página de reservas se muestra completa y sin cortes.
3. Si quieres comprobar el comportamiento antes en Univents, haz clic en el resumen en el icono con el tooltip Abrir vista previa en vivo para ver la página en una pestaña nueva.
4. Haz una solicitud de prueba para asegurarte de que la reserva te llega correctamente.

Si después quieres cambiar algo del contenido, el diseño o las preguntas, haz clic en Configurar en la fila de la página de reservas. Los cambios aparecen automáticamente también en la versión ya insertada; no tienes que volver a copiar el código iFrame.

Preguntas frecuentes

¿Tengo que volver a copiar el código después de cada cambio? No. El iFrame muestra siempre el estado actual de tu página de reservas. Los cambios de contenido hechos con Configurar son visibles de inmediato también en la versión insertada.

La página se corta por abajo, ¿qué hago? Aumenta en el código pegado el valor de min-height:700px, por ejemplo a 1000px. Así la página de reservas tiene más espacio. Quien tenga acceso al código del sitio web puede hacer que la altura crezca automáticamente en su lugar; consulta la sección «Para desarrolladores» más arriba.

A mis clientes no les aparece nada en el iFrame. Comprueba si la página de reservas tiene el estado En vivo. Si está en Borrador, no se muestra públicamente. Haz clic en el badge de estado para activarla.

¿Dónde encuentro otra vez la guía? En el resumen, cada página tiene un icono de libro con el tooltip Abrir guía de inserción que te lleva directamente aquí.