Build a Nocode Lead Generation SaaS using Airtable and SaaSBox
In this tutorial we will build a SaaS using an Airtable database and embedding its views in the SaaSBox dashboard. SaaSBox provides all the functionality to run the SaaS, including the the paywall for different recurring plans.
A Data Service SaaS
Airtable works great for a periodically updated "data service" kind of SaaS businesses, e.g. a lead generation list where a highly focused, curated, and frequently updated database of business generating information is shared with subscribers.
Exporting Lead Data as Airtable Views
Airtable can export different views of the data that can be embedded in a dashboard as the service delivered. Both rows, and columns can be hidden in a view to segregate different levels of access to the data.
Segregating Lead Data for Different SaaS Plan Types
SaaSBox lets you conditionally load different Airtable views based on the current user's plan, allowing to differentiate the service provided to different plan subscribers.
Getting Started
Get Started by signing up to Airtable, and copying the Lead Generation SaaS table from below, where it says "Copy Base".
The above leads are mock up contact data that were derived from Airtable's "Sales CRM" template.
We now have all the data we need that will be delivered to the users of our service. This database can be updated frequently by a data scraper script for instance, or manual research if you want to go with the completely no code route.
Setting up User Plans
Sign up to SaaSBox, and create 3 plans: Basic, Premium, Premium Pro as below. For instructions, check out our guide on creating new plans. After setting up all 3 plans your pricing page will show the following:
Limiting data using Airtable Views
The Airtable base you copied above will already have views created from the same database with different levels of data visibility that map onto the plans you have created above.
In the current example we created 3 views we will use in the SaaS:
Basic: Has the basic rows and misses the linkedin profile and phone number columns.
Premium: Includes basic, and also rows checked as "Premium". For instance, these premium contacts could be decision makers.
Premium Pro: Has all the rows and columns.
Airtable Primer on hiding rows and columns
Hiding columns
Filtering columns work by selecting "Hide fields" in the top navbar in the view, and selecting the fields (i.e. columns) to be hidden.
Notice how the "Linkedin Upgrade" and "Phone Number Upgrade" fields are enabled. We replace the hidden fields with link fields with "Upgrade" wording linking at the /pricing url on our SaaS. This way users know what information they are missing out and can quickly reach the upgrade link.
Hiding Rows
Hiding rows works by selecting the "Filter" option in the top navbar in the view:
In order to exclude certain rows, we created a new field called "Premium" that is a boolean check box. By filtering only the Premium field of all rows that are in "Unchecked" state, we remove those rows from the view.
Embedding the different views in the SaaS user dashboard
SaaSBox lets you load different nocode embeds in the user dashboard area by copy & pasting them for each plan. This way, when a user on a given plan opens up their dashboard, they see the corresponding plan's embed. Since Airtable Views protect data visibility you can segregate how much of your data each plan subscriber can view.
Copying & Pasting Airtable View Embeds into SaaSBox
Go to the top navigation bar in each Airtable View and click on "Share view":
Select "Create a shareable grid view link"
Select "Embed this view on your site" option. You will be presented with an embed code similar to as follows:
Open up the SaaSBox "Nocode Embeds" section in the admin dashboard. You will be presented with embed fields for each plan you had created earlier:
Copy & Paste the embed code from Airtable to the Embed Code area, and name them on the left, with names such as basic_embed, premium_embed, premium_pro_embed. Here is how it looks after you paste them:
Click "Save". Now each embed view will be only available as a variable, when a user with the corresponding plan opens up their dashboard. Let's modify our SaaS user dashboard code to conditionally show the embed variable.
Modifying the SaaS User Dashboard to Conditionally show the Embeds for each Plan
This is the final step of completing our Nocode SaaS (Note you may find an already coded example for this step in one of SaaSBox Frontend templates, tagged with Nocode here).
Go to Page Templates > My Templates. In the "Default" template that is live, click "Edit".
Click on "App" directory, and select "Edit" for the main page. These are some of the pages we defined to be loaded for the user dashboard of this SaaS.
You will see this small snippet of code defined for the dashboard page:
All we need to do at this point is after line 9 we add a tag that includes the embed code defined for this plan, as follows (make sure to use 2 spaces to indent):
The final code looks like this:
When the user loads their dashboard in their respective plan, they get to see the data with the right view:
In this view for the user who is on the "Premium" plan as an example, you would see all the contacts data, except the LinkedIn and Phone number fields have the Upgrade to view link field.
Thats it!
You have successfully launched a subscription service for a database using only two nocode tools, Airtable and SaaSBox. While Airtable allows you to limit access to the same data tables via embeddable views, SaaSBox segregates loading the views into user dashboards based on their subscription plans.
Last updated
