Cenplex Booking Web

Cenplex Booking in deine Website einbinden

Du kannst Cenplex Booking direkt in deine eigene Website integrieren, damit deine Kundinnen und Kunden Termine buchen, ohne die Seite zu verlassen. Dafür gibt es zwei Wege:

Als iframe – die Buchung ist fest in eine Seite eingebettet und sofort sichtbar. Ideal für eine eigene Unterseite, z. B. „Termin buchen".
Als Overlay – ein Button öffnet die Buchung in einem Pop-up-Fenster über deiner Seite. Ideal, wenn die Buchung nicht dauerhaft sichtbar sein soll.

> Hier findest du zusätzlich zu dieser Dokumentation eine übersichtliche Anleitung.

Nur verlinken statt einbetten? Wenn du die Buchung gar nicht einbetten, sondern nur verlinken möchtest, findest du die fertigen Direktlinks im Adminportal unter Standorte → Buchungslinks. Kopiere den Link und setze ihn als normalen Button oder Menüpunkt auf deine Website.

So startest du

Bevor du startest: deine IDs

Jeder Buchungslink besteht aus zwei Werten, die du im Adminportal unter Standorte → Buchungslinks findest:

customerId – deine Kundennummer bei Cenplex. Für alle deine Buchungen gleich.
locationId – der jeweilige Standort. Jeder Standort hat einen eigenen Wert.

Ausserdem entscheidet der Pfad, was geöffnet wird:

/appointment-selection → Einzel-Terminbuchung
/courses → Gruppenkurse

In allen Code-Beispielen unten stehen die Demo-Werte customerId=5 und locationId=8. Ersetze sie durch deine eigenen Werte aus dem Adminportal.

Integration als iframe

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

Füge den folgenden Code an der Stelle in deiner Seite ein, an der die Buchung erscheinen soll:

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

Anpassen:

customerId und locationId durch deine eigenen Werte ersetzen.
Für Gruppenkurse den Pfad /appointment-selection gegen /courses tauschen.
Die Höhe über height="800" an dein Layout anpassen – 800 Pixel sind ein guter Startwert.

Integration als Overlay

Beim Overlay öffnet ein Button die Buchung in einem Pop-up-Fenster. Du fügst dazu drei Bausteine einmal in deine Seite ein und platzierst danach beliebig viele Buttons.

Schritt 1: Styles einfügen

Füge dieses CSS im <head> deiner Seite ein:

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

Schritt 2: Overlay-Container einfügen

Füge dieses Grundgerüst direkt vor dem schliessenden </body> ein:

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

Schritt 3: Script einfügen

Füge dieses Script ebenfalls direkt vor </body> ein. Ersetze customerId=5 durch deine eigene Kundennummer:

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

Schritt 4: Button platzieren

Jetzt kannst du an beliebiger Stelle im Inhalt einen Button einfügen. Der erste Wert ist die locationId, der zweite steuert Termin (0) oder Gruppenkurse (1):

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

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

Die drei ersten Bausteine fügst du nur einmal ein. Danach kannst du beliebig viele Buttons mit unterschiedlichen locationId-Werten auf deiner Seite verteilen – zum Beispiel je einen pro Standort.

Parameter

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`

Häufige Fragen

Wo finde ich meine customerId und locationId?
Im Adminportal unter Standorte → Buchungslinks. Dort ist pro Standort der komplette Buchungslink hinterlegt – die beiden Werte liest du direkt aus der URL ab.

Wie ändere ich die Höhe des iframes?
Über das Attribut height (z. B. height="800"). Passe den Wert an dein Layout an, damit die Buchungsstrecke ohne internes Scrollen sichtbar ist.

Kann ich mehrere Standorte einbinden?
Ja. Setze pro Standort einen eigenen iframe bzw. Button mit der jeweiligen locationId. Die drei Overlay-Bausteine brauchst du dabei nur einmal.

Wie öffne ich Gruppenkurse statt Einzeltermine?
Beim iframe den Pfad /courses statt /appointment-selection verwenden. Beim Overlay den zweiten Button-Wert auf 1 setzen (insertOnlineBookerOverlay(8, 1)).

Wie schliesst sich das Overlay?
Über den Button „Schliessen", einen Klick auf den dunklen Hintergrund oder die Esc-Taste.

Produkthilfe