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