Intégration WebView
Intégrer OmniLab dans une application mobile ou un wrapper contrôlé avec un WebView moderne.
Utilisez l'intégration WebView lorsque OmniLab doit rester à l'intérieur d'une application native, d'une borne, ou d'un wrapper contrôlé, plutôt que de s'ouvrir dans le navigateur de l'appareil.
Quand utiliser un WebView
Les WebViews conviennent bien lorsque :
- une application fidélité, retail ou événementielle doit garder le participant dans l'application
- une borne ou une application wrapper doit contrôler tout ce qui entoure l'expérience OmniLab
- la page OmniLab doit apparaître dans un parcours de navigation natif
Exigences techniques
| Exigence | Attendu |
|---|---|
| Moteur de rendu | Utiliser un moteur WebView récent équivalent à un runtime Chrome ou Chromium moderne |
| JavaScript | Activé |
| Messagerie parent-enfant | Support de postMessage disponible si l'application hôte doit réagir aux événements OmniLab |
| Mise en page | Conteneur plein écran ou bord à bord recommandé |
| Gestion tactile | Les événements tactiles et de scroll sont correctement transmis |
| Permissions appareil | Les permissions caméra, microphone ou géolocalisation sont accordées lorsque l'expérience en a besoin |
Vous utilisez un wrapper de type borne ?
Si le wrapper gère aussi des scanners, des flux d'inactivité, ou des écrans d'accueil de borne, lisez également la section Borne. Les intégrations borne ajoutent des exigences opérationnelles et matérielles au-delà d'un WebView standard.
Exemple React Native
Installez le package :
npm install react-native-webviewPuis chargez la page OmniLab dans un WebView :
import React from "react";
import { WebView } from "react-native-webview";
export default function OmniLabWebView() {
return (
<WebView
source={{
uri: "https://experience.example.com/<lien-public-de-la-campagne>?c=<touchpoint-id>&embedded=1",
}}
style={{ flex: 1 }}
javaScriptEnabled
/>
);
}Utilisez une URL de page d'accueil de campagne lorsque l'application doit afficher plusieurs expériences, ou une URL directe de point de contact lorsqu'elle doit lancer immédiatement une expérience précise.
Conseils pour iOS natif et Android natif
- Utilisez le composant
WebViewstandard de la plateforme, ou un wrapper équivalent. - Activez JavaScript.
- Vérifiez que les permissions caméra, microphone, géolocalisation et fichiers sont bien transmises lorsque nécessaire.
- Testez le comportement du clavier virtuel si l'expérience contient des formulaires ou une étape de connexion.
- Si votre application doit réagir à des messages parent-enfant, confirmez que le bridge du WebView prend bien en charge
postMessage.
Checklist de test
- L'URL de campagne ou de point de contact se charge correctement dans l'application
- La connexion, les cookies et les redirections se comportent comme prévu dans le WebView
- Les demandes caméra, microphone, géolocalisation et clavier apparaissent correctement
- Les modes portrait et paysage restent acceptables sur les appareils cibles
- La perte réseau, le passage en arrière-plan et la reprise de l'application ne cassent pas le parcours participant