GTK Solution - Revenue Orchestrated

Build a simple client portal with Hubspot and Softr.

Written by Nichlas Knudsen | May 30, 2024 2:02:37 PM

Content overview:

  • What did I need a client portal for?
  • How I set it up:
  • What I can improve on next:

What did I need a client portal for?

I work with several clients now, and my goal is to be as transparent as possible regarding timesheets and how the hours are spent. I use Toggl to capture all initiatives I work on for a client, down to the very second.

I have never been a fan of sharing data like that through an Excel sheet, it brings a messy experience, so I wanted to find a way to create a simple client portal, where my customers can log in and see the following:

  • Hours Purchased.
  • Hours Spent.
  • Hours Remaining.
  • Latest Timesheet.
  • Latest Update.

I found a solution with Hubspot and Softr.io, and I will share how I set it up here, I could do this without having any cost associated with it, but if you want to try this, please check the pricing and see if any features paid features are needed for you.

This is the results of what my clients see once they log in:

Upon clicking "check hours" this is what they will see.

How did I set it up?

To start with, you need to have a source of the data you want to share, since I am using Hubspot as my CRM, that would be my data source for the timesheet info to show my client. However, you can also use Airtable or Google Sheets as a source.

Second, go to https://www.softr.io/ and create an account. Softr will work as the engine for your client portal.

First, you have to connect your data source: you can do that on the left side:

From there, press "connect data source" and pick the data source you wish to use, in my case it was Hubspot so I chose that and followed the steps to connect it.

Next: On the home page, I recommend building an app from scratch:

I played around with the templates, but I needed a simple 3-page app, and the templates had too many pages for me. I decided to start from scratch, and only build 3 pages, a home page, a login page, and a check hours page.

The first thing I did was to make sure that the data would be secure for my check hours page, to do this, I picked the check hours page, then settings, visibility, and then chose "logged in users" This will make sure that the page is only visible to users who are logged in.

Next step, I would add a table block to display the data on the check hours page, here you can pick the source, I then chose my Hubspot and the company object:

Next came the challenging part, in order to make sure you display the correct data to each specific client, you have to set up a conditional filter that dictates which data will be shown. To do this, you can scroll down a bit, and make sure that the domain matches the client's email domain:

As an example, my email domain is GTK-solutions.com, if I choose the same domain in my hubspot, it will connect the relevant data:

With that done, It was time to connect the data source I wanted to display, I set up the properties in HubSpot on the company level, as shown here:

I would then connect these properties to my table in Softr, as shown here:

Here is a review of how one of the properties is configured:

From here, I went on to make a simple design on the pages:

This is what shows after pressing "check hours"

Next, it's time to provide access to the client, I decided to go for a magic link, which means they can save that link, and save themself a login every time they want to check. You can add the users on the left side:

Then chose "add users" and used the option "magic link" I decided not to send an invite and shared the link directly with the client instead.

Last notes:

Testing: Make sure to test the user experience once you have designed the few pages, do the buttons have the right actions? is the data accurate when logging in as one of your clients?

Set up your process: My client won't need an update more than weekly, so my process is now to update the timesheets every Friday afternoon for my clients by checking the Toggl report and uploading the data to Hubspot.

What can I improve on next?

Currently, the process of updating the info for my clients every week is 10-15 minutes, however as I will get more clients and contracts, I might consider automating, so that it can update on its own.

And this is roughly how I set up a client portal!

If you read this far, thank you! let me know what you think, happy to hear if you have suggestions for improvements or if any questions about the set-up.

Are you a startup and looking to get started with Hubspot? or maybe you want to improve your current Hubspot setup? let's connect and discuss if I can help you thrive with RevOps and Hubspot.