Intégrer la page de réservation dans votre site web

Dans Univents, votre page de réservation fonctionne comme une page publique autonome. Vous pouvez aussi l’intégrer directement dans votre site web existant, par exemple sur une sous-page dédiée au traiteur, aux événements ou aux dégustations. Univents génère pour vous le code iFrame nécessaire, vous n’avez rien à écrire vous-même.

Ce dont vous avez besoin au préalable

Pour intégrer une page, il faut d’abord qu’elle existe. Si vous n’en avez pas encore, créez-la en premier. Ouvrez pour cela la vue d’ensemble de vos pages de réservation et cliquez en haut à droite sur Nouvelle page de réservation. Vous y saisissez un nom, choisissez un design (Webshop, Demande ou Stepper) ainsi que les produits et les lieux réservables, puis vous définissez les questions auxquelles vos clients doivent répondre.

Pour que la page intégrée soit visible de vos clients, elle doit être active. Dans la vue d’ensemble, vous le voyez au badge de statut à côté du nom : Live signifie publiée, Brouillon signifie pas encore visible. Cliquez sur le badge pour passer d’un état à l’autre. Une page en mode brouillon ne s’affiche pas dans l’iFrame.

Récupérer le code d’intégration

Vous trouvez le code d’intégration directement dans la vue d’ensemble des pages de réservation. Chaque page y dispose, sur le bord droit, d’une série d’icônes d’action.

1. Ouvrez la vue d’ensemble de vos pages de réservation.
2. Repérez la ligne de la page de réservation souhaitée.
3. Cliquez à droite sur l’icône de code avec l’info-bulle Copier le code d'intégration.
4. Univents copie le code iFrame prêt à l’emploi dans votre presse-papiers et confirme avec le message Code d'intégration copié.

Le code copié ressemble à ceci :

<iframe
  src="https://univents.app/embed/dein-workspace/deine-seite"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

Si vous n’avez besoin que du lien direct et non du code iFrame, utilisez plutôt l’icône avec l’info-bulle Copier le lien de réservation.

Insérer le code dans votre site web

Il ne reste qu’à coller le code copié à l’endroit de votre site où la page de réservation doit apparaître.

1. Dans votre outil de création de site, ouvrez la page sur laquelle la réservation doit apparaître.
2. Ajoutez un élément pour du code HTML personnalisé. Dans WordPress, ce bloc s’appelle souvent « HTML personnalisé » ; dans d’autres systèmes, « Code », « Intégrer » ou « HTML ».
3. Collez le code iFrame copié dans cet élément.
4. Enregistrez et publiez la page.

La largeur est définie dans le code sur width="100%" : la page de réservation s’adapte donc automatiquement à la zone de contenu. min-height:700px définit la hauteur minimale. Si votre page de réservation est longue et semble coupée en bas, augmentez cette valeur.

Pour les développeurs : ajuster la hauteur automatiquement plutôt que de la fixer

La valeur fixe min-height:700px du code d’intégration n’est qu’une hauteur minimale : si la place manque, la page de réservation est coupée en bas. Si vous avez vous-même accès au code de votre site (ou si votre prestataire web y a accès), vous pouvez à la place laisser la hauteur s’adapter automatiquement : la page intégrée envoie d’elle-même un message à la fenêtre parente à chaque changement de taille.

Un petit script sur votre site intercepte ce message et ajuste la hauteur de l’iFrame en direct :

<iframe
  id="univents-booking-iframe"
  src="https://univents.app/embed/dein-workspace/deine-seite"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

<script>
  window.addEventListener('message', function (event) {
    if (event.data && event.data.type === 'univents-embed-resize') {
      var iframe = document.getElementById('univents-booking-iframe');
      if (iframe) iframe.style.height = event.data.height + 'px';
    }
  });
</script>

Sans ce script, tout reste utilisable comme d’habitude : vous devrez simplement augmenter à la main la valeur fixe de min-height en cas de besoin (voir la FAQ ci-dessous).

Cookies dans la zone intégrée

La page de réservation intégrée n’affiche pas de bannière de cookies propre et ne dépose aucun cookie. C’est voulu : deux bannières l’une sur l’autre, la vôtre sur le site et une autre dans l’iFrame, ne feraient que dérouter vos visiteurs. Le recueil du consentement relève donc entièrement de votre propre site ; vous n’avez rien de supplémentaire à recueillir pour la page de réservation intégrée.

À l’inverse, lorsqu’une personne ouvre la page de réservation à sa propre adresse, donc sans intégration, Univents affiche sa propre bannière de cookies.

Tester et vérifier

Avant de mettre la page intégrée entre les mains de vos clients, vérifiez le résultat une fois.

1. Ouvrez la page de votre site sur laquelle vous avez ajouté le code.
2. Vérifiez que la page de réservation s’affiche en entier, sans être coupée.
3. Si vous souhaitez vérifier le comportement au préalable dans Univents, cliquez dans la vue d’ensemble sur l’icône avec l’info-bulle Ouvrir l'aperçu en direct pour voir la page dans un nouvel onglet.
4. Effectuez une demande test afin de vous assurer que la réservation vous parvient correctement.

Si vous souhaitez ensuite modifier le contenu, le design ou les questions, cliquez sur Configurer dans la ligne de la page de réservation. Les modifications apparaissent aussi automatiquement dans la version déjà intégrée, vous n’avez pas besoin de copier à nouveau le code iFrame.

Questions fréquentes

Dois-je copier à nouveau le code après chaque modification ? Non. L’iFrame affiche toujours l’état actuel de votre page de réservation. Les modifications de contenu effectuées via Configurer sont visibles immédiatement dans la version intégrée.

La page est coupée en bas, que faire ? Augmentez dans le code collé la valeur de min-height:700px, par exemple à 1000px. La page de réservation dispose ainsi de plus de place. Si vous avez accès au code du site, vous pouvez à la place laisser la hauteur s’adapter automatiquement : voir la section « Pour les développeurs » ci-dessus.

Rien ne s’affiche dans l’iFrame chez mes clients. Vérifiez que la page de réservation a le statut Live. Si elle est sur Brouillon, elle n’est pas affichée publiquement. Cliquez sur le badge de statut pour l’activer.

Où retrouver ce guide ? Dans la vue d’ensemble, chaque page dispose d’une icône en forme de livre avec l’info-bulle Ouvrir le guide d'intégration, qui vous mène directement ici.