Building a SaaS from a Standalone Bubble Application
This quickstart guide shows how you can create a dashboard based SaaS from a standalone Bubble Application
Introduction
This tutorial covers how to get started with developing a SaaS business using Bubble (a nocode tool) and SaaSBox (your SaaS storefront that handles landing page, login and payments)
This tutorial is aimed at non-programmers / non-technical builders who have some exposure to nocode tools and want to build a SaaS using Bubble.
SaaSBox handles everything essential for your SaaS in one package excluding the application logic.
Before we get started let's take a look at the architecture to understand how it all works. In this model where your Bubble screens are displayed as embeds, SaaSBox handles everything essential for your SaaS in one package except the application logic provided by your Bubble application.
The final solution looks as follows:
SaaSBox handles payments, user login and sharing user information with Bubble as well as an administrative dashboard for your service, landing page, and the application dashboard.
In this tutorial we will cover how all of the above can integrate with Bubble, and how the user and plan information can be shared with and processed by your Bubble application.
Learn the basics of Bubble, and how to create a SaaS in one tutorial (20 mins)
In this tutorial we are going to build a simple Bubble app that can be integrated with the SaaSBox dashboard, where the user and plan information is shared with the Bubble application. This would be a good starting point to build a dashboard based SaaS using Bubble.
This is also a good tutorial to understand the basics of Bubble, if you have never used it before.
Let's get started. Inside your Bubble home page, create a new Bubble app named Bubble SaaS Demo.
Once the application is created, select "Start with a blank page" on the left.
You will see a blank page. Let's first design our API call, to SaaSBox where we fetch the current user.
Part 1: Defining the API Call in Bubble
For this, select Plugins from the left menu. Click on "Add plugins". Search and find the "API connector", and install it as a plugin.
Inside the API Connector, select "Add another API". Name the API as "fetchUser". Select "HTTP Basic Authentication" from the right.
At this point we need information from our SaaSbox instance. Go to https://saasbox.net if you haven't signed up for a free plan, and create an application. From the admin panel, go to the section that says "Inbound API Keys".
Copy the application id, go back to "API connector" and paste it in the username field.
Next, copy the API key listed at the bottom. Paste it in the password field.
On API Connector, go down and click on "Add a shared header". Add:
content-type: application/json
Next, expand the API Call section at the bottom. Name the call as "fetchUser". Select "Use as action", make it a POST call, and add the API address: https://saasbox.net/api/userByOTC to get the user.
Skip adding any parameters. We will pass a "one time code" in the body of the call.
For the JSON body add OTC as an object field as shown. Click on "Initialize Call". Because we do not have a valid OTC, this call will fail.
Go back to SaaSBox, and click on "Go to App" in the bottom left of your dashboard. You will see the user dashboard area and a "one time code" number. Copy and paste that number, on your fetchUser API call, in the OTC field as shown on the screen. Make sure to add double quotes around the number.
Once you click "Initialize call", you will see various fields of a user object, such as its name, plan ID, plan name, limits and so on.
Click on save, and replace the number in the call back to OTC. Make sure, to uncheck the "private", option on the parameter.
We are now done setting up our API call, to fetch a user and his plan.
Since we now know this current user's data and subscription plan information, we can tailor the data we show to this user inside Bubble, specific to the user and their subscription.
Part 2: Designing the UI Elements
Drag and drop a text section from the left, label its appearance as "User Profile" styled as shown in the video.
Next drag and drop an image element and adjust it to be a square.
Drag and drop another text element. Name this element as "User name". Add a new custom state called "init". Choose the state type as text.
Drag another text element. This time name it as "User email". Add a new custom state called "init". Choose the state type text again.
The appearance should be set to "User email's init".
All text section's appearance must be set to that element's init state.
Next add another text element and name it as "User's is_admin". Repeat the same process as shown. The "is admin" element will tell us if this user is an admin of this SaaS or a regular user.
Next, add another text section called "User Plan" and style it as shown.
Let us also add a group element to group the profile elements. From the style menu choose a solid border style with 1 pixel width, and a light gray color.
Next let's add another text element, and name it "User plan", define an init state as before and set the appearance, to the "User plan's init state". This will tell us the current plan for the user such as "free", or "pro plan" and so on.
Next we will add another text element, but use it in a different way. Drag and drop a text element right below the image element.
If you don't see the image element, it might be hidden behind the group object we added earlier. Arrange the group object to be sent to the back, from the top menu.
Name it as, "Profile picture url".
Define the init state of type text, as usual.
Instead of setting the appearance of it to the init state, make this text element invisible.
We will use this text element's state from the Image element shortly.
Now if you check the error above, we have 1 issue displayed in red. We have not filled out the image source.
Go ahead and select the image element and its properties. For the dynamic image field, select "insert dynamic data", and select "Profile picture URL's init state" from the menu.
We are now done setting up the basic settings for our user profile UI. We will look into adding minor style touch ups later.
Part 3: Designing the Workflow to set Application State
Let's now go to the "Workflow" tab to set up binding the user data. Here, we will learn how to populate the user profile UI, using the results from the "fetchUser" call we defined earlier.
Click on the box that says "add an event" as shown.
Select "Page is loaded" event.
Select "Add an action". Then from the popup, select plugins, fetch user.
When "fetch user" is selected, configure the "body" OTC parameter. Click on "Insert dynamic data". Then select: "Get data from page URL".
In the parameter name, type OTC as shown. Close the popup.
This has effectively enabled us to grab a "query parameter" OTC from the application URL, and pass it as a "body parameter" to our "fetch user" API call. Look up "query parameter" documentation if you don't know what this means.
Let's go back to the workflow panel to complete the flow we created.
Here, we will add events that populate the UI elements with data.
From the list of actions, select "Element actions". From the list, select "Set state".
From the "Set state" menu that pops up, select the first element to populate, that is, the "user name" element. For the custom state field, select "init" state. Remember that init is a state that we have defined earlier.
The value field must reflect the result we got from the "fetch user" API call. For this, scroll up to find the "fetch user API results" option.
From the list that pops up, select "user firstname". What we will do next, is a small trick to merge two results. The firstname, and lastname, in one value.
For doing this, select "more" from the value field, and then select the "append" option. And then, from the same menu, select "arbitrary text". For the text field that pops up, simply add a "space" character and close the popup. This will be the space character between the firstname and lastname.
Click on "more" again, and this time from the list, select the option, "Append", and then, "Result of step 1", and then, "user last name".
Close the, "Set state" popup.
We have effectively obtained a user's full name and merged it in one result.
Next, click on "step 3" to add another action. Select "element actions", "set state" from the menu. This time select the "user email" element. For the custom state field, select "init". For the value field, select "result of step 1", and user email.
Next we will add other actions, to fill out the rest of the UI elements. But before that, go back to the design tab, to give a name for the Image element.
Select the profile image, and name it as "profile picture" as shown.
Go back to the workflow to add a new step. This time, select the invisible text field we had generated, called "profile picture url" for the "set state" action.
For the value field, select "result of step 1", and user avatar URL.
As you recall, we had set the "dynamic image" field of the profile picture, to the init state of the invisible text field, we called as "profile picture url".
Next, add another action, and repeat the same steps as before for the other text UI elements as shown.
We have effectively defined the init state of all UI elements based on the result fields of the "fetchUser" API call.
Our application is ready to be tested. Click on preview in the top right, and run the application.
The data fields will be empty as expected, since we don't have the one time code. Go back to your SaaSBox instance, and click on the "Go to app" button. Copy and paste the OTC as a query parameter in the browser URL as shown.
This is typically, a question mark, followed by OTC, equals, the number you have copied.
Now reload the browser, and you will see the profile information populated. As a result, we are able to use the user profile and plan information inside a bubble application. This way, we can solely focus on the bubble application functionality, while SaaSBox becomes our subscription engine, that handles payments, plan changes, invoices, and so on.
Part 4: Embedding the Bubble Application inside SaaSBox
Let's now go one step further and embed the Bubble application inside the SaaSBox user dashboard.
For this, first go to "Settings" tab in your bubble application. Change the "private app" setting in the top right, to "everyone can view". You will also want to deploy your application to live, as seen in this menu.
Before doing that, we need to find the option "Block all iframes" in the same page, and change it to "allow all iframes".
We can now deploy the application as "live", giving it a name "SaaS Demo with Bubble". Click on "deploy".
Next, go back to your SaaSBox instance, and click on "go to app". Here, you can click on "dashboard templates" to edit this page. Under "page templates", choose the live template's edit option. Select the "app" directory, then click edit button for the, "main" page. You can also do this step on your local machine, but we will skip that for now.
In the editor, delete the template lines as shown. Replace the text where it says "How to edit this page", with, "Bubble Embed Demo".
On the next line, let's create an i-frame element. To do this, we simply type iframe. Open parenthesis, then src equals the Bubble application URL, in double quotes, as shown. We then add width and height parameters, as shown. Our embed is almost complete.
Now let's append the OTC parameter to the bubble application URL, as we did before. First, add a question mark, then OTC equals, and complete the string with double quotes. To append the OTC, add a plus, and simply type OTC.
Save and go to the user dashboard again. You will now see the bubble application embedded, with current user's information displayed, including their active subscription.
The OTC value will dynamically update, each time the dashboard is loaded by the user. This will securely share the unique user information with our bubble application. Inside our bubble application, we can then deliver the data or service, tailored for this specific user.
As a result, we can focus our efforts in our actual Bubble application, while SaaSBox becomes the engine that handles the rest, including users, subscriptions, and professionally hosting our SaaS marketing pages.
This concludes our tutorial. We hope you will create amazing SaaS applications with this integration of Bubble and SaaSBox. Don't forget to check out our Discord channel to ask questions.
Last updated
