Introduction
Le Portail Client est une application autonome composée d’un ensemble de pages web reliées, que vous allez pouvoir intégrer à votre site web afin de fournir à votre utilisateur toutes les informations et les actions liées à son abonnement.
Dans notre cas d’usage, nous allons voir comment ajouter ce portail client à notre application Bubble.
Vous avez deux choix possibles d’installation :
-
Par Iframe
-
Via un widget JS (Celui-ci ajoutera un bouton “S’abonner“ afin de permettre aux utilisateurs connectés de s’abonner)
Prérequis
-
Avoir au moins créer une offre dans ProAbono.
-
Avoir un client ayant déjà souscrit à une offre.
-
Avoir correctement installé et configuré le plugin ProAbono dans Bubble (plus d’infos ici).
-
Avoir un système de gestion d’utilisateurs, donc une page de création de compte ainsi qu’une page de login.
Procédure
Depuis la section “Design“ dans le sous menu “Visual elements“, vous trouverez en plus des éléments de base ceux ajoutés grâce au plugin Proabono (préfixé par PA).
Option 1 : Ajouter le portail client en IFrame
1.1 Sélectionner la page ou ajouter l’IFrame
-
Depuis la liste déroulante en haut à gauche, sélectionner la page ou vous voulez intégrer le portail client.
1.2 Ajouter l’élément visuel
-
Cliquer sur l’onglet principale “Design” (menu de gauche)
-
Depuis le sous menu “Visual elements“, sélectionner l’élément “PA: Customer Portal by Iframe”
-
Glisser/déposer sur la page sélectionnée.
1.3 Ajouter un workflow
Depuis l’onglet “workflow” du menu principal :
-
Cliquer sur “Click here to add an event“.
-
Depuis le menu contextuel qui vient de s’ouvrir, cliquer sur “General” puis sur “Page is loaded“.
Une fois cette action réalisée, une barre permettant d’ajouter des étapes (Steps) apparait.
1.4 Ajouter l’action permettant de récupérer l’URL associé à l’utilisateur connecté
-
Cliquer sur le bouton “Click here to add an action“.
-
Cliquer sur la section “Plugin” puis sur l’action “PA: Get Customer Hosted page”.
1.5 Ajouter l’action permettant de rafraichir les données
-
Dans le même workflow, cliquez sur le bouton “Click here to add an action“.
-
Cliquer sur la section “Element Action” puis sur l’action “Refresh Customer Portal Iframe”.
-
Dans le champ “url”, renseigner les informations issues de l’étape précédente : “Result of Step 1 (PA: Get Customer Hosted page) > url”.
Option 2 : Ajouter le portail client via le Widget
2.1 Sélectionner la page ou ajouter le widget
-
Depuis la liste déroulante en haut à gauche, sélectionner la page ou vous voulez intégrer le widget.
2.2 Ajouter l’élément visuel sur la page
-
Cliquer sur l’élément “PA: Customer Portal by Widget”.
-
Glisser/déposer sur la page sélectionnée.