Formulario de reservas en su web

1. Código básico

Copie el código HTML y péguelo en cualquier lugar de su web. Sustituya vase-meno por el identificador de su negocio — es la parte de la dirección que va después de /embed/. El enlace completo se copia en el panel: Servicios → elija un servicio → Compartir.

<iframe
  src="https://app.terminuj.com/embed/vase-meno"
  style="width:100%; max-width:680px; height:780px; border:0;"
  allow="payment"
  loading="lazy"
  title="Rezervácia termínu"></iframe>

Si el servicio requiere una señal, se paga en la página de reserva de Terminuj, que se abre desde el formulario insertado en una pestaña nueva. loading="lazy" carga el formulario solo cuando el visitante se desplaza hasta él.

1b. Variante con script (altura automática en un solo bloque)

Si desea el formulario sin altura fija (se adapta al contenido — fecha elegida, datos del cliente), use este único bloque. Crea el iframe y ajusta la altura por sí mismo mediante postMessage. Ya no necesita el código del punto 3 — va incluido.

<div id="rezervacia-widget"></div>
<script>
(function () {
  var mount = document.getElementById('rezervacia-widget');
  var f = document.createElement('iframe');
  f.src = "https://app.terminuj.com/embed/vase-meno";
  f.style.cssText = 'width:100%;max-width:680px;height:780px;border:0';
  f.allow = 'payment';
  f.loading = 'lazy';
  f.title = 'Rezervácia termínu';
  mount.appendChild(f);
  window.addEventListener('message', function (e) {
    if (e.origin !== 'https://app.terminuj.com' || e.source !== f.contentWindow) return;
    if (e.data && e.data.type === 'rezervacia:resize') {
      var h = Number(e.data.height);
      if (h > 0 && h < 10000) f.style.height = Math.round(h) + 'px';
    }
  });
})();
</script>

iframe (punto 1) = lo más sencillo, funciona incluso sin JavaScript, pero tiene altura fija. Variante con script = algo más de código, pero el formulario crece y se reduce según el contenido. Ambos admiten los mismos parámetros theme/primary/font.

Consejo: encontrará códigos listos para cada tema en la galería /temy — elige el tema, ve la vista previa y copia el código.

2. Aspecto (tema, color, fuente)

Añada los parámetros a la dirección en src:

• theme = light | dark | auto (según el ajuste del dispositivo; por defecto light)
• primary = color en hex sin # (p. ej. B4436C) — botones y elementos destacados
• font = Inter | system (por defecto Inter)
• service = identificador del servicio — el formulario lo preselecciona directamente (ese enlace lo da el botón Compartir del servicio)
• locale = sk | en | cs | hu | de | es — idioma del formulario y de la reserva (la confirmación y los recordatorios llegarán al cliente en este idioma); por defecto, el idioma del negocio

<iframe
  src="https://app.terminuj.com/embed/vase-meno?theme=light&primary=B4436C&font=Inter"
  style="width:100%; max-width:680px; height:780px; border:0;"
  allow="payment"
  loading="lazy"
  title="Rezervácia termínu"></iframe>

Sin el parámetro primary se usa el color del panel (Ajustes → Imagen y logotipo). Sin el parámetro locale, el idioma del formulario sigue el ajuste del negocio (Ajustes → Idioma y región). Indique el color sin #.

3. Altura automática

El formulario envía un postMessage con su altura actual en cada cambio de tamaño (fecha elegida, servicio, datos del cliente). Script opcional para el punto 1:

<script>
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://app.terminuj.com') return;
  if (event.data?.type !== 'rezervacia:resize') return;
  const iframe = document.querySelector('iframe[src*="app.terminuj.com/embed"]');
  if (iframe) iframe.style.height = event.data.height + 'px';
});
</script>

Formato del mensaje

Contenido del mensaje:

{
  type: 'rezervacia:resize',
  tenantSlug: 'vase-meno',   // qué formulario lo envía (si hay varios en la página)
  height: 1240                // px (document.documentElement.scrollHeight)
}

Varios formularios en una misma página

Distíngalos por el tenantSlug del mensaje y seleccione el iframe por su src:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://app.terminuj.com') return;
  if (event.data?.type !== 'rezervacia:resize') return;
  const iframe = document.querySelector(
    `iframe[src*="/embed/${event.data.tenantSlug}"]`
  );
  if (iframe) iframe.style.height = event.data.height + 'px';
});

Sin el script, el formulario tiene una altura fija de 780 px (se desplaza dentro del iframe). Envía el mensaje al cargarse y después en cada cambio de tamaño de la página del formulario (ResizeObserver).

4. Inserción en un gestor de contenidos

WordPress

// 1. Administración de WordPress → Páginas → editar la página
// 2. Añadir un bloque «HTML personalizado» (Custom HTML)
// 3. Pegar el código del punto 1
// 4. Publicar

Shopify

<!-- Online Store → Themes → Edit code → Sections → footer.liquid -->
<!-- Pegue el código del punto 1 en cualquier lugar entre <body>...</body> -->

React / Next.js

// React / Next.js
export function BookingWidget() {
  return (
    <iframe
      src="https://app.terminuj.com/embed/vase-meno"
      style={{ width: '100%', maxWidth: 680, height: 780, border: 0 }}
      allow="payment"
      loading="lazy"
      title="Reservar cita"
    />
  );
}

Webnode / Wix / Squarespace

Añada un bloque de código HTML personalizado («Embed HTML» / «Custom Code» / «Code») y pegue el código del punto 1. Si su plan lo permite, consúltelo con su proveedor de web.

5. Seguridad (CSP, X-Frame-Options)

Solo se pueden insertar las páginas /embed/* — envían Content-Security-Policy: frame-ancestors *, así que funcionan en cualquier dominio. Las demás páginas (panel, inicio de sesión, gestión de la reserva) envían X-Frame-Options: DENY y frame-ancestors 'none' — no se pueden insertar en un iframe.

Si su web tiene una CSP estricta, permita este origen:

Content-Security-Policy:
  frame-src https://app.terminuj.com;
  child-src https://app.terminuj.com;

6. Problemas frecuentes