Bubble.io | Comment mettre en place la souscription en self service ?
Introduction
Section titled “Introduction”Dans ce cas d’usage, nous allons afficher aux utilisateurs la page dite de “Pricing“ lui présentant les différentes offres d’accès au service.
Le but et présenter l’éventail des options qui s’offrent à lui et de le laisser choisir l’offre qui correspond à son besoin et surtout de souscrire directement en ligne.
Prérequis
Section titled “Prérequis”- Avoir au moins une offre de créer dans ProAbono (plus d’infos ici).
- Avoir correctement installer et configurer le plugin ProAbono dans (plus d’infos ici).
- Avoir un système de gestion d’utilisateurs, et donc une page de création de compte ainsi qu’une page une page de login.
Procédure
Section titled “Procédure”Étape 1 : Configurer votre segment dans le BO ProAbono
Section titled “Étape 1 : Configurer votre segment dans le BO ProAbono”Rendez-vous dans la section “Paramètres“ du BackOffice ProAbono.
- Cliquer sur le sous-menu correspondant à votre business (“Logo”).
- Cliquer sur “Paramètre segment“
- Si vous avez plusieurs segments : cliquez sur le segment de votre choix (optionnel).
- Cliquer sur “Site web” et renseigner le nom de domaine (_ex : “_myapp.bubbleaaps.io).
- Cliquer sur “Page d’inscription” et renseigner le lien vers la page de création de compte (ex : “myapp.bubbleaaps.io/signup“).
- Cliquer sur “Page de connexion” et renseigner le lien vers la page de login (ex : “myapp.bubbleaaps.io/login“).
Étape 2 : Ajout l’élément visuel sur la page de “Pricing”
Section titled “Étape 2 : Ajout l’élément visuel sur la page de “Pricing””2.1 Sélectionner la page ou ajouter l’IFrame
Section titled “2.1 Sélectionner la page ou ajouter l’IFrame”2.1 Ajouter l’élément visuel
Section titled “2.1 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: Pricing page by Iframe“
- Glisser/Déposez-le sur la page sélectionnée.
2.3 Ajouter un workflow
Section titled “2.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, cliquez 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é
Section titled “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”.
- Dans le champ “hosted_page“ qui est une liste déroulante, sélectionnez “collection-offers“
1.5 Ajouter l’action permettant de rafraichir les données
Section titled “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 « Plugin » puis sur l’action “Refresh Pricing page Iframe”.
- Dans le champ « URL » renseigner les informations issues de l’étape précédente : “_Result of Step 1 (PA: Get Customer Hosted page) > ur_l”.