Web

Le composant Web permet d’intégrer du contenu web directement au sein de votre application, que ce soit via une URL en ligne ou en incorporant du code HTML/CSS/JavaScript personnalisé.

Cette flexibilité vous offre la possibilité d’enrichir votre application avec des fonctionnalités web sans que l’utilisateur ait à quitter l’environnement de l’application.

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…).

Cas d’utilisation du composant

Le composant Web est idéal pour intégrer des contenus web interactifs et dynamiques dans votre application. Voici quelques cas d’usage :

• Convertir un site web en application mobile et desktop : si vous possédez déjà un site web, vous pouvez l’intégrer directement dans une application en utilisant le composant Web. Cette approche est expliquée en détail dans notre article : Convertir un site web en application.

• Affichage de tableaux de bord dynamiques : intégration de dashboards de Google Data Studio, Power BI, ou d’autres solutions de reporting en ligne.

• Intégration de jeux HTML5 : si vous développez des jeux en HTML5, ils peuvent être directement intégrés et jouables dans votre application.

• Intégration d’un formulaire d’authentification : issu de votre site web

Modes d’intégration de votre contenu web

Vous pouvez intégrer du contenu web sous plusieurs méthodes :

• Utilisation d’une page web en ligne (URL) : vous pouvez afficher une page web en spécifiant simplement son URL. Assurez-vous que le site est sécurisé (HTTPS) et autorise l’affichage en iframe.

• Insertion de code HTML/CSS/JavaScript : il est possible d’intégrer directement votre propre code en important un fichier ZIP contenant votre contenu web. Cette méthode est idéale pour des animations personnalisées ou des fonctionnalités spécifiques.

Considération technique selon la plateforme

En fonction du format de votre projet (web, mobile…), le composant fait appel à un mode d’intégration approprié :

• Pour une web app : le contenu est affiché à l’aide d’une iframe, permettant d’incorporer une page web externe directement dans votre application.

• Sur iOS et Android : le contenu est rendu via une webview native, assurant une intégration fluide et optimisée pour les appareils mobiles.

Mise en place du composant Web

Ajout du composant Web

Dans PandaSuite Studio, ouvrez votre projet.

Dans l’onglet Composants, recherchez Web et faites glisser le composant dans votre interface.

Paramétrage du contenu

Affichage d’une page web en ligne (URL)

Dans les propriétés du composant Web, sélectionnez Mode : En ligne.

Entrez l’URL de la page que vous souhaitez afficher.

Assurez-vous que l’URL commence par https://.

Double-cliquez sur le composant pour tester l’affichage et prévisualisez votre projet.

Intégration d’un fichier HTML/CSS/JavaScript en local

Dans les propriétés du composant Web, sélectionnez Mode : Hors ligne.

Cliquez sur Importer un fichier ZIP.

Ajoutez votre fichier ZIP contenant tous les fichiers HTML, CSS et JavaScript.

Veillez à ce que le fichier index.html soit placé à la racine du dossier ZIP.

Actions interactives

Déclencher une action si l’appareil est connecté ou non

Si votre contenu est en ligne, votre utilisateur doit être connecté à Internet pour le visualiser.

A l’aide des déclencheurs Déconnecté (hors ligne), vous pouvez afficher une notification aux utilisateurs hors ligne.

Interagir avec un contenu web

Le composant Web permet de créer des interactions avancées entre l’application et le contenu web grâce à la librairie PandaBridge. Par exemple, vous pouvez envoyer des messages entre votre application et le code HTML intégré.

Par exemple, si vous intégrez votre formulaire de connexion 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, créez 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.

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 :

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/[email protected]/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.

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) {
});