Taking the first steps in launching your SaaS
When you sign up, your application will be populated with the default template. The default template includes fully functional pages such as landing, login, sign up, pricing, and also importantly, a user dashboard for your users. Find out more about templates here.
Your application dashboard is where your users are redirected to after they sign up for your SaaS. In the empty template it looks as follows:
In this dashboard you can serve a custom application (using any single page app framework, React/VueJS, HTML/JS), an API usage dashboard, or simply embed a nocode application such as a view from Airtable.
The easiest way to demonstrate populating your user dashboard is to embed a nocode application. Let's take an Airtable view as an example.
Once you are inside an Airtable workspace, if you click on "Share View" option in the navbar, you would see an embed code as follows:
The next step is to copy this embed code and paste it inside the main dashboard page. For this go under "Page Templates" > "Default Template > Edit.
My Page Templates
Open up the "app" folder, and "main" page under your "Default" template by clicking Edit:
You will see the following Pug template code, that gets rendered to HTML when it is visited as a page.
Pug template file for your dashboard page called "main"
Paste the iframe embed code as below. The final code will look like this:
+head("Welcome to your Application")
// Replace with your content
h1.text-2xl.font-semibold.text-gray-900 Welcome to your Application!
iframe.airtable-embed(src="https://airtable.com/embed/shr5QpOYHSZDOdKbY?backgroundColor=red&layout=card&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;")
h4.text-gray-600 Let's get you set up.
A quick primer on converting an iframe html tag into Pug syntax:
<iframe class="someClass", attribute1=value1 attr2=val2 ></iframe>
Save the page, and click on the "Go to App" button on the left panel of your admin dashboard. You will see the following result:
Similar to this outcome, you may fetch your React or VueJS application in an iframe, or inside a <div> tag, and deliver content or application logic to your users.
Typically you would wish to deliver an application logic or data based on the user and his/her paid plan. For this the dashboard page embeds a JWT token with this information that would get decoded on your application server before sending the data/application logic. Please check out our more advanced examples for this use case.
Adding your application profile information populates various user facing pages in your template automatically.
For example, your application name and logo displays in the navigation bar and landing page footer. Your application name displays at the top of your user dashboard. Finally, the short description in the About section is displayed in the footer as the primary benefit/slogan of your service.
Go to your Stripe dashboard, and copy paste your live keys as above into your application. Your Stripe keys are securely stored with 256-bit AES encryption, in a secure key management system created for this purpose.
Your Stripe keys are required for creating price Plans and for users to subscribe to your SaaS.
Simply go to the Plans tab, and enter information such as the Plan name, description, price, period, and features.
Creating a new plan form
The plan information and features you list here are auto synced and immediately displayed on your pricing page as follows:
Your SaaS application needs its own primary domain, with an HTTPS certificate. SaaSBox can issue, install an HTTPS certificate, and manage certificate expiry and re-instantiation.
To set up your domain, go to the domain section of your admin dashboard, and enter the domain name you own.
This will initiate a step-by-step guide, where you will be asked to do 2 key actions:
- 1.Point your domain to your application address at SaaSBox.
- 2.Create a CNAME record with a specific subdomain key and value in your Domain Service Provider dashboard.
One of the main pages that work out of box is the landing page for your SaaS. Use the Landing Page Quick Edit Section in your dashboard to quickly edit and reiterate on your marketing slogan and SaaS description.
If you want to make more changes on your Landing page or other pages in their text and style, the best option is to edit pages locally on your computer, and use our command line tool to push them to your application. Check out the command line guide for further information.
You are done with the basic setup. Let's confirm how your users will go through your sign up flow with an example SaaS built using SaaSBox:
Landing page, describing the value of service and its differentiation
The Landing page quick editor helps to customize the headline message and its second paragraph. The application logo appears in the navbar and header, and the about section shows up as the application slogan. Full customization is possible via the page editor.
Upon sign up, your user is redirected to the pricing page. The page is auto-populated based on what plan information is provided on the "Create Plan" screen of your admin dashboard, - no need to modify the UI.
Free plans will create a plan object and directly redirect your user to their dashboard, however we highly recommend and cover the common use case of having paid plans below.
Once your user selects a paid plan, they are redirected to your checkout page. The page reminds the benefit of subscribing to your service, as well as what the plan offers. Feel free to create discount coupons in Stripe, that are applicable on this screen.
Once checkout succeeds, your users are redirected to their user dashboard to start using your service.
Congratulations! You have gone through the basic steps for launching your SaaS! Was that easy? Leave your thoughts in the comments!