Intégration borne (pour les développeurs)

Ce guide explique les aspects techniques du maintien d'OmniLab dans une coque borne ou une application wrapper. Utilisez-le avec les articles d'intégration publics lorsque votre équipe contrôle la page hôte, le conteneur WebView ou l'environnement d'exécution de l'appareil autour d'OmniLab.

Choisir le bon modèle de wrapper

Utiliser des URLs prêtes pour l'intégration

Partez des mêmes URLs OmniLab documentées dans les guides d'intégration publics :

• page d'accueil de campagne lorsque le wrapper doit afficher plusieurs expériences
• URL directe de point de contact lorsque le wrapper doit lancer immédiatement une expérience
• embedded=1 lorsque vous utilisez un chemin d'intégration iframe manuel ou WebView

Messages parent-enfant à prendre en charge

OmniLab peut envoyer des événements postMessage au wrapper parent. Le plus important pour la plupart des bornes est le redimensionnement.

<script>
  window.addEventListener("message", (event) => {
    console.log("Message OmniLab", event.origin, event.data);

    if (event.data?.type === "resize" && event.data?.target === "body") {
      const iframe = document.getElementById("omnilab-embed");
      if (iframe && typeof event.data?.data?.height === "number") {
        iframe.style.height = event.data.data.height + "px";
      }
    }
  });
</script>

Dans des coques iframe plus avancées, OmniLab peut aussi émettre des messages liés aux modales comme open-modal et close-modal. Si votre wrapper doit participer à ce layout, validez le flux exact des messages en staging avec OmniLab avant de livrer.

Pattern JavaScript player

Lorsqu'une seule page borne doit charger différentes campagnes, utilisez le tag player OmniLab avec un paramètre de requête tel que id.

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

Responsabilités de l'hôte hors d'OmniLab

Votre wrapper doit prendre en charge :

• les permissions au niveau de l'appareil pour la caméra, le microphone et la géolocalisation
• les minuteurs d'inactivité et le comportement d'écran d'accueil de la borne
• le matériel de scan ou les périphériques externes
• le passage de session entre votre coque et OmniLab
• la journalisation et les diagnostics de support à distance pour le conteneur lui-même

Checklist de debug

• Confirmez que le wrapper charge la bonne URL de campagne ou de point de contact.
• Vérifiez que l'iframe ou la WebView peut recevoir la caméra et les autres permissions requises.
• Contrôlez que les événements postMessage d'OmniLab atteignent la coque parente.
• Testez les tiroirs, claviers et flux de modales dans le vrai conteneur borne, pas seulement dans un onglet de navigateur autonome.
• Journalisez les messages OmniLab bruts pendant le staging pour comparer rapidement le comportement attendu et le comportement réel.

Patterns d'URL et paramètres de requête pour borne

Les déploiements borne utilisent généralement l'un de ces patterns d'URL. Incluez toujours embedded=1 lors du chargement dans un iframe ou une WebView.

Pour les déploiements utilisant le tag JavaScript player, l'URL de la page hôte contrôle quelle campagne se charge :

• https://kiosk.example.com/?id=summer-campaign
• https://kiosk.example.com/?id=summer-campaign%3Fc%3D<touchpoint-id>%26embedded%3D1

Encodez toute query string imbriquée avant de publier le lien vers le tag player.

Pour aller plus loin