Composant Web

Le composant Web vous permet d'afficher un contenu ou une page web dans votre application via une webview/iframe. Au-delà d'un simple affichage, il est également possible de déclencher des événements et créer des actions en lien avec des actions de l'utilisateur sur le contenu web (quand il clique sur un bouton etc...).

Concrètement le composant Web vous permet de créer une application ou de l'enrichir à partir d'un contenu déjà disponible sur votre site web. Dès que vous actualisez ce contenu sur votre site web, il est automatiquement mis à jour dans l'application. Par contre, une connexion Internet est requise pour afficher ce contenu.

Intégration d'un blog dans une application mobile

Dans cet article

Afficher une page web

Le composant Web vous permet d'intégrer une iframe/webview au sein de votre application. Le contenu s'affiche directement au sein de votre page, l'utilisateur n'a pas besoin de sortir de l'application (contrairement à l'action Ouvrir une URL qui ouvre automatiquement un navigateur web). 

Vous pouvez par exemple insérer une page de votre site internet (par exemple une liste d'articles ou un formulaire d'authentification). 

Pour afficher un contenu web, cliquez sur Composants et choisissez le composant Web

Dans la fenêtre Propriétés, cliquez sur En ligne et tapez l'URL. Le site doit être sécurisé et l'URL doit débuter par https. Attention néanmoins certains sites bloquent l'accès iframe. Si le contenu de la page web ne s'affiche pas, il est possible que ce site en bloque l'accès. 

Créer une vue mobile de votre page web

Quand vous insérez une page ou un contenu web dans une application mobile, il est souvent nécessaire de supprimer les éléments de navigation de votre site web pour ne pas perturber la navigation au sein de l'application. Si vous avez un site Wordpress ou autre CMS, il vous suffit de dupliquer la page et de supprimer le header et le footer. Publiez cette vue mobile et utilisez cette URL spécifique dans votre composant Web.

Interagir avec un contenu web

Au-delà de simplement afficher une page ou un contenu web, le composant Web vous permet d'interagir avec ce contenu grâce à la librairie Javascript PandaBridge. Par exemple, si votre formulaire de connexion s'affiche depuis un site web, il est intéressant de savoir si l'utilisateur s'est connecté pour le rediriger automatiquement vers le écran de votre application. 

Pour envoyer ou recevoir des événements entre un contenu web et votre application, vous avez besoin de créer des marqueurs. 

Créer un marqueur

Un marqueur permet de déclencher un événement ou de faire l'objet d'une action, pour personnaliser votre parcours utilisateur. Vous pouvez créer autant de marqueurs que vous voulez.

Sélectionnez votre composant Web et cliquez sur le bouton Editer. Dans la fenêtre d'Edition sur la gauche, cliquez sur + Ajouter marqueur. Un identifiant est automatiquement généré : notez précieusement cet identifiant pour le réutiliser du côté de votre site web et effectuer la bonne connexion. 

marqueurs_composant_web.png

Dans PandaSuite Studio, ce marqueur est disponible sous la forme d'un déclencheur dans la fenêtre  Actions du composant Web. Vous pouvez également agir sur ce marqueur depuis l'action Agir sur un composant

c9aa214418d2dd8cbba2ab456015bcfa.png

Déclencher ce marqueur depuis une page web 

Rendez-vous au niveau de l'administration de votre page web, depuis votre CMS (Wordpress, Shopify...) ou le code.

Vous avez plusieurs possibilités pour faire appel à la librairie PandaBridge et déclencher le marqueur :

En insérant la librairie Javascript

Insérez le code suivant dans votre page web pour faire appel à la librairie : 

<script src="https://cdn.jsdelivr.net/npm/pandasuite-bridge@4.2.3/lib/pandasuite-bridge.min.js"></script>

Utilisez la syntaxe suivante pour envoyer le marqueur : 

PandaBridge.send('marker8622')

Vous pouvez aussi passer des paramètres pour les utiliser ensuite dans vos actions (par exemple) : 

PandaBridge.send('marker8622', [{ url: "https://pandasuite.com" }]);

Ou en utilisant une URL 

Si vous n'avez pas accès au code de la page web, vous pouvez également utiliser l'URL suivante pour automatiquement déclencher le marqueur. Vous pouvez associer cette URL à un bouton ou bien à une action de redirection. 

https://pandasuite.com/bridge/send?name=marker8622

Associer une action à un marqueur web 

Une fois que le marqueur a été configuré depuis votre page web et votre application, il vous reste plus qu'à créer l'action.

Sélectionnez votre composant Web et cliquez sur Actions. Choisissez votre marqueur comme déclencheur et l'action de votre choix, par exemple :  Aller à l'écran suivant.

de_clencheur_marqueur_web.png

Recevoir un marqueur dans une page web

Il est également possible de recevoir un marqueur défini dans PandaSuite Studio.

Par exemple, si vous souhaitez créer une navigation native depuis l'application et rediriger au clic vers différents contenus web.

Utilisez la fonction suivante :

PandaBridge.setSnapshotData(function (pandaData) {
  // pandaData.data.id
});

Insérer un fichier ZIP

Au sein du composant Web, vous pouvez également insérer un fichier ZIP. C'est la manière d'insérer dans votre application votre propre code, une animation ou tout export web d'un autre outil (Powerpoint,...).

Dans la fenêtre Propriétés, choisissez Hors ligne (local) et insérez votre fichier zip.

Préparation du fichier ZIP

Pour être lisibles, vos fichiers doivent se trouver à la racine de votre fichier pour être directement accessibles dès leur extraction. Ne groupez pas vos fichiers dans un dossier avant de les compresser en .ZIP (voir exemple ci-dessous).

exemple fichier zip

Si vous souhaitez aller plus loin et créer une communication entre le fichier ZIP (envoyer & recevoir des informations), veuillez vous référer à l'article sur le composant personnalisé .

 Astuce : puisque ce contenu est en ligne, votre utilisateur doit être connecté à Internet pour le visualiser. A l'aide des déclencheurs Connecté (en ligne) / Déconnecté (hors ligne), vous pouvez envoyer une notification aux utilisateurs hors ligne.

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous