How to Create a Client Portal
Creating a client/partner portal that enables you to share your Airtable data with external users is one of the most common usages of Softr.
You can do so in a secure way that enables you to restrict who has access to your Airtable information. This way you won’t need to share your Airtable base with your external users.
In addition, you’re going to be able to customize your user's experience by offering them an intuitive user interface similar to the web applications they are used to and tailored to your brand and your way of working.
- Consultants and Managers will be able to keep track of their clients, projects, tasks, and payments in one place. In addition, they will have access to a list of team members and their contact information.
- Clients will be able to see their own projects, tasks, and invoices. They can add new tasks to the projects and pay past-due invoices.
You can find detailed instructions on creating a Softr app from a template here. Just search for "client portal" and select the template. However, before we create an app from a template and start customizing it, let's Preview the template to explore its features. There are three user groups available by default. If we, for instance, log in with a Client Email, we'll see that clients have access to all of their projects and tasks and can also manage and pay their invoices (using the Stripe integration).
Logging in as a Client
Further on, if we log in as a Consultant, we'll have access to some additional sections such as company clients (along with all the projects assigned to them). Moreover, they can add tasks to clients' projects. Thus, consultants can access the information of all the customers, while clients only see the info that's specific to their projects.
Logging in as a Consultant
One of the easiest ways to start creating your client portal is to use the Client Portal template. The process is pretty straightforward, so let's take a quick look at the steps involved.
To use the template, you just need to find the required template and hit Use Template. As soon as you do that, you'll be immediately taken to your new Softr app with the template applied. You can connect your database during the setup or later on, so we'll look into that in the next step.
Creating a Client Portal from a template
Now you need to connect the template's Airtable base with all the mock data, which you can modify later on. To do that, you can either go to Integrations => Airtable or just click on one of the dynamic blocks that is linked to Airtable.
Connecting the app to Airtable
As you can see, we now have all the data such as Clients, Projects, Tasks, Invoices, etc. in our Airtable base.
Template data on Airtable
Softr makes it extremely easy to share data with your clients in a secure and user-friendly way. To do so, simply use one of the available blocks (for example, List or List Details), connect it to Airtable, and you will be good to go. As we discussed earlier, each user group sees only the blocks and pages that are relevant to them. This is achieved through conditional filters that can be applied to dynamic blocks (that fetch data from Airtable) to filter the list differently for each user.
Conditional filters applied on the list of projects
In the image above, you can see that the conditional filter applied on the list of projects allows the logged-in user to see only the projects that are assigned to him/her. This way, clients, for instance, will be able to view only those projects that contain their email under Client Email.
Allowing your clients or team to add data as part of their collaboration workflows is essential in almost all client portals. The Client Portal template allows clients to add new tasks to their running projects using a simple form. Below, you can see how the client logs in and submits a task using the form, which is then stored on Airtable.
To store the form submission on Airtable, you just need to connect it to the corresponding table through form settings as well as map all the fields. Moreover, as you can see below, the task is automatically assigned to the project it was submitted for.
Task assigned to a project