Integra tu página de reservas en tu web

🟢Beginner 5 min read

Aprende a integrar fácilmente tu página de reservas de FlowDule en tu propia web con un iframe o nuestro widget.

Puedes dejar que tus clientes reserven directamente desde tu propia web - sin necesidad de salir de ella. También puedes integrar tus eventos, tu tienda online o la venta de tarjetas regalo. FlowDule ofrece dos formas sencillas de integración.

Antes de empezar

Necesitas tu slug de reservas - es la parte de tu dirección de reservas que va antes de .flowdule.com. Si tu página de reservas es, p. ej., klinik-nord.flowdule.com, tu slug es klinik-nord.

Encuentras tu slug en Configuración → Reserva online en la app de FlowDule.

---

Opción 1: iframe directo

El método más simple. Copia el código HTML de abajo y pégalo donde quieras que aparezca el formulario de reservas en tu web.

<iframe
  src="https://klinik-nord.flowdule.com?embed=true"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none; border-radius: 8px;"
  allow="payment"
  title="Reservar una cita"
></iframe>

Ventajas:

• Funciona en todos los CMS (WordPress, Wix, Squarespace, Webflow, etc.)
• No requiere JavaScript
• Control total sobre la posición y el tamaño

Consejos:

• Ajusta el valor de height si el contenido se corta. Recomendamos un mínimo de 700.
• Un iframe puro tiene altura fija. Si quieres ajuste automático de altura, usa el script del widget (opción 2) - o escucha tú mismo el evento flowdule:resize, como se describe en “Avanzado” al final.

---

Opción 2: Widget de FlowDule (recomendado)

Nuestro script de widget lo gestiona todo automáticamente - la creación del iframe, el ajuste automático de altura y, opcionalmente, un botón “Reservar una cita” con ventana emergente.

El script está en tu propia dirección de reservas, así que src siempre empieza con tu slug: https://klinik-nord.flowdule.com/widget.js.

Vista integrada (inline)

El formulario de reservas se muestra directamente en la página:

<div id="flowdule-booking"></div>
<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-target="flowdule-booking"
></script>

Vista emergente (modal)

Un botón que abre el formulario de reservas en una capa superpuesta:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-mode="modal"
  data-button-text="Reservar una cita"
  data-button-color="#4A7C59"
></script>

El botón se inserta automáticamente donde coloques la etiqueta script.

---

Elige qué muestra el widget

Con data-view decides qué parte de tu página de FlowDule se integra. El widget se mantiene dentro del área elegida, de modo que los visitantes no pueden navegar a tus otros módulos dentro del iframe.

data-view	Muestra
booking (predeterminado)	El flujo de reserva: ubicación, servicio, hora y confirmación
events	Tu lista de eventos - o un evento concreto con data-event-id
shop	Tu tienda online con productos, carrito y caja
giftcard	La compra de tarjetas regalo

Si omites data-view, el widget se comporta exactamente como antes: muestra el flujo de reserva.

Ejemplo 1: Reserva, integrada en la página

La configuración mínima posible:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
></script>

Ejemplo 2: Tienda online en tema oscuro

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="shop"
  data-theme="dark"
></script>

Ejemplo 3: Un evento concreto como botón

El botón abre el evento en una capa superpuesta - perfecto para un botón “Comprar entrada” junto a tu propia descripción del evento:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="events"
  data-event-id="3f9c1b8e-5d2a-4f7c-9a31-6b0e8c2d4a15"
  data-mode="modal"
  data-button-text="Comprar entrada"
></script>

Ejemplo 4: Tarjetas regalo

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="giftcard"
></script>

Empezar en un punto concreto del flujo de reserva

Si tienes varias ubicaciones, puedes saltarte la selección de ubicación, y puedes preseleccionar un servicio concreto:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="booking"
  data-location-id="a41f0d92-77c5-4b1e-8f60-2c9e5a7d3b84"
  data-service-id="d7b3e610-9c48-42aa-b1f5-0e83c6d21947"
></script>

data-service-id requiere data-location-id, porque los servicios pertenecen a una ubicación.

Puedes tener varios widgets en la misma página - p. ej., reservas arriba y tienda más abajo. Da a cada widget su propio elemento data-target.

---

Configuración del widget

Atributo	Obligatorio	Predeterminado	Descripción
data-slug	Sí	-	Tu slug de reservas
data-view	No	booking	Qué se muestra: booking, events, shop o giftcard
data-event-id	No	-	Abre un evento concreto (requiere data-view="events")
data-location-id	No	-	Empieza directamente en una ubicación (requiere data-view="booking")
data-service-id	No	-	Preselecciona un servicio (requiere data-location-id)
data-theme	No	auto	light, dark o auto (sigue la configuración del sistema del visitante)
data-locale	No	Idioma de la cadena	Idioma: da, en o de. Si se omite, se usa tu propio idioma en FlowDule
data-target	No	Automático	ID del elemento HTML donde debe mostrarse el contenido
data-mode	No	inline	inline (directo) o modal (emergente)
data-button-text	No	”Book en tid”	Texto del botón (solo vista modal)
data-button-color	No	#2D5A5C	Color del botón (solo vista modal)
data-show-map	No	Oculto	true muestra un mapa de las ubicaciones
data-show-contact	No	Oculto	true muestra el enlace de contacto, oculto por defecto en la vista integrada
data-background	No	transparent	surface da al widget su propio fondo

---

Cómo hacerlo en WordPress

Con Elementor

1. Añade un widget HTML donde quieras la reserva
2. Pega el código del iframe o del widget
3. Guarda y previsualiza

Con el editor de bloques de WordPress (Gutenberg)

1. Añade un bloque HTML personalizado
2. Pega el código
3. Cambia a “Vista previa” para ver el resultado

Con un tema de WordPress

Pega el código en tu archivo de plantilla (p. ej. page-booking.php) donde quieras el formulario.

---

Cómo hacerlo en otros CMS

Wix

1. Ve a tu página en el editor de Wix
2. Haz clic en Añadir → Embed Code → Custom Element o HTML iframe
3. Pega el código

Squarespace

1. Edita la página deseada
2. Añade un Code Block
3. Pega el código y guarda

Webflow

1. Arrastra un componente Embed a tu página
2. Pega el código
3. Publica tu página

---

Avanzado: escuchar eventos de reserva

Si quieres reaccionar cuando un cliente ha completado una reserva (p. ej., para seguimiento o para mostrar un mensaje de agradecimiento), puedes escuchar eventos postMessage:

<script>
  window.addEventListener("message", function (event) {
    // Confirma que el mensaje viene exactamente de tu dirección de reservas
    if (event.origin !== "https://klinik-nord.flowdule.com") return;

    if (event.data.type === "flowdule:booked") {
      // ¡El cliente ha reservado!
      console.log("Reserva completada:", event.data.bookingId);
      console.log("Código de confirmación:", event.data.confirmationCode);
    }
  });
</script>

Todos los eventos disponibles

Evento	Datos	Cuándo
flowdule:ready	—	El formulario de reservas se ha cargado
flowdule:resize	{ height }	El contenido ha cambiado de altura
flowdule:navigate	{ path, step }	El cliente cambia de paso (1–4)
flowdule:booked	{ bookingId, confirmationCode }	Reserva completada

---

Solución de problemas

¿No se muestra la reserva?

• Comprueba que tu slug es correcto
• Comprueba que la reserva online está activada en Configuración → Reserva online

¿No se muestran los eventos, la tienda o las tarjetas regalo?

• Comprueba que el módulo está activado para tu cadena - el widget solo puede mostrar módulos que usas
• Comprueba que data-view está escrito como events, shop o giftcard
• Si usas data-event-id, el evento debe ser público y no haber pasado

¿El widget está en el tema o idioma equivocado?

• data-theme="auto" sigue la configuración del sistema del visitante. Pon light o dark si debe fijarse
• Omite data-locale si el widget debe usar el idioma de la cadena

¿El iframe es demasiado pequeño?

• Aumenta el valor de height en tu código de iframe
• Usa el script del widget en su lugar — ajusta la altura automáticamente

¿La reserva funciona pero se ve rara?

• Asegúrate de que tu página no sobrescribe el estilo del iframe con CSS global
• Añade style="border: none;" al iframe