Bubble.io | Plugin ProAbono - How to include the customer portal ?
Introduction
Section titled “Introduction”The Customer Portal is a standalone application consisting of a set of interconnected web pages that you can integrate into your website to provide your users with all the information and actions related to their subscription.
In our use case, we will see how to add this customer portal to our Bubble application.
You have two installation options:
-
Using an Iframe
-
Using a JS widget (This will add a “Subscribe” button to allow logged-in users to subscribe)
Prerequisites
Section titled “Prerequisites”-
Have created at least one offer in ProAbono.
-
Have a customer who has already subscribed to an offer.
-
Have correctly installed and configured the ProAbono plugin in Bubble (more info here).
-
Have a user management system, including a sign-up page and a login page.
Procedure
Section titled “Procedure”From the “Design” section in the “Visual elements” sub-menu, you will find in addition to the basic elements those added by the Proabono plugin (prefixed by PA).
Option 1: Add the Customer Portal via an Iframe
Section titled “Option 1: Add the Customer Portal via an Iframe”1.1 Select the Page or Add the Iframe
Section titled “1.1 Select the Page or Add the Iframe”- From the dropdown list at the top left, select the page where you want to integrate the customer portal.
1.2 Add the Visual Element
Section titled “1.2 Add the Visual Element”-
Click on the main tab “Design” (left menu)
-
From the sub-menu “Visual elements”, select the element “PA: Customer Portal by Iframe”
-
Drag and drop it onto the selected page.
1.3 Add a Workflow
Section titled “1.3 Add a Workflow”From the “Workflow” tab in the main menu:
-
Click on “Click here to add an event”.
-
From the context menu that just opened, click on “General” and then on “Page is loaded”.
Once this action is done, a bar for adding steps appears.
1.4 Add the action to retrieve the URL associated with the logged-in user
Section titled “1.4 Add the action to retrieve the URL associated with the logged-in user”-
Click on the button “Click here to add an action”.
-
Click on the section “Plugin” and then on the action “PA: Get Customer Hosted page”.
1.5 Add the action to refresh the data
Section titled “1.5 Add the action to refresh the data”-
In the same workflow, click on the button “Click here to add an action”.
-
Click on the section “Element Action” and then on the action “Refresh Customer Portal Iframe”.
-
In the “url” field, enter the information from the previous step: “Result of Step 1 (PA: Get Customer Hosted page) > url”.
Option 2: Add the Customer Portal via the Widget
Section titled “Option 2: Add the Customer Portal via the Widget”2.1 Select the Page or Add the Widget
Section titled “2.1 Select the Page or Add the Widget”- From the dropdown list at the top left, select the page where you want to integrate the widget.
2.2 Add the Visual Element to the Page
Section titled “2.2 Add the Visual Element to the Page”-
Click on the element “PA: Customer Portal by Widget”.
-
Drag and drop it onto the selected page.