Integrationsbeispiele

Online-Terminbuchung direkt auf deiner Website

So bindest du Cenplex Booking auf deiner Website ein – wahlweise als dezentes Overlay, das sich per Klick öffnet, oder fest eingebettet als iframe. Die unten stehenden Beispiele enthalten jeweils eine Live-Vorschau und den fertigen Code zum Kopieren.

Variante A · Overlay Variante B · iframe Parameter & IDs

Variante A · Overlay

Ein Button öffnet Cenplex Booking in einem eleganten Pop-up-Fenster über deiner Seite. Ideal, wenn die Buchung nicht dauerhaft sichtbar sein soll.

Variante B · iframe

Die Buchung wird fest in deine Seite eingebettet und ist sofort sichtbar. Ideal für eine eigene Unterseite „Termin buchen“.

1 Code-Zeile Fest eingebettet Kein JavaScript

Overlay einbauen

Das Overlay besteht aus vier Bausteinen, die du einmal in deine Seite einfügst – danach genügt ein Button-Klick.

Live-Vorschau

Cenplex Booking Overlay

Die Beispiele nutzen die Demo-Kennung customerId=5 mit drei Standorten. Für deine Website ersetzt du diese durch deine eigenen IDs (siehe Parameter).

Standort · Hinterbergstrasse 15 (locationId 8)

Standort · Nebenstrasse 12b (locationId 69)

Standort · Demostrasse 1 (locationId 143)

Styles einfügen

Ort: im <head>

CSS Overlay-Styles

<style>
  .cpx-overlay { display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(10,40,42,.5); backdrop-filter:blur(3px);
    align-items:center; justify-content:center; padding:24px; }
  .cpx-overlay[aria-hidden="false"] { display:flex; }
  .cpx-modal { position:relative; background:#fff; width:min(100%,1100px);
    height:min(100%,86vh); border-radius:18px; overflow:hidden;
    display:flex; flex-direction:column;
    box-shadow:0 12px 34px rgba(14,90,92,.14); }
  .cpx-bar { display:flex; align-items:center; justify-content:space-between;
    background:#2ea79e; color:#fff; padding:12px 16px; }
  .cpx-close { border:1px solid rgba(255,255,255,.35); background:transparent;
    color:#fff; border-radius:9px; padding:8px 12px; cursor:pointer; font-weight:700; }
  .cpx-content { position:relative; flex:1; }
  .cpx-frame { position:absolute; inset:0; width:100%; height:100%; border:0; }
  body.cpx-noscroll { overflow:hidden; }
</style>

Overlay-Container einfügen

Ort: direkt vor </body>

HTML Overlay-Grundgerüst

<div id="cpxOverlay" class="cpx-overlay" role="dialog" aria-modal="true"
     aria-hidden="true" onclick="cpxBackdrop(event)">
  <div class="cpx-modal">
    <div class="cpx-bar">
      <strong>Online-Buchung</strong>
      <button class="cpx-close" onclick="removeOnlineBookerOverlay()">Schliessen ✕</button>
    </div>
    <div class="cpx-content" id="cpxContent"></div>
  </div>
</div>

Script einfügen

Ort: direkt vor </body>

JS Öffnen / Schliessen

<script>
  function insertOnlineBookerOverlay(locationId, isGroup) {
    const overlay = document.getElementById('cpxOverlay');
    const content = document.getElementById('cpxContent');
    content.innerHTML = '';

    const base = isGroup == 1
      ? 'https://web.cenplexbooking.ch/courses'
      : 'https://web.cenplexbooking.ch/appointment-selection';

    const iframe = document.createElement('iframe');
    iframe.className = 'cpx-frame';
    iframe.src = base + '?customerId=5&locationId=' + encodeURIComponent(locationId);
    content.appendChild(iframe);

    overlay.setAttribute('aria-hidden', 'false');
    document.body.classList.add('cpx-noscroll');
    document.addEventListener('keydown', cpxEsc);
  }

  function removeOnlineBookerOverlay() {
    const overlay = document.getElementById('cpxOverlay');
    document.getElementById('cpxContent').innerHTML = '';
    overlay.setAttribute('aria-hidden', 'true');
    document.body.classList.remove('cpx-noscroll');
    document.removeEventListener('keydown', cpxEsc);
  }

  function cpxEsc(e) { if (e.key === 'Escape') removeOnlineBookerOverlay(); }
  function cpxBackdrop(e) { if (e.target === e.currentTarget) removeOnlineBookerOverlay(); }
</script>

Button platzieren

Ort: irgendwo im Inhalt (<body>)

HTML Auslöser-Button

<!-- Terminbuchung öffnen (locationId = 8, isGroup = 0) -->
<button onclick="insertOnlineBookerOverlay(8, 0)">Terminbuchung öffnen</button>

<!-- Gruppenkurse öffnen (isGroup = 1) -->
<button onclick="insertOnlineBookerOverlay(8, 1)">Gruppenkurse öffnen</button>

Tipp: Die ersten drei Bausteine fügst du nur einmal ein. Danach kannst du beliebig viele Buttons (Schritt 4) mit unterschiedlichen locationId-Werten auf deiner Seite verteilen.

iframe einbauen

Die einfachste Variante: Eine einzige Zeile HTML bettet die Buchung fest in deine Seite ein. Kein JavaScript nötig.

Live-Vorschau

Cenplex Booking als iframe

web.cenplexbooking.ch/appointment-selection?customerId=5&locationId=8

Vorschau lädt die echte Buchungsmaske.

iframe einfügen

Ort: dort im <body>, wo die Buchung erscheinen soll

HTML Ein einziger Baustein

<iframe
  src="https://web.cenplexbooking.ch/appointment-selection?customerId=5&locationId=8"
  title="Cenplex Terminbuchung"
  width="100%" height="800"
  style="border:0; border-radius:14px;"
  allow="clipboard-read; clipboard-write"></iframe>

Für Gruppenkurse tauschst du den Pfad /appointment-selection gegen /courses. Die Höhe (height) passt du an dein Layout an – 800 px ist ein guter Startwert.

Parameter & IDs

Diese Werte bestimmen, welche Buchung geladen wird. Deine persönlichen IDs erhältst du von Cenplex.

Wert	Bedeutung	Beispiel
`customerId`	Deine Kundennummer bei Cenplex – für alle Buchungen gleich.	`5`
`locationId`	Der jeweilige Standort. Je Standort ein eigener Wert.	`8`, `69`, `143`
`/appointment-selection`	Pfad für die Einzel-Terminbuchung.	`isGroup = 0`
`/courses`	Pfad für Gruppenkurse.	`isGroup = 1`