Intégration borne (approfondissement technique)

Ce guide s'adresse aux équipes qui doivent afficher une expérience OmniLab dans un conteneur contrôlé, par exemple une borne, une WebView mobile, ou une page hôte avec gestion de layout personnalisée.

Trois options fréquentes

• intégrer une URL OmniLab dans un <iframe> classique
• utiliser le tag JavaScript player lorsqu'il est prévu pour votre intégration
• afficher l'expérience dans une WebView mobile ou un wrapper applicatif plus riche

Règle de base pour un rendu embarqué

Lorsque l'expérience est utilisée dans un wrapper, ajoutez le flag embedded=1 à l'URL OmniLab. Cela permet à l'expérience d'adapter son comportement à un contexte embarqué.

<iframe
  src="https://<experience-domain>/<touchpoint-or-page>?embedded=1"
  width="100%"
  height="900"
  style="border:0"
  allow="clipboard-write"
></iframe>

Messages postMessage utiles

Une expérience OmniLab embarquée peut communiquer avec son parent via postMessage pour certains besoins de layout et d'orchestration UI.

Messages utiles à connaître :

• resize avec une hauteur calculée pour aider le parent à redimensionner l'iframe
• open-modal
• close-modal
• ready-to-open-modal
• ready-to-close-modal

Exemple de message de resize :

{
  "type": "resize",
  "target": "body",
  "data": {
    "height": 1240
  }
}

Exemple côté page parente

window.addEventListener('message', (event) => {
  if (event.data?.type === 'resize' && event.data?.data?.height) {
    const iframe = document.querySelector('#omnilab-frame');
    if (iframe) iframe.style.height = `${event.data.data.height}px`;
  }
});

Recommandations pour une borne ou une WebView

• désactivez le zoom ou les gestures parasites si votre wrapper le permet
• prévoyez une gestion claire du retour arrière et de la fermeture de modal
• gardez les secrets et tokens côté backend ou couche native sécurisée
• testez les permissions périphériques et le cycle de vie réseau sur les appareils réels
• surveillez les timeouts et les pertes de connectivité si la borne est en réseau contraint

Pour aller plus loin