Exemples d'integration

Prise de rendez-vous en ligne sur votre site internet

Voici comment intégrer Cenplex Booking à votre site Internet : au choix sous forme d’overlay discret qui s’ouvre au clic, ou directement intégré sous forme d’iframe. Les exemples ci-dessous contiennent chacun un aperçu en direct ainsi que le code prêt à copier.

Variante A · Overlay Variante B · iframe Paramètres et ID

Variante A · Overlay

Un bouton ouvre Cenplex Booking dans une fenêtre pop-up élégante par-dessus votre page. Idéal si la prise de rendez-vous ne doit pas être visible en permanence.

Recommandé Bouton + code Compact

Variante B · iframe

La prise de rendez-vous est intégrée directement dans votre page et immédiatement visible. Idéal pour une sous-page dédiée, par exemple « Prendre rendez-vous ».

1 ligne de code Intégré Sans JavaScript

Intégrer l’overlay

L’overlay se compose de quatre éléments que vous intégrez une seule fois à votre page. Ensuite, un clic sur le bouton suffit.

Aperçu en direct

Overlay Cenplex Booking

Les exemples utilisent l’identifiant de démonstration customerId=5 avec trois emplacements. Pour votre site Internet, remplacez-le par vos propres ID (voir Parameter).

Emplacement · Hinterbergstrasse 15 (locationId 8)

Emplacement · Nebenstrasse 12b (locationId 69)

Emplacement · Demostrasse 1 (locationId 143)

Insérer les styles

Emplacement : dans <head>

CSS Styles de l'overlay

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

Insérer le conteneur de l'overlay

Emplacement : juste avant </body>

HTML Structure de l'overlay

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

Insérer le script

Emplacement : juste avant </body>

JS Ouvrir / fermer

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

Placer le bouton

Emplacement : dans le contenu (<body>)

HTML Bouton d'ouverture

<!-- Prendre rendez-vous (locationId = 8, isGroup = 0) -->
<button onclick="insertOnlineBookerOverlay(8, 0)">Prendre rendez-vous</button>

<!-- Cours collectifs (isGroup = 1) -->
<button onclick="insertOnlineBookerOverlay(8, 1)">Cours collectifs</button>

Astuce : les trois premiers éléments ne doivent être intégrés qu’une seule fois. Vous pouvez ensuite placer autant de boutons que souhaité sur votre page (étape 4), avec des valeurs locationId différentes.

Intégrer l'iframe

La variante la plus simple : une seule ligne HTML intègre la prise de rendez-vous directement dans votre page. Aucun JavaScript n’est nécessaire.

Aperçu en direct

Cenplex Booking dans une iframe

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

L'aperçu charge le module de réservation réel.

Insérer l'iframe

Emplacement : dans <body>, à l'endroit où la réservation doit apparaître

HTML Un seul bloc

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

Pour les cours en groupe, remplacez le chemin `/appointment-selection` par `/courses`. Adaptez la hauteur (`height`) à votre mise en page – 800 px constitue un bon point de départ.

Paramètres et ID

Ces valeurs déterminent quelle prise de rendez-vous est chargée. Vos ID personnels vous sont fournis par Cenplex.

Valeur	Signification	Exemple
`customerId`	Votre numéro client Cenplex – identique pour toutes les réservations.	`5`
`locationId`	L'emplacement concerné. Une valeur propre à chaque emplacement.	`8`, `69`, `143`
`/appointment-selection`	Chemin pour la prise de rendez-vous.	`isGroup = 0`
`/courses`	Chemin pour les cours collectifs.	`isGroup = 1`