Embedding an Interactive Dashboard in Webflow

Overview

Webflow is a powerful no-code platform for building pixel-perfect websites, but it does not ship with native business intelligence (BI) visualizations. If you need to surface real-time metrics—whether for a customer-facing analytics portal, an internal operations page, or a marketing dashboard—you’ll embed an external tool such as Looker Studio, Tableau, Power BI, Supabase charts, or a custom React component.

Why Embed Dashboards in Webflow?

Adding interactive dashboards directly to your Webflow site lets stakeholders view key metrics in context, removes friction caused by context-switching to a separate analytics portal, and helps drive engagement with your data product. Modern BI tools expose secure embed links, meaning you can ship analytics without maintaining separate hosting infrastructure.

Prerequisites

• A published dashboard or chart in your BI tool with an <iframe>, script tag, or div placeholder snippet.
• A Webflow Site Plan that supports custom code (usually the Basic plan or higher).
• Optional: A reverse proxy or JWT service if you need single-sign-on (SSO)–based, row-level security.

Step-by-Step Guide

1. Choose a BI Tool That Supports Embedding

Tableau, Looker Studio, Mode, Supabase, Retool, Metabase, and Power BI all offer URL or iframe embeds. Verify that the vendor allows public or private (auth-gated) embeds depending on your use case.

2. Generate the Embed Snippet

Most tools provide a button—often labeled Embed, Share, or Publish—that outputs code similar to:

<iframe src="https://lookerstudio.google.com/embed/reporting/ab12cd34" width="600" height="450" allowfullscreen></iframe>

Copy this snippet.

3. Insert Custom Code in Webflow

1. Open the Webflow Designer.
2. Drag an Embed component from the Add Elements panel onto your page.
3. Paste the iframe or script.
4. Publish the site.

You can also inject code in Site Settings → Custom Code → Head or Body if the vendor requires external JavaScript.

4. Make the Iframe Responsive

Dashboards look best when they scale with the viewport. Wrap the iframe in a div with position: relative; padding-top: 56.25%; (for 16:9) and set the iframe to position: absolute; width: 100%; height: 100%;. Webflow’s embed block accepts inline styles, so you can implement this without touching external CSS files.

5. Handle Authentication and Row-Level Security

If the dashboard must be visible only to logged-in users or must show user-specific data, you have three main strategies:

• URL Tokens: Vendors like Supabase include a signed JWT in the embed URL. Generate the URL server-side and inject it into a <script> on page load.
• OAuth or SSO Embed SDKs: Looker and Power BI offer JavaScript libraries that exchange access tokens in the browser.
• Reverse Proxy: Route all embed traffic through your backend, adding auth headers.

End-to-End Example: Supabase Line Chart Inside Webflow

The following example pulls revenue data from PostgreSQL, renders a chart in a lightweight React component, and embeds that component in Webflow via a <script> tag served by Vercel.

// revenue-dashboard.jsx
import {{ createClient }} from '@supabase/supabase-js';
import {{ Line }} from 'react-chartjs-2';

const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY);

export default async function RevenueChart() {{
const {{ data }} = await supabase
.from('payments')
.select('created_at, amount')
.order('created_at');

const chartData = {{
labels: data.map(row => row.created_at),
datasets: [{{
label: 'Revenue',
data: data.map(row => row.amount),
borderColor: '#6366f1',
tension: 0.4,
}}]
}};

return <Line data={{chartData}} />;
}}


Deploy the component to Vercel, copy the deployment’s script tag, and paste it into a Webflow Embed element. Supabase’s Row-Level Security (RLS) policies ensure that each user sees only the rows they’re authorized to view.

Best Practices

• Lazy-load dashboards below the first viewport to reduce First Contentful Paint (FCP).
• Defer heavy vendor scripts and use loading="lazy" on iframes.
• Follow a mobile-first layout; test orientation changes.
• Version-control embed snippets in a Git repo or CMS collection for traceability.
• Use semantic alt text for accessibility when feasible.

Common Pitfalls and How to Fix Them

• White space or scroll bars: Set the parent div’s overflow to hidden and make the iframe height 100%.
• Mixed-content errors (HTTP inside HTTPS): Always serve the dashboard over HTTPS; modern browsers block insecure iframes.
• 401 Unauthorized on private embeds: Confirm that the token you pass in the URL is signed and not expired; test in an Incognito window.

Galaxy in Your Data Workflow

Before you can embed a dashboard, you need performant SQL queries powering it. Galaxy’s modern SQL editor and context-aware AI copilot help you draft, optimize, and document those queries faster. Store production-grade SQL in Galaxy Collections, Endorse them for team reuse, and feed the verified queries into your BI tool with confidence.

Next Steps

1. Prototype your embed in a Webflow staging site.
2. Audit loading performance with Lighthouse.
3. Add user-level security if needed.
4. Pair your SQL workflow with Galaxy to speed up iteration.