Intégration par iframe

Utilisez cet article lorsque OmniLab doit apparaître dans une page web existante au lieu de s'ouvrir comme une destination plein écran indépendante. Vous pouvez soit coller un iframe direct, soit utiliser la balise JavaScript OmniLab pour injecter l'iframe de manière dynamique.

Choisir le bon modèle d'intégration web

Iframe manuel : utiliser une URL prête pour l'intégration

Utilisez la page d'accueil de campagne lorsque les visiteurs doivent choisir parmi plusieurs expériences. Utilisez une URL directe de point de contact lorsque les visiteurs doivent entrer immédiatement dans une expérience précise.

<iframe
  id="omnilab-embed"
  src="https://experience.example.com/<lien-public-de-la-campagne>?c=<touchpoint-id>&embedded=1"
  title="Campagne OmniLab"
  loading="lazy"
  allow="camera; microphone; geolocation"
  style="width:100%;min-height:900px;border:0;overflow:hidden"
></iframe>

Adaptez les permissions allow à l'expérience intégrée. Les autorisations caméra, microphone ou géolocalisation sont particulièrement importantes pour les parcours qui scannent, capturent du média ou utilisent la localisation.

Redimensionner automatiquement l'iframe

Les pages OmniLab intégrées peuvent envoyer des messages de redimensionnement à la page parente. Écoutez ces messages pour que la hauteur de l'iframe suive le contenu au lieu d'afficher une barre de défilement interne.

<script>
  window.addEventListener("message", (event) => {
    const data = event.data;

    if (data?.type !== "resize" || data?.target !== "body") return;

    const iframe = document.querySelector("#omnilab-embed");
    if (iframe && typeof data?.data?.height === "number") {
      iframe.style.height = data.data.height + "px";
    }
  });
</script>

Balise JavaScript : utiliser une page hôte réutilisable

Utilisez la balise JavaScript OmniLab lorsque la même page hôte doit charger différentes campagnes ou différents points de contact selon l'URL courante. La balise injecte l'iframe dans un conteneur cible et lit le chemin de campagne depuis un paramètre de page.

Si votre déploiement inclut une URL de script précise, utilisez cette URL exacte. L'exemple ci-dessous garde volontairement l'hôte du script générique.

<div id="omnilab-container"></div>

<script>
  (function (b, o, n, u, s) {
    var a, t;
    a = b.createElement(u);
    a.async = 1;
    a.src = s;
    t = b.getElementsByTagName(u)[0];
    t.parentNode.insertBefore(a, t);
    o[n] = o[n] || [];
  })(document, window, "_om_async", "script", "https://<omnilab-script-host>/omplayer.js");

  _om_async.push([
    "init",
    {
      domain: "experience.example.com",
      targetId: "omnilab-container",
      queryParam: "id",
    },
  ]);
</script>

Avec cette configuration, l'URL de la page hôte peut choisir le chemin OmniLab à charger :

• Campagne simple : https://www.example.com/promo?id=summer-campaign
• Point de contact direct avec paramètres supplémentaires : https://www.example.com/promo?id=summer-campaign%3Fc%3D<touchpoint-id>%26embedded%3D1%26utm_source%3Dnewsletter

La valeur passée dans id doit contenir le chemin situé après le domaine OmniLab. Si vous y ajoutez sa propre query string, encodez cette valeur avant de publier le lien.

Notes de diffusion

• Laissez l'iframe occuper toute la largeur disponible au lieu de la bloquer sur une largeur desktop étroite.
• Démarrez avec une hauteur minimale généreuse, puis laissez l'écouteur de redimensionnement ajuster la hauteur finale.
• Testez les étapes de connexion, les permissions caméra, les redirections et la mise en page mobile directement dans la vraie page hôte, pas seulement dans un onglet OmniLab autonome.
• Si la page hôte utilise des en-têtes sticky ou des conteneurs contraints, testez les points de contact qui ouvrent des tiroirs, des formulaires, des claviers ou des demandes caméra.

Pour aller plus loin