Cenplex Booking Web

Intégrer Cenplex Booking à votre site Internet

Vous pouvez intégrer Cenplex Booking directement à votre propre site Internet afin que vos clientes et clients puissent prendre rendez-vous sans quitter la page. Deux options sont possibles :

Sous forme d’iframe : la prise de rendez-vous est intégrée directement dans une page et immédiatement visible. Idéal pour une sous-page dédiée, par exemple « Prendre rendez-vous ».
Sous forme d’overlay : un bouton ouvre la prise de rendez-vous dans une fenêtre pop-up par-dessus votre page. Idéal si la prise de rendez-vous ne doit pas être visible en permanence.

> Vous trouverez ici, en complément de cette documentation, un guide clair et pratique.

Simple lien au lieu d’une intégration ? Si vous ne souhaitez pas intégrer la prise de rendez-vous, mais seulement créer un lien vers celle-ci, vous trouverez les liens directs prêts à l’emploi dans le portail d’administration sous Emplacements → Liens de réservation. Copiez le lien et ajoutez-le à votre site Internet comme bouton ou point de menu classique.

Pour commencer

Avant de commencer : vos ID

Chaque lien de réservation contient deux valeurs que vous trouverez dans le portail d’administration sous Emplacements → Liens de réservation :

customerId : votre numéro client Cenplex. Il est identique pour toutes vos prises de rendez-vous.
locationId : l’emplacement concerné. Chaque emplacement possède sa propre valeur.

Le chemin définit en outre ce qui est ouvert :

/appointment-selection → prise de rendez-vous individuelle
/courses → cours en groupe

Dans tous les exemples de code ci-dessous, les valeurs de démonstration customerId=5 et locationId=8 sont utilisées. Remplacez-les par vos propres valeurs depuis le portail d’administration.

Integration sous forme d'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.

Ajoutez le code suivant à l’endroit de votre page où la prise de rendez-vous doit apparaître :

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

À adapter dans le code :

Remplacez customerId et locationId par vos propres valeurs.
Pour les cours en groupe, remplacez le chemin /appointment-selection par /courses.
Adaptez la hauteur à votre mise en page via height="800" : 800 pixels constituent un bon point de départ.

Intégration sous forme d’overlay

Avec l’overlay, un bouton ouvre la prise de rendez-vous dans une fenêtre pop-up. Pour cela, vous intégrez trois éléments une seule fois à votre page, puis vous placez autant de boutons que souhaité.

Étape 1 : insérer les styles

Insérez ce CSS dans le <head> de votre page :

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

Étape 2 : insérer le conteneur de l’overlay

Insérez cette structure de base directement avant la balise de fermeture </body> :

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

Étape 3 : insérer le script

Insérez également ce script directement avant </body>. Remplacez customerId=5 par votre propre numéro client :

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

Étape 4 : placer le bouton

Vous pouvez maintenant insérer un bouton à l’endroit souhaité dans le contenu. La première valeur correspond à la locationId, la deuxième définit s’il s’agit d’un rendez-vous (0) ou de cours en groupe (1) :

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

<!-- Ouvrir les cours en groupe (isGroup = 1) -->
<button onclick="insertOnlineBookerOverlay(8, 1)">Cours en groupe</button>

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, avec différentes valeurs locationId – par exemple un bouton par emplacement.

Paramètres

Valeur	Signification	Exemple
`customerId`	Votre numéro client Cenplex – identique pour toutes les prises de rendez-vous.	`5`
`locationId`	L’emplacement concerné. Chaque emplacement dispose de sa propre valeur.	`8`, `69`, `143`
`/appointment-selection`	Chemin pour la prise de rendez-vous individuelle.	`isGroup = 0`
`/courses`	Chemin pour les cours en groupe.	`isGroup = 1`

Questions fréquentes

Où trouver mon customerId et mon locationId ?
Dans le portail d’administration, sous Emplacements → Liens de réservation. Le lien complet est enregistré pour chaque emplacement. Vous pouvez lire les deux valeurs directement dans l’URL.

Comment modifier la hauteur de l’iframe ?
Avec l’attribut height, par exemple height="800". Adaptez la valeur à votre mise en page afin que le parcours de prise de rendez-vous soit visible sans défilement interne.

Puis-je intégrer plusieurs emplacements ?
Oui. Utilisez un iframe ou un bouton par emplacement, avec la locationId correspondante. Les trois éléments de l’overlay ne doivent être intégrés qu’une seule fois.

Comment ouvrir les cours en groupe au lieu des rendez-vous individuels ?
Pour l’iframe, utilisez le chemin /courses au lieu de /appointment-selection. Pour l’overlay, définissez la deuxième valeur du bouton sur 1 (insertOnlineBookerOverlay(8, 1)).

Comment fermer l’overlay ?
Avec le bouton « Fermer », en cliquant sur le fond sombre ou avec la touche Esc.

Produkthilfe