Booking form on your website

1. Basic snippet

Copy the HTML code and paste it anywhere on your website. Replace vase-meno with your business identifier — it is the part of the address after /embed/. You can copy the full link in the dashboard: Services → choose a service → Share.

<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>

If the service requires a deposit, it is paid on the Terminuj booking page, which opens from the embedded form in a new tab. loading="lazy" loads the form only when the visitor scrolls to it.

1b. Script variant (automatic height in one block)

If you want the form without a fixed height (it adapts to the content — selected date, customer details), use this single block. It creates the iframe and sets the height itself via postMessage. You no longer need the code from step 3 — it is included.

<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 (step 1) = the simplest, works even without JavaScript, but has a fixed height. Script variant = a little more code, but the form grows and shrinks with its content. Both support the same theme/primary/font parameters.

Tip: ready-made snippets for specific themes are in the /temy gallery — choose a theme, see the preview and copy the code.

2. Appearance (theme, colour, font)

Add parameters to the address in src:

• theme = light | dark | auto (follows the device setting; default light)
• primary = colour in hex without # (e.g. B4436C) — buttons and highlights
• font = Inter | system (default Inter)
• service = service identifier — the form preselects it straight away (the Share button next to a service gives such a link)
• locale = sk | en | cs | hu | de | es — language of the form and of the booking (the confirmation and reminders reach the customer in this language); defaults to the business language

<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>

Without the primary parameter, the colour from the dashboard is used (Settings → Look and logo). Without the locale parameter, the form language follows the business setting (Settings → Language and region). Enter the colour without #.

3. Automatic height

The form sends a postMessage with its current height on every size change (selected date, service, customer details). Optional script for step 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>

Message format

Message content:

{
  type: 'rezervacia:resize',
  tenantSlug: 'vase-meno',   // which form is sending (when there are several on the page)
  height: 1240                // px (document.documentElement.scrollHeight)
}

Several forms on one page

Tell them apart by tenantSlug in the message and select the iframe by 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';
});

Without the script the form has a fixed height of 780 px (it scrolls inside the iframe). It sends the message on load and then on every size change of the form page (ResizeObserver).

4. Embedding in a content management system

WordPress

// 1. WordPress admin → Pages → edit the page
// 2. Add a “Custom HTML” block
// 3. Paste the code from step 1
// 4. Publish

Shopify

<!-- Online Store → Themes → Edit code → Sections → footer.liquid -->
<!-- Paste the code from step 1 anywhere between <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="Book an appointment"
    />
  );
}

Webnode / Wix / Squarespace

Add a custom HTML block (“Embed HTML” / “Custom Code” / “Code”) and paste the code from step 1. Check with your website provider whether your plan allows it.

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

Only /embed/* pages can be embedded — they send Content-Security-Policy: frame-ancestors *, so they work on any domain. All other pages (dashboard, sign-in, booking management) send X-Frame-Options: DENY and frame-ancestors 'none' — they cannot be embedded in an iframe.

If your website has a strict CSP, allow this origin:

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

6. Common problems