[TUTORIAL] Client Dashboard With Live Data

If you’re running an agency or a freelancing business, you’ve probably been asked by your clients about analytics for their site.

Maybe you’ve also thought about how to make a dashboard for your clients but got put off by the amount of effort or integrations required.

We’ve been asked about this a lot, so we made it easy to set up a client dashboard with real data, just like the one below!

Before we get started, here’s a few quick tips to bear in mind when building a client dashboard:

  • Keep it simple. Clients want to quickly see insights without jumping between multiple screens or pages.
  • Focus only on what matters. Clients usually only care about the most important metrics so don’t overload them with anything they don’t need to see.

Now, here’s how to build a client dashboard in Webflow!

1. Connect Nocodelytics to your Webflow account

Sign up at Nocodelytics.com. Grant access to the site(s) which you want to set up the dashboard for and click continue.

Once you return to the app, choose your site and follow the steps to enable tracking.

2. Add tracking script to your site’s Project Settings

Copy the script into your site’s Project Settings → Head Code.

Make sure you save and publish your changes. Click Test to verify this step.

script_demo

3. Set up your metrics

You’ll now see an empty dashboard in Nocodelytics. Now you can set up your dashboard with the metrics your clients care about.

Click “New Metric” and you’ll be able to choose from page views, clicks, form submissions, CMS engagement and more.

4. Create your dashboard page in Webflow

In Webflow, you want to have a specific page where your charts will sit. You can design this however you like or you can just use a cloneable like this one.

Customise it how you like and remove the static charts. We’re using live data for this one.

5. Embed your dashboard

Back in Nocodelytics, go to Site Settings and then enable the “Make dashboard public” toggle. Copy this script and paste it inside an HTML Embed on your Webflow page.

Set the height and width of the Embed Element. You’ll see your embedded dashboard visible inside the Designer and your charts will load with the data.

That’s all there is to it!

You could even password protect this and enhance it further by adding an FAQs section that answers common analytics questions.

Any questions or feedback? Just reply below or DM me :slight_smile:

2 Likes

Just want to echo here that the team here seems really solid, and actively listens to feedback from it’s community - which I think is something we can all appreciate here after the way the last couple of months have gone.

Keep up the good work!

1 Like

Hey Mike, somehow didn’t get notified about this. Thanks so much for your kind words! Trying to do our best to support the community and be responsive to feedback :pray: