# How to Build a White Label Client Portal for Your Agency

> You can build a white label client portal for your agency with a no code app builder. Define user roles, build the databases, create pages for projects, tasks, meetings and payments, then lock each client to their own records with data permissions. Link it to your project management data so updates reach clients automatically.

Source: https://fluxomate.com/blog/agency-client-portal.html  
Published by Fluxomate (https://fluxomate.com/), 2024-10-08. Section: Internal platforms.
Video: https://www.youtube.com/watch?v=mJOeF6-XKQQ

## Key takeaways

- Plan first: what clients should see, which tools to use, which user roles you need and which databases sit behind it.
- Use three roles: admin (sees all data), editor (sees only assigned data) and client (sees only their own project, meetings and payments).
- Build the portal on the same database as your project management system, so nothing needs updating twice.
- Filters hide data. Data permissions block access at the database level. Use permissions for anything sensitive.
- Finish with a custom domain, your logo and colours, and a progressive web app so clients can install it on their phone.

## What should a white label client portal include?

In this build, clients log in under your own domain with your branding. They get a dashboard with a project overview, completed tasks and charts, a list of tasks with notes, files, comments and assigned employees, a meetings calendar with a join button, and a payments page.

The key design choice is that the portal is linked to the project management system your team uses. A change your team makes appears for the client automatically, and each client sees only their own project.

Client portals do not suit every niche. If your clients are less comfortable with software, a portal may confuse them. Think about who your clients are before you build one.


## Step one: plan the portal and choose your tools

Brainstorm before you build. Decide what clients should be able to do: log in with your colours, logo and domain, track project progress, see completed and assigned tasks, view past and upcoming payments, and join meetings. The most important requirement is the link to your project management system, because a portal that is updated by hand gets out of date.

We used Noloco, a no code app builder, because it is easy for beginners and easy for an agency to maintain once built. A tailored internal tool fits your circumstances better than software built for everyone. Other builders can follow the same framework.


## Step two: set up your user roles

Every app like this has internal users (your team) and external users (your clients). We create three roles:

- **Admin.** Can see all tasks, projects, meetings and payments.
- **Editor.** Can see only assigned tasks, projects and meetings.
- **Client.** Can see only their own project, meetings and payments. They cannot modify the app.
- In Noloco, create the client role under manage roles, then assign it to a user in the users table. Each page can then be shown to a role.

## Step three: build the databases

Apps like this are built on databases, so this is one of the most important steps. A database has tables (such as payments), records (one payment) and fields (such as the amount). We reused existing project, task, employee, contact and meeting databases, and built a payments table from scratch to show the process. Noloco can also connect to tools such as Airtable or Google Sheets, but we recommend keeping data on the platform.

- **Amount.** A number field set as currency.
- **Date.** A date and time field, with a consistent time zone.
- **Linked client.** A link to another record, pointing at the contacts table, allowing multiple records.
- **Invoices.** A file upload field that allows several files.
- **Due date.** A date field, so you can see whether payments are late.
- **Status.** A single select with upcoming, paid and delayed.
- **Email.** A text field set to email, not marked unique, because one client will have several payments under the same email.
- **Import.** To fill the table, ask ChatGPT to generate a CSV with your field names and import it. Noloco maps matching columns. Reload to check it worked, then link record fields by hand.

## Step four: build the main pages

First create the client navigation: dashboard, my project, project tasks, my meetings, payments, and a need help page linking to a booking page. Set each page's visibility to clients with the client role.

On every page, add a filter so a client sees only their own records, using the logged in user's contact as the value, then remove fields and buttons clients do not need.

- **Payments.** Filter by linked client, show a simplified grid with the amount and status, remove the new record button and add a filter by payment status.
- **Meetings.** Filter by assigned contact and switch to a calendar view. Show the meeting link as a join button, and only when a link exists, using an is not empty condition.
- **Project tasks.** Filter by assigned project and switch to a board with backlog, in progress and completed columns. Hide the fields that clutter cards, and show the last updated date only when it has a value.
- **My project.** Use a blank page with containers, such as 25% and 75%. Add charts (a task count, the project retainer, meeting frequency by month and a pie chart of task types), a completed tasks highlight limited to ten items, and a list of past meetings, all filtered to the client's project.
- **Dashboard.** Add a welcome title with the user's name, a profile picture and quick links to pages. Links can also be email addresses or phone numbers, or a booking page.

## Step five: build the individual pages

Individual pages are where most interaction happens. Decide whether clients should only view them or also edit. You can turn off editing in a page's settings.

On the task page, disable user edits to the status bar, show created, updated and due dates as relative dates, and show the task notes with a rich text editor. List only the assigned employees, hidden when empty. Add a details tab with relevant files and links, and turn on inline editing so clients can upload them.

On the meeting page, show the date, type, duration and a join button. Add notes with a rich text editor, the assigned employees, and a notice that appears only when the meeting date is before today. On the payment page, show the amount, date, status and invoice.

Because the portal and the team's view use the same data, a status change or comment made by an employee appears for the client with no extra work.


## Why do data permissions matter more than filters?

Filters are like stuffing a mess in a wardrobe: it looks tidy, but the back end is still exposed, and a determined client could reach other clients' data. Data permissions fix this at the database level.

For each table, enable permissions and add a rule for the client role: switch off access to all records, then allow only matching records. For tasks, the assigned project must be the client's project. For projects, the contact must be the logged in contact. For meetings, the assigned contact is the logged in contact. For payments, the linked client is the logged in contact. With permissions in place, you do not strictly need the filters. The same approach works for editors and other employee levels.


## What finishing touches make it feel like your own app?

- **Record colours.** Green when a task is completed, red when the due date has passed and the task is not completed.
- **Record buttons.** For example a complete button that updates the status with a one click action, with confetti. Buttons can also send a webhook to Make.com for more complex actions.
- **Custom domain.** A subdomain of your own domain.
- **Progressive web app.** Switch this on in the app settings so clients can install the portal on their phone or desktop. It is not a native app, but it feels like one.
- **Theme and logos.** Set your brand colours, light and dark mode and upload your logos.
- **Automation.** Use Make.com or Zapier to preload tasks when a client is onboarded, add tasks when a meeting is booked, or send notifications at particular stages.

## Questions people ask

### Do I need to code to build a client portal?

No. This portal was built in a no code app builder, using tables, pages, filters, charts and settings. Automations can be added later with Make.com or Zapier.

### How do I make sure clients only see their own data?

Use filters on each page for a tidy view, and set data permissions on each table so the client role can only access records tied to their own contact or project. Permissions are the more secure option because they block access at the database level.

### Why link the portal to my project management system?

If the portal is separate, you must update it by hand every time a task or deadline changes. When both use the same data, an update by your team shows up for the client automatically.

### Can clients install the portal on their phone?

Yes. Turn on progressive web app in the app settings. Clients can then add it to their phone or desktop like an app, and you can pair it with a custom subdomain.

### Does every agency need a client portal?

No. If your clients are not comfortable with software, such as some local business owners, a portal can overwhelm them. It works best where clients can navigate online tools easily.

Tools used: Noloco, ChatGPT, Make.com, Zapier, Stripe, Airtable, Google Sheets

Free templates for this guide: https://fluxomate.com/resources.html?r=agency-client-portal