How to Create an Analytics Dashboard in Webflow

Embedding an Analytics dashboard within Webflow allows businesses to display charts in customer portals, highlight data to build trust with site visitors, and improve SEO
Taylor Risner
Taylor Risner
|
Director of Ops at Superchart
May 9, 2023
how to create a dashboard in webflow

Businesses of all sizes are integrating data analytics into various systems and processes, including their public-facing websites. Data visualizations can strengthen a website’s marketing potential and increase company credibility.

Many organizations leverage a business intelligence (BI) software vendor to meet their analytics needs, but with the rise of low-code and no-code software applications, teams can create data visualizations without needing a complicated backend data infrastructure or expensive frontend BI application. 

For users of the content management system (CMS) Webflow, it’s possible to embed no-code reports within your website. Webflow is a powerful no-code SaaS web development platform that allows editors, designers, and developers to create dynamic websites at scale.

Given that many businesses leverage websites to display key figures, highlight marketing data, and improve SEO—embedding data visualizations within Webflow allows teams to incorporate real-time insights without needing to manually update static copy.

Here are a few common use cases for embedding charts and data in Webflow: 

  • Providing analytics within an online customer portal to increase the value of the product or service
  • Displaying public figures on the company website to build trust
  • Displaying charts within online content to boost engagement and readership
  • Displaying company or market updates on KPIs

embedded analytics dashboard in webflow using superchart
Example of a Dashboard Embedded in Webflow, Created using Superchart

This article will discuss how to:

  • Identify Key Metrics
  • Create a Database With No-code Tools
  • Design a Data Analytics Dashboard
  • Embed Data Visualizations in Webflow
  • Publish an Embedded Analytics Dashboard

Identify Key Performance Metrics

Before adding data visualizations to your website, brainstorm the types of metrics that will strengthen a website or article's story. Significant amounts of text can overwhelm viewers, while data visualizations can help a user quickly interpret the value of a service or offering.

For example, a company may have industry-focused website pages that discuss why their product meets the needs of organizations in a particular vertical. In this scenario, a data visualization can supplement text by quickly and clearly showcasing a count of customers or total users served in a particular industry.

While this is a simple example, there are countless ways in which data visualizations can be used to augment a website and online content. Even news publications leverage embedded charts and graphs to showcase key figures that bolster an online article’s thesis. 

While reports will vary by team and industry, some use cases include:

  • Market trends and statistics
  • Sales data
  • Survey response data
  • Company growth over time
  • Customer stories and case studies
  • Client counts and project completion rates for freelancers 

Create a Database with No-Code Tools

With the rise of low-code and no-code software, there are numerous ways to organize critical business data using simple, no-code databases.  Even if your organization has a sophisticated data pipeline and data engineering team, a no-code database enables teams to create their own reports without depending on technical engineering teams.  

Popular no-code database options include: 

Notion

While notion is known primarily as a robust documentation and team collaboration tool, Notion can also be used as a database.  To do so, simply create a new page and select one of the options in the database section.  We recommend using a table, which provides a spreadsheet-like structure to manually enter or import data.  

no code database of sales crm pipeline in Notion
Notion Database Example

Pros:

  • Inline capabilities: A notion database can exist as a standalone page or as inline content—allowing users to view source data within the same page as the performance dashboard. This can help teams better understand and verify the source data represented in reports. 
  • Customization: The database structure itself can be changed from a table to a calendar, board, list or gallery—providing multiple viewing options for your performance dashboard’s source data. 
  • Rows are pages: Unlike a static spreadsheet or database, each row in a Notion database is its own page—meaning distinct rows can contain their own subset of customizable data, comments, or notes. 
  • Linked databases: Notion provides the ability to link databases between multiple pages.  For example, a database that contains data for both the sales and marketing teams can be linked on each team’s respective pages and filtered to only include applicable data for each team. This functionality ensures individual teams can only view their own data, even if a database contains cross-functional information. 

Cons: 

  • Limited integration options: While Notion can integrate with other applications, it was not built to handle large-scale data transfers.  If syncing data from another application into a Notion database, there are limits on how much data can be synced depending on your plan type.  
  • Slow load time with larger databases: Given that Notion was not built as a large-scale database tool, larger databases can cause slower page load times. Additionally, if Notion is used for all team processes and workflows, adding large linked databases into existing pages can hinder performance. 
  • Primary field is text only: Unlike a traditional database, the first column in a Notion database must be a text field.  This can be problematic if users desire a numeric value as a primary key. 

Airtable

At its core, Airtable was designed to allow organizations to create databases within a low-code/no-code architecture.  Unlike Notion—a content management system that has some database capabilities—Airtable was designed to provide a user-friendly alternative to traditional spreadsheets and backend databases. 

no code airtable database sales crm pipeline data
Airtable Database Example

Pros:

  • Linked records across tables: Just like a traditional database, a record can be linked from one table to another.  For example, multiple tables might include the column ‘Company’.  By linking the Company field between tables, data remains consistent and provides a relational data model similar to any traditional database. 
  • Robust integration offerings: Given that Airtable was designed as a user-friendly database option, the tool can integrate with over 1,000 websites and apps.
  • Handles massive amounts of data: Airtable was built to handle data.  Compared to Notion, users will likely experience faster load times and can sync more data into a table without hitting limits. 
  • Customizable primary key: The first column in any database is considered a row's primary key or record that differentiates the row from any other.  While Notion requires this field to be text-based, Airtable allows this field to be formatted in any of their supported data types. 

Cons: 

  • Less flexible for non-data use cases: While Notion supports both documentation and data in a single place, Airtable records are not designed to support large amounts of text.  Airtable really shines as a database vs a documentation tool, which could be a detractor depending on your team’s use case. 
  • Learning curve: For non-technical users that are unfamiliar with relational databases, Airtable will likely have a higher learning curve than Notion and Google Sheets.  
  • Price: Airtable’s Pro Plan is more expensive than Notion’s team plan and Google Sheets.

Google Sheets

Google Sheets can also be used as a no-code database. For anyone that’s used Microsoft Excel, the platform has a very shallow learning curve.  Like Airtable and Notion, Google Sheets takes traditional spreadsheets online and allows for real-time collaboration between teammates. 

no code database google sheets sales pipeline crm data
Sheets Database Example

Pros:

  • Free: While Notion and Airtable require subscription fees for accounts that require large-scale data integrations, Google Sheets provides a free alternative for any users with a Google account.  
  • Small learning curve: Sheets provides an online, collaborative spreadsheet that will be familiar to any Microsoft Excel user. 
  • Convenience with Google Suite: For organizations that use Gmail, Google Slides, and other G-Suite tools, Sheets is convenient and easy to integrate with other use cases.  

Cons:

  • No relational data model: Unlike Airtable, there is no connection or link between data contained in disparate Google Sheets.  This can lead to inconsistencies and errors in the data. 
  • Limited functionality and scalability: While Sheets allows for real-time collaboration between teammates, the service does not provide much functionality beyond that of a traditional spreadsheet.  Additionally, Google Cloud Storage limits can make it difficult to integrate large amounts of data without incurring costs or experiencing slow load times. 

Design an Analytics Dashboard

After brainstorming key metrics and selecting a database provider, it’s important to consider a logical order in which to present your reports. This is the foundation of data analytics dashboard design. What’s the clearest way to order reports on a dashboard?  What visualization types work best for each report?  Thinking about these questions helps to create an organized layout  that tells your team’s story.  

To design a clear and consistent analytics dashboard consider: 

Creating a Mockup

While mockups can be intricately designed in front-end user-interface (UI) applications, they can also be as simple as drafting your dashboard design with pen and paper.  Start with a lightweight rendering of the types of reports you want on your dashboard and think about the logical order in which they should appear.  You can draft and change a mockup as many times as you need.  This is simply a starting point to help determine the general layout of your performance dashboard, as well as the types of visualizations that are needed.

data visualization dashboard mockup online embed
Sample Dashboard Mockup on Pen and Paper

Choosing Logical Visualization Types

Each data visualization type has a purpose and some can be better suited to display certain information over others. Consider the following as a general guide:

Single Value Metrics

A single-value metric should showcase a KPI that is a single, standalone value.  These should typically be formatted at the top of a performance dashboard and provide a quick gauge on how the team is progressing.  This number is often a percentage (e.g. % toward goal) or a total (e.g. 55 total opportunities).  Additionally, color coding these metrics can help users quickly understand team performance.  If a single-value metric contains a red value, this universally signifies that a metric is performing below a predetermined expectation.  Green, on the other hand, can indicate the team is on track.  

Comparison Visuals

Comparison visuals can consist of bar/column charts, pie/donut charts, area charts, ribbon charts, and shape maps.  These visualization types make it easy to compare the differences and similarities between values.  For example, a column chart that showcases revenue by sales rep can quickly highlight which rep is leading in sales for a designated time period. 

Choose a Data Visualization Tool

Google Sheets

If Google Sheets is serving as your database, the service is an obvious (and free) choice for data visualizations as well.  Additionally, Notion has a preconfigured embed block for Google Drive, making it easy to copy a report’s share-URL and embed the data within Notion.  

The downside: Google Sheets doesn’t offer the sleekest visualization options.  It can take a significant amount of time to format reports and there are limited design options.  Charts are only a small portion of Google Sheets’ functionality, so the experience of creating visualizations can be inferior and time-consuming compared to more robust data visualization tools.  

Tableau 

Tableau is an extremely robust data visualization tool and the sky's the limit for the types of reports and dashboards that can be configured in the application.  Tableau is masterful at processing large amounts of data and dashboards can be customized to meet the look and feel of any organization’s branding. 

The downside: A Tableau subscription is expensive and has a steep learning curve for non-technical users. It can certainly be overwhelming, making it inaccessible to many business users, especially in the no code community. There are also compatibility issues with low-code/no-code services; for example, it’s often necessary to use a supported third-party embed block like CodePen to ensure tableau dashboards render properly in Notion.

Superchart 

Superchart is a new data visualization tool that was designed to be embedded in no-code tools like Webflow and Notion. The application integrates with Airtable and Google Sheets to easily import business data. Superchart’s data visualization options include modern, customizable elements that look professional, follow design best practices, and have a fresh appeal.  Additionally, changes in base data or chart design update automatically between Superchart and Webflow. 

The downside: This new product has limited visualization types and database integrations. Their visualization types currently only include tables, pivot tables, bar charts, line charts, area charts, KPIs, and column charts. And their database integrations currently only include Airtable and Google Sheets. 

Embed Data Visualizations in Webflow

At this point, let's assume you have created a dashboard mockup, you have the data available in a no code database, and you've created your data visualizations in a no code charting tool.

Now comes the fun and easy part.

To embed a visualization in Webflow, open the Add Panel by clicking plus sign, scroll down to ‘Advanced’, and select ‘Embed’.

This will open a popup where custom code can be pasted. Almost any HTML, CSS, or JavaScript (JS) can be embedded within Webflow, however, server-side languages like Python and Ruby cannot be embedded.

All you have to do is copy and paste the embed code from your visualization into this embed element.

custom embed block in Webflow for embedding charts and kpis
Embed Element in Webflow

                                                                                                                                                                                                                           Sample of Embedded Visualization Created Using Superchart

To style your embedded charts in Webflow, we recommend using containers and grids.

Containers are helpful for setting the style of the broader section and keeping all of the content centered and aligned. For example, in the image below, we have a container with an image, heading, text box, and embed element all nested underneath. This makes it easy to create a professional design where the data visualizations blend nicely with the text and images on the page.

webflow container with embedded chart kpi
Webflow Container with Multiple Nested Elements

If you're looking to arrange multiple charts and KPIs on a single page to display a dashboard, we recommend using Webflow grids. Grids are helpful to control the horizontal and vertical dashboard layout, while also optimizing for responsiveness across different devices. With grids, it's easy to arrange multiple embed elements together to create a dashboard.

In our Examples dashboard, we use a grid that contains embed elements inside of div blocks. This gives us optimal control to decide how many rows and columns each chart should span, what the height and width should be, and how all the visualizations should be arranged together most effectively.

Webflow grid with embedded charts kpis
Webflow Grid with Embed Elements Inside of Div Blocks

Publish an Embedded Performance Dashboard

Once your data visualizations have been embedded into a Webflow page, you’ll want to publish your work. Before sharing broadly, it’s important to audit the dashboard and verify that the data is accurate. It may even be worthwhile to create internal processes by which the data is reviewed, or assign an analyst to provide quality assurance (QA) on the dashboard before it’s released publicly.

If your newly created analytics dashboard contains internal information or data that should only be visible by select users, Webflow also provides the ability to password-protect specific pages of your website. 

Conclusion + Free Template

With so many businesses launching new products, websites, and online content, it's hard to capture attention and stand out from the crowd. The best way to do this is by adding more value, not noise.

Embedding charts, KPIs, and other data visualizations on your website, in your product or service, and in your online content, is a surefire way to help your brand stick out.

Build trust, boost engagement, and deliver value. Get started with our free example below.

Check out this Webflow dashboard we made using Superchart! 

Want to give Superchart a try? Try it out for Free!

Woohoo! You have joined our waitlist.
Oops! Something went wrong while submitting the form.
Try it Free

Level up your skills

Check out our latest guide.

Other Blog Posts You Might Like