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.

The Client Portal template is a powerful agency web app template that enables clients and customers to collaborate on ongoing projects:

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).

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.

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.

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.

As you can see, we now have all the data such as Clients, Projects, Tasks, Invoices, etc. in our Airtable base.

Now, all you need to do is publish your app. You can publish under a Softr subdomain or connect a custom domain.

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.

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, where Client Email is a field in the template Airtable data source.

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.

This is done through a form hidden field, which grabs the record ID from the project URL. The ID differs depending on which project (i.e. record) is opened in the project details block at a given time.

In some cases, you may want your clients and team to edit information. With Softr, you can enable them to do that without having to share the entire Airtable base and, if needed, be very specific about who can edit what.

Since the client portal implies a selected group of users without a public signup page, you'll most probably be adding users through one of the ways described here. You can find more details on the other aspects of memberships in our detailed guide.

Each block or page in your Softr app can have its own visibility rules that specify who can access it. Our visibility settings overview will help you understand how this works.

Softr provides a variety of options for customizing the look and feel of your app. You can configure your app's theme in general as well as apply more granular stylings for each block.

Finally, you create a more personalized experience for your app users by adding this specific variable {LOGGED_IN_USER:NAME} in any static text field to show the logged-in user name.