Bubble.io | Plugin ProAbono – How to include the customer portal ? – Assistance & Documentation

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

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

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

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

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

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

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

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“.

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

Click on the element “PA: Customer Portal by Widget“.
Drag and drop it onto the selected page.

Developer Area