Bubble.io | How to set up self-service subscription?
Introduction
Section titled “Introduction”In this use case, we will display the ‘Pricing’ page to users, which presents the different subscription options available for accessing the service.
The goal is to present the range of options available to the user and allow them to choose the subscription that suits their needs and subscribe online.
Prerequisites
Section titled “Prerequisites”- Have at least one offer created in ProAbono (more information here).
- Have the ProAbono plugin correctly installed and configured (more information here).
- Have a user management system, including a signup page and a login page.
Procedure
Section titled “Procedure”Step 1: Configure your segment in the ProAbono BackOffice
Section titled “Step 1: Configure your segment in the ProAbono BackOffice”Go to the ‘Settings’ section of the ProAbono BackOffice.
- Click on the submenu corresponding to your business (‘Logo’).
- Click on ‘Segment Settings’.
- If you have multiple segments: Click on the segment of your choice (optional).
- Click on ‘Website’ and enter the domain name (ex: ‘myapp.bubbleapps.io’).
- Click on ‘Signup Page’ and enter the link to the signup page (ex: ‘myapp.bubbleapps.io/signup’).
- Click on ‘Login Page’ and enter the link to the login page (ex: ‘myapp.bubbleapps.io/login’).
Step 2: Add the Visual Element to the ‘Pricing’ page
Section titled “Step 2: Add the Visual Element to the ‘Pricing’ page”2.1 Select the page or add the Iframe
Section titled “2.1 Select the page or add the Iframe”2.1 Add the visual element
Section titled “2.1 Add the visual element”- Click on the main tab ‘Design’ (left menu).
- From the sub-menu ‘Visual elements’, select the element ‘PA: Pricing page by Iframe’.
- Drag and drop it onto the selected page.
2.3 Add a Workflow
Section titled “2.3 Add a Workflow”From the ‘Workflow’ tab in the main menu:
- Click on “Click here to add an event”.
- From the opened context menu, click on “General” and then on “Page is loaded”.
Once this action is done, a bar for adding steps will appear.
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”.
- In the ‘hosted_page’ field, which is a dropdown list, select ‘collection-offers’.
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 “Plugin” and then on the action “Refresh Pricing page Iframe”.
- In the ‘url’ field, enter the information from the previous step: “Result of Step 1 (PA: Get Customer Hosted page) > url”.