🆙 How to use feature gates to boost paid upgrades in your Bubble app - Issue #22

Hi Everyone!

Welcome to the first NoCodeSaaS of 2022.

As we come into this new year I’m more sure than ever that this is the year building software products using no-code platforms goes truly mainstream.

After some incredible developments in technology over the last few years, you’re finally able to build market leading software without the need to be a programmer.

I can’t wait to see what you’re all going to build this year!

This week’s edition is all about converting free users onto paid plans in your Bubble app.

I’m going to share some of the strategies I use to convince people to upgrade at the perfect moment.

So with that said, let’s get started!

Feature Gating in Bubble

If you’re building a SaaS app, it’s likely you’re going to have a couple of different pricing plans for your users to choose from.

Each plan might have a different set of features available or a usage allowance.

You might even offer a totally free plan to let users try your app’s basic functions before committing to a paid plan.

In this edition, I’m going to cover how to convince users to upgrade through your different pricing plans at the right time for them.

If you’re implementing a billing system for the first time in your app, I suggest checking out this previous issue where I cover setting up all your pricing plans and database structure in Bubble first.

I’m going to assume you’ve set up some plans as option sets, and that all your users are linked to a plan in the database.

For example, in my app all users are either on a Free, Starter or Premium plan.

The next step is to decide which features you want to add your paid feature gate to.

These are probably the most popular features of your app that customers always ask for.

For my example, we’re going to add a paid feature gate to a data export function in my app.

That means to use this feature the user must be on a paid plan, otherwise they will be asked to upgrade to a paid plan through a prompt.

We want to add a feature gate to this button

When a user presses the above button we want something different to happen depending on whether they are on a paid plan.

• Paid users should be shown the feature and allowed to use it to export their data, the feature will load in a pop up modal.

• Free users should be shown a pop up which tells them to access export functionality they need to upgrade their account.

Feature Gate Workflow

When the user clicks the export button we want to do something different depending on their plan.

When the user presses the button we need to run a workflow to make things happen.

We want different actions to happen depending on their current plan.

As you can see in the above example, any user who is not currently on the free plan is shown the Export user interface which lets them export data.

We use an ‘Only when’ condition to manage this…

Open the export popup Only when the current user’s company plan is not Free

This means only paid users will be able to access the feature.

If a user is on a free plan, we want to show them a popup telling them to upgrade.

In that popup, we want to give them a custom message linked to the specific feature they’re trying to access.

To do this, I’m going to create a new Option Set in the data tab.

Each option set is going to be linked to the key reasons why users might want to upgrade in my app.

For example in the list below you can see Data Export, Create Multiple Surveys and Sending Bulk Emails as key prompts.

For each of these, I write an upgrade heading and subheading which I can use in my popup to sell the user on that specific feature.

For example, the headline for the data export feature is…

Unlock Data Exports with UserLoop Pro

Set up Option Sets with key upgrade prompts to use in your UI

Back in our Export button workflow, we want to show a popup to users who are currently on the Free plan.

We use the same logic as before for the ‘Only when…’ rule.

Show a popup to users who are on the free plan to get them to upgrade.

For our upgrade popup, we want to set its ‘Type of content’ to be for the ‘Upgrade Prompt’ option set we created earlier.

That means, whenever we load this popup, we need to tell it which ‘Upgrade Prompt’ option set we want it to show.

Set your popup's type of content to be your upgrade prompt option set

We add all the headlines and sub-headlines to the popup to show us the correct message for the specific feature like below.

Design your upgrade popup with data to sell your premium features

Now from our export button workflow…

We need to add one more step to tell the popup which Upgrade Prompt we want it to show.

As the user is trying to use the ‘Data Export’ feature, we will send that information to the popup.

To change what the popup shows, you simply adjust this setting depending on the feature the user is trying to access.

Set the upgrade prompt depending on what the user is trying to do.

That’s it! We’re now ready to go.

When a user on the free plan clicks on the export button they’ll be shown a popup telling them all about the export feature and asked to upgrade.

When a paying user clicks the button, they can use the feature.

Here’s how it looks for each kind of user…

Prompt for users currently on a free plan

Data export feature for users already on a paid plan

In my experience this kind of gating of high value features is one of the most effective ways of driving sales onto your paid plans.

When paired with tailored messaging depending on the feature the user is trying to use, this should help start to convert your free users into paying ones!

That's it for this week!

I hope you found this issue helpful.

I’m excited to write lots more content sharing everything I’ve learned from building a SaaS business with no code this year.

Are there any topics you’d like me to cover? Do you have any questions? Drop me a line by hitting reply, I respond to every one!

Have a great weekend, and happy building!

James