Embedded Analytics: The Developer's Complete Guide

Embedded analytics is the practice of integrating data visualizations, dashboards, and reports directly into a third-party application, so users can view and interact with data without leaving the product they're already using. Rather than building a custom analytics UI from scratch or directing users to a separate BI tool, embedded analytics lets developers ship a fully functional analytics experience — charts, filters, drill-throughs, and all — by rendering it inside their own application.

Metabase is one of the most widely used platforms for embedded analytics because it provides a complete, deployable analytics layer with a mature embedding API, row-level security, and white-labeling — all of which are required to build a production-grade embedded experience.

---

Why Developers Choose Embedded Analytics Over Building From Scratch

Every product eventually needs to show users data about their own usage. The naive solution is to build custom charts using a library like Recharts, Chart.js, or D3. This works for simple use cases — a line chart showing monthly revenue, a bar chart showing active users — but breaks down quickly when requirements grow:

Users want to filter by date range, segment, or custom dimensions

Users want to drill down from a summary view into underlying records

The data model changes, requiring updates to every chart

New chart types are requested that weren't in the original build

Non-technical stakeholders want to create their own views

Each of these requirements adds weeks of engineering work. Embedded analytics solves this by providing a pre-built analytics layer that handles querying, rendering, interactivity, and user customization — leaving the product team to focus on their core application.

Build vs. Embed: A Realistic Cost Comparison

Approach	Initial Build	Ongoing Maintenance	User Customization
Custom charting library	2–6 months	High (every schema change requires UI updates)	Requires engineering for each new feature
Embedded analytics (Metabase)	1–5 days	Low (Metabase handles rendering and querying)	Users can create their own questions and dashboards
Buy enterprise BI	Weeks to months (procurement + implementation)	Medium (requires dedicated analyst)	Yes, but separate tool users must learn

---

How Metabase Embedding Works

Metabase embedding works by rendering a Metabase dashboard or question inside an </code> in the host application. The host application controls what data the iframe receives via URL parameters and, for authenticated embedding, cryptographically signed tokens. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">The overall flow looks like this: </p><pre class="bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700"><code class="text-sm leading-relaxed">Host Application Metabase <p class="mb-6 leading-relaxed text-slate-700 text-lg">│ │ │ 1. User loads page │ │ 2. Server generates signed URL │ │ (JWT token + parameters) │ │ 3. Renders <iframe src={url}> │ │──────────────────────────────── ▶│ │ │ 4. Validates JWT signature │ │ 5. Applies row-level filters │ │ 6. Executes query │◀ ─────────────────────────────── │ 7. Returns rendered dashboard │ 8. Dashboard displays in iframe │</code></pre> </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">The host application never directly queries the database. Metabase handles all query execution. The host application only needs to generate a signed URL and render an iframe. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">--- </p><h2 class="text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3">Embedding Options in Metabase</h2> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Metabase offers two embedding modes with fundamentally different security models: </p><h3 class="text-2xl font-bold mt-8 mb-4 text-slate-900">Public Embedding (No Authentication)</h3> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Public embedding makes a dashboard or question accessible to anyone with the link — no login required. Metabase generates a public URL, and any iframe pointing to that URL will display the dashboard. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg"><strong class="font-bold text-slate-900">When to use it:</strong> </p><li class="text-slate-700">Publicly accessible dashboards (open data, marketing metrics, status pages)</li> <li class="text-slate-700">Internal dashboards behind your own auth where you don't need per-user data filtering</li> <p class="mb-6 leading-relaxed text-slate-700 text-lg"><strong class="font-bold text-slate-900">When not to use it:</strong> </p><li class="text-slate-700">Anything where different users should see different data</li> <li class="text-slate-700">Customer-facing analytics in a multi-tenant product</li> <li class="text-slate-700">Any sensitive data</li> <p class="mb-6 leading-relaxed text-slate-700 text-lg"><strong class="font-bold text-slate-900">How to enable it:</strong> In Metabase, open a dashboard → <strong class="font-bold text-slate-900">Sharing</strong> → <strong class="font-bold text-slate-900">Enable public sharing</strong> → copy the public URL. </p><h3 class="text-2xl font-bold mt-8 mb-4 text-slate-900">Signed Embedding (JWT Authentication)</h3> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Signed embedding — available in Metabase Pro and Enterprise — is the standard approach for production SaaS deployments. The host application generates a JWT token signed with a shared secret. The token encodes which dashboard to show and what parameters to apply. Metabase validates the signature and renders the dashboard with those parameters enforced server-side. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg"><strong class="font-bold text-slate-900">When to use it:</strong> </p><li class="text-slate-700">Customer-facing analytics where each customer sees their own data</li> <li class="text-slate-700">Internal tools where different users should see different subsets of data</li> <li class="text-slate-700">Any embedded use case involving sensitive or private data</li> <p class="mb-6 leading-relaxed text-slate-700 text-lg"><strong class="font-bold text-slate-900">How it works:</strong> </p><li class="text-slate-700">The host server generates a JWT token containing the dashboard ID and parameters</li> <li class="text-slate-700">The token is signed with <code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">MB_EMBEDDING_SECRET_KEY</code> (a shared secret known only to Metabase and your server)</li> <li class="text-slate-700">The token is embedded in the iframe URL</li> <li class="text-slate-700">Metabase validates the signature, extracts the parameters, and applies them as locked filters — the user cannot override them</li> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Because the token is signed server-side and the secret never reaches the browser, users cannot modify the parameters to see data that doesn't belong to them. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">--- </p><h2 class="text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3">Setting Up Signed Embedding: Step by Step</h2> <h3 class="text-2xl font-bold mt-8 mb-4 text-slate-900">Prerequisites</h3> <li class="text-slate-700">Metabase Pro or Enterprise (signed embedding is not available in the open-source edition)</li> <li class="text-slate-700"><code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">MB_EMBEDDING_SECRET_KEY</code> set as an environment variable in your Metabase deployment</li> <li class="text-slate-700">A server-side component in your host application (Node.js, Python, Ruby, Go, etc.) to generate JWT tokens</li> <h3 class="text-2xl font-bold mt-8 mb-4 text-slate-900">Step 1: Configure the Embedding Secret</h3> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Set the embedding secret in your Metabase configuration: </p><pre class="bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700"><code class="text-sm leading-relaxed">bash <p class="mb-6 leading-relaxed text-slate-700 text-lg"><h1 class="text-4xl font-bold mb-6 text-slate-900">In your Docker run command or docker-compose.yml</h1> MB_EMBEDDING_SECRET_KEY=your-long-random-secret-key</code></pre> </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">Generate a strong secret: </p><pre class="bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700"><code class="text-sm leading-relaxed">bash <p class="mb-6 leading-relaxed text-slate-700 text-lg">openssl rand -hex 32</code></pre> </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">This secret must be kept server-side. Never expose it to the browser. </p><h3 class="text-2xl font-bold mt-8 mb-4 text-slate-900">Step 2: Enable Embedding on the Dashboard</h3> <p class="mb-6 leading-relaxed text-slate-700 text-lg">In Metabase, open the dashboard you want to embed: </p><li class="text-slate-700">Click the <strong class="font-bold text-slate-900">Sharing</strong> icon (or go to <strong class="font-bold text-slate-900">Dashboard menu → Sharing and embedding</strong>)</li> <li class="text-slate-700">Click <strong class="font-bold text-slate-900">Embed this dashboard in an application</strong></li> <li class="text-slate-700">Configure which parameters are <strong class="font-bold text-slate-900">locked</strong> (controlled by your server) vs. <strong class="font-bold text-slate-900">editable</strong> (adjustable by the user)</li> <li class="text-slate-700">Click <strong class="font-bold text-slate-900">Publish</strong></li> <h3 class="text-2xl font-bold mt-8 mb-4 text-slate-900">Step 3: Generate a Signed URL (Server-Side)</h3> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Here's how to generate a signed embed URL in Node.js: </p><pre class="bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700"><code class="text-sm leading-relaxed">javascript <p class="mb-6 leading-relaxed text-slate-700 text-lg">const jwt = require("jsonwebtoken"); </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">function getSignedEmbedUrl(dashboardId, params = {}) { const METABASE_SITE_URL = process.env.METABASE_SITE_URL; const METABASE_SECRET_KEY = process.env.METABASE_SECRET_KEY; </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">const payload = { resource: { dashboard: dashboardId }, params: params, exp: Math.round(Date.now() / 1000) + (10 * 60), // 10 minute expiry }; </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">const token = jwt.sign(payload, METABASE_SECRET_KEY); </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">return <code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">${METABASE_SITE_URL}/embed/dashboard/${token}#bordered=true&titled=true</code>; } </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">// Usage: embed dashboard 42, filtered to company_id 99 const embedUrl = getSignedEmbedUrl(42, { company_id: 99 });</code></pre> </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">Python equivalent: </p><pre class="bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700"><code class="text-sm leading-relaxed">python <p class="mb-6 leading-relaxed text-slate-700 text-lg">import jwt import time import os </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">def get_signed_embed_url(dashboard_id: int, params: dict = {}) -> str: METABASE_SITE_URL = os.environ["METABASE_SITE_URL"] METABASE_SECRET_KEY = os.environ["METABASE_SECRET_KEY"] </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">payload = { "resource": {"dashboard": dashboard_id}, "params": params, "exp": round(time.time()) + (10 * 60) # 10 minute expiry } </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">token = jwt.encode(payload, METABASE_SECRET_KEY, algorithm="HS256") return f"{METABASE_SITE_URL}/embed/dashboard/{token}#bordered=true&titled=true" </p><p class="mb-6 leading-relaxed text-slate-700 text-lg"><h1 class="text-4xl font-bold mb-6 text-slate-900">Usage</h1> embed_url = get_signed_embed_url(42, {"company_id": 99})</code></pre> </p><h3 class="text-2xl font-bold mt-8 mb-4 text-slate-900">Step 4: Render the iframe</h3> <p class="mb-6 leading-relaxed text-slate-700 text-lg">In your frontend: </p><pre class="bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700"><code class="text-sm leading-relaxed">html <p class="mb-6 leading-relaxed text-slate-700 text-lg"> <iframe src="{{ embed_url }}" frameborder="0" width="100%" height="600" allowtransparency ></iframe></code></pre> </p><pre class="bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700"><code class="text-sm leading-relaxed">jsx <p class="mb-6 leading-relaxed text-slate-700 text-lg">// React function EmbeddedDashboard({ embedUrl }) { return ( <iframe src={embedUrl} frameBorder={0} width="100%" height={600} allowTransparency /> ); }</code></pre> </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">The <code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">embedUrl</code> should come from your server — never compute it client-side, as that would require exposing the secret key to the browser. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">--- </p><h2 class="text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3">Passing Parameters to Embedded Dashboards</h2> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Parameters let you filter the data shown in an embedded dashboard based on the context of the current user or page. This is how multi-tenant analytics works: you pass the current user's <code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">company_id</code> as a locked parameter, and Metabase ensures the dashboard only shows data matching that ID. </p><h3 class="text-2xl font-bold mt-8 mb-4 text-slate-900">Setting Up Parameters on the Dashboard</h3> <p class="mb-6 leading-relaxed text-slate-700 text-lg">In Metabase, add a filter to your dashboard: </p><li class="text-slate-700">Click <strong class="font-bold text-slate-900">Add a filter</strong> (the filter icon in the dashboard editor)</li> <li class="text-slate-700">Choose the filter type (ID, text, date, etc.)</li> <li class="text-slate-700">Connect it to the relevant columns in your questions</li> <li class="text-slate-700">In the embedding configuration, mark the filter as <strong class="font-bold text-slate-900">locked</strong> (fixed by the server) vs. <strong class="font-bold text-slate-900">enabled</strong> (adjustable by the user)</li> <h3 class="text-2xl font-bold mt-8 mb-4 text-slate-900">Passing Locked Parameters</h3> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Locked parameters are passed in the JWT payload: </p><pre class="bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700"><code class="text-sm leading-relaxed">javascript <p class="mb-6 leading-relaxed text-slate-700 text-lg">const payload = { resource: { dashboard: 42 }, params: { company_id: currentUser.companyId, // locked — user cannot change this // date_range is not specified — user can adjust it freely }, exp: Math.round(Date.now() / 1000) + (10 * 60), };</code></pre> </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">Parameters in the JWT payload are enforced server-side. Users cannot bypass them by modifying the URL. </p><h3 class="text-2xl font-bold mt-8 mb-4 text-slate-900">Passing Editable Parameters via URL</h3> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Editable parameters (those not locked in the JWT) can be pre-populated via URL hash parameters: </p><pre class="bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700"><code class="text-sm leading-relaxed">javascript <p class="mb-6 leading-relaxed text-slate-700 text-lg">const url = <code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">${METABASE_SITE_URL}/embed/dashboard/${token}#company_id=99&date_range=last30days</code>;</code></pre> </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">These can be changed by the user in the dashboard's filter UI. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">--- </p><h2 class="text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3">Controlling the Embedded UI</h2> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Metabase provides several URL parameters to control the appearance of embedded dashboards: </p><p class="mb-6 leading-relaxed text-slate-700 text-lg"><table class="w-full border-collapse my-6 border border-slate-300"><thead class="bg-slate-100"><tr><th class="border border-slate-300 px-4 py-2 text-left font-bold text-slate-900">Parameter</th><th class="border border-slate-300 px-4 py-2 text-left font-bold text-slate-900">Values</th><th class="border border-slate-300 px-4 py-2 text-left font-bold text-slate-900">Description</th></tr></thead><tbody><tr><td class="border border-slate-300 px-4 py-2 text-slate-700"><code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">bordered</code></td><td class="border border-slate-300 px-4 py-2 text-slate-700"><code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">true</code> / <code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">false</code></td><td class="border border-slate-300 px-4 py-2 text-slate-700">Show/hide the border around the dashboard</td></tr><tr><td class="border border-slate-300 px-4 py-2 text-slate-700"><code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">titled</code></td><td class="border border-slate-300 px-4 py-2 text-slate-700"><code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">true</code> / <code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">false</code></td><td class="border border-slate-300 px-4 py-2 text-slate-700">Show/hide the dashboard title</td></tr><tr><td class="border border-slate-300 px-4 py-2 text-slate-700"><code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">theme</code></td><td class="border border-slate-300 px-4 py-2 text-slate-700"><code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">night</code></td><td class="border border-slate-300 px-4 py-2 text-slate-700">Enable dark mode</td></tr><tr><td class="border border-slate-300 px-4 py-2 text-slate-700"><code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">hide_parameters</code></td><td class="border border-slate-300 px-4 py-2 text-slate-700"><code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">param_name</code></td><td class="border border-slate-300 px-4 py-2 text-slate-700">Hide specific filter controls</td></tr><tr><td class="border border-slate-300 px-4 py-2 text-slate-700"><code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">font</code></td><td class="border border-slate-300 px-4 py-2 text-slate-700">Font name</td><td class="border border-slate-300 px-4 py-2 text-slate-700">Override the dashboard font (Enterprise)</td></tr></tbody></table> Example: </p><pre class="bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700"><code class="text-sm leading-relaxed">/embed/dashboard/{token}#bordered=false&titled=false&theme=night</code></pre> <p class="mb-6 leading-relaxed text-slate-700 text-lg">For full white-labeling — removing all Metabase branding — see the white-labeling guide in this series. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">--- </p><h2 class="text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3">Security Considerations</h2> <p class="mb-6 leading-relaxed text-slate-700 text-lg"><strong class="font-bold text-slate-900">Always generate tokens server-side.</strong> The embedding secret must never be exposed to the browser. If a user can see the secret, they can generate arbitrary tokens and access any data. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg"><strong class="font-bold text-slate-900">Set a short token expiry.</strong> Tokens with a long expiry increase the window during which a stolen token could be used. 10 minutes is a reasonable default for tokens generated per page load. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg"><strong class="font-bold text-slate-900">Validate user identity before generating the token.</strong> Your server should only generate an embed URL after confirming the user is authenticated and authorized to see the data. The JWT token itself does not carry authentication — it's your server's responsibility to verify the user before issuing one. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg"><strong class="font-bold text-slate-900">Use HTTPS everywhere.</strong> The embed URL contains the signed token. If transmitted over HTTP, it can be intercepted and reused. Always serve Metabase over HTTPS in production. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg"><strong class="font-bold text-slate-900">Don't cache embed URLs across users.</strong> Generate a new token for each user session. A cached URL with one user's <code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">company_id</code> parameter should never be served to a different user. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">--- </p><h2 class="text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3">Common Embedding Patterns</h2> <h3 class="text-2xl font-bold mt-8 mb-4 text-slate-900">Per-Customer Usage Dashboard (SaaS)</h3> <p class="mb-6 leading-relaxed text-slate-700 text-lg">The most common embedded analytics pattern: each customer has a dashboard showing their own usage data. The host application passes the customer's <code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">id</code> or <code class="bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200">organization_id</code> as a locked parameter. </p><pre class="bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700"><code class="text-sm leading-relaxed">javascript <p class="mb-6 leading-relaxed text-slate-700 text-lg">// On the customer's analytics page const embedUrl = getSignedEmbedUrl(USAGE_DASHBOARD_ID, { organization_id: session.user.organizationId });</code></pre> </p><h3 class="text-2xl font-bold mt-8 mb-4 text-slate-900">Role-Based Dashboard Selection</h3> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Different user roles see different dashboards. An admin sees a full operational dashboard; a regular user sees a summarized view. </p><pre class="bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700"><code class="text-sm leading-relaxed">javascript <p class="mb-6 leading-relaxed text-slate-700 text-lg">const dashboardId = session.user.role === "admin" ? ADMIN_DASHBOARD_ID : USER_DASHBOARD_ID; </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">const embedUrl = getSignedEmbedUrl(dashboardId, { user_id: session.user.id });</code></pre> </p><h3 class="text-2xl font-bold mt-8 mb-4 text-slate-900">Contextual Analytics (In-Page Embedding)</h3> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Embedding a small chart or metric directly in a product page — not a full dashboard. Use a single Metabase question (not a dashboard) embedded in a card or widget. </p><pre class="bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700"><code class="text-sm leading-relaxed">javascript <p class="mb-6 leading-relaxed text-slate-700 text-lg">const payload = { resource: { question: questionId }, // question, not dashboard params: { order_id: currentOrderId }, exp: Math.round(Date.now() / 1000) + (10 * 60), };</code></pre> </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">--- </p><h2 class="text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3">Limitations of Iframe Embedding</h2> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Iframe-based embedding has a few inherent limitations: </p><li class="text-slate-700"><strong class="font-bold text-slate-900">No native cross-frame communication</strong> — the host app can't programmatically react to user interactions inside the iframe (e.g., "user clicked on a data point") without additional work</li> <li class="text-slate-700"><strong class="font-bold text-slate-900">Mobile responsiveness</strong> — iframes don't resize naturally on mobile; you'll need to handle this with JavaScript or CSS</li> <li class="text-slate-700"><strong class="font-bold text-slate-900">Browser cookie policies</strong> — some browsers restrict third-party cookies, which can affect session handling. Metabase's signed embedding model uses tokens rather than cookies, which avoids most of these issues.</li> <p class="mb-6 leading-relaxed text-slate-700 text-lg">For teams that need deeper integration — custom interactivity, programmatic control, or native mobile embedding — see the Metabase SDK (beta), which provides React components that render Metabase content without an iframe. </p><p class="mb-6 leading-relaxed text-slate-700 text-lg">--- </p><h2 class="text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3">Summary</h2> <p class="mb-6 leading-relaxed text-slate-700 text-lg">Embedded analytics with Metabase lets developers add a full analytics layer to their product in days rather than months. The core mechanism is an iframe rendered with a server-signed JWT token that locks parameters to control what data each user sees. Public embedding works without authentication for non-sensitive use cases. Signed embedding — available in Pro and Enterprise — is the production approach for multi-tenant SaaS applications. The key security requirement is that token generation always happens server-side, keeping the embedding secret out of the browser. </p></article></div><footer class="border-t border-slate-200 pt-12 mt-16"><div class="mb-8"><a class="inline-flex items-center text-blue-600 hover:text-blue-700 transition-colors duration-300 font-semibold" href="/guides"><span class="mr-2">←</span> Back to all guides</a></div></footer></article></div></main><footer class="border-t border-slate-100 bg-slate-50 mt-20"><div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12"><div class="grid md:grid-cols-3 gap-8 mb-8"><div><h3 class="font-bold text-slate-900 mb-4">About</h3><p class="text-sm text-slate-600">Comprehensive guides for integrating and scaling analytics with Metabase.</p></div><div><h3 class="font-bold text-slate-900 mb-4">Resources</h3><ul class="space-y-2 text-sm text-slate-600"><li><a href="/guides" class="hover:text-blue-600 transition-colors duration-300">All Guides</a></li><li><a href="https://metabase.com" target="_blank" rel="noopener noreferrer" class="hover:text-blue-600 transition-colors duration-300">Metabase</a></li></ul></div></div><div class="border-t border-slate-200 pt-8"><p class="text-sm text-slate-600 text-center">© 2026 The Developer's Guide to Analytics. Built with Next.js and Tailwind CSS.</p></div></div></footer><script src="/_next/static/chunks/webpack-c81f7fd28659d64f.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/f70a99a506308451.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"2:I[2846,[],\"\"]\n4:I[2972,[\"972\",\"static/chunks/972-0844a550f9c75131.js\",\"125\",\"static/chunks/app/guides/%5Bslug%5D/page-d1b5e12985454fe8.js\"],\"\"]\n6:I[4707,[],\"\"]\n8:I[6423,[],\"\"]\na:I[1060,[],\"\"]\n5:T739c,"])</script><script>self.__next_f.push([1,"\u003ch1 class=\"text-4xl font-bold mb-6 text-slate-900\"\u003eEmbedded Analytics: The Developer's Complete Guide\u003c/h1\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eEmbedded analytics is the practice of integrating data visualizations, dashboards, and reports directly into a third-party application, so users can view and interact with data without leaving the product they're already using.\u003c/strong\u003e Rather than building a custom analytics UI from scratch or directing users to a separate BI tool, embedded analytics lets developers ship a fully functional analytics experience — charts, filters, drill-throughs, and all — by rendering it inside their own application. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eMetabase is one of the most widely used platforms for embedded analytics because it provides a complete, deployable analytics layer with a mature embedding API, row-level security, and white-labeling — all of which are required to build a production-grade embedded experience. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e--- \u003c/p\u003e\u003ch2 class=\"text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3\"\u003eWhy Developers Choose Embedded Analytics Over Building From Scratch\u003c/h2\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eEvery product eventually needs to show users data about their own usage. The naive solution is to build custom charts using a library like Recharts, Chart.js, or D3. This works for simple use cases — a line chart showing monthly revenue, a bar chart showing active users — but breaks down quickly when requirements grow: \u003c/p\u003e\u003cul class=\"list-disc list-inside space-y-2 mb-6 ml-2\"\u003e\u003cli class=\"text-slate-700\"\u003eUsers want to filter by date range, segment, or custom dimensions\u003c/li\u003e\u003c/ul\u003e\n\u003cli class=\"text-slate-700\"\u003eUsers want to drill down from a summary view into underlying records\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eThe data model changes, requiring updates to every chart\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eNew chart types are requested that weren't in the original build\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eNon-technical stakeholders want to create their own views\u003c/li\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eEach of these requirements adds weeks of engineering work. Embedded analytics solves this by providing a pre-built analytics layer that handles querying, rendering, interactivity, and user customization — leaving the product team to focus on their core application. \u003c/p\u003e\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003eBuild vs. Embed: A Realistic Cost Comparison\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u003ctable class=\"w-full border-collapse my-6 border border-slate-300\"\u003e\u003cthead class=\"bg-slate-100\"\u003e\u003ctr\u003e\u003cth class=\"border border-slate-300 px-4 py-2 text-left font-bold text-slate-900\"\u003eApproach\u003c/th\u003e\u003cth class=\"border border-slate-300 px-4 py-2 text-left font-bold text-slate-900\"\u003eInitial Build\u003c/th\u003e\u003cth class=\"border border-slate-300 px-4 py-2 text-left font-bold text-slate-900\"\u003eOngoing Maintenance\u003c/th\u003e\u003cth class=\"border border-slate-300 px-4 py-2 text-left font-bold text-slate-900\"\u003eUser Customization\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eCustom charting library\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003e2–6 months\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eHigh (every schema change requires UI updates)\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eRequires engineering for each new feature\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eEmbedded analytics (Metabase)\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003e1–5 days\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eLow (Metabase handles rendering and querying)\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eUsers can create their own questions and dashboards\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eBuy enterprise BI\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eWeeks to months (procurement + implementation)\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eMedium (requires dedicated analyst)\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eYes, but separate tool users must learn\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e --- \u003c/p\u003e\u003ch2 class=\"text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3\"\u003eHow Metabase Embedding Works\u003c/h2\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eMetabase embedding works by rendering a Metabase dashboard or question inside an \u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003e\u003ciframe\u003e\u003c/code\u003e in the host application. The host application controls what data the iframe receives via URL parameters and, for authenticated embedding, cryptographically signed tokens. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eThe overall flow looks like this: \u003c/p\u003e\u003cpre class=\"bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700\"\u003e\u003ccode class=\"text-sm leading-relaxed\"\u003eHost Application Metabase\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e│ │ │ 1. User loads page │ │ 2. Server generates signed URL │ │ (JWT token + parameters) │ │ 3. Renders \u0026lt;iframe src={url}\u0026gt; │ │──────────────────────────────── ▶│ │ │ 4. Validates JWT signature │ │ 5. Applies row-level filters │ │ 6. Executes query │◀ ─────────────────────────────── │ 7. Returns rendered dashboard │ 8. Dashboard displays in iframe │\u003c/code\u003e\u003c/pre\u003e \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eThe host application never directly queries the database. Metabase handles all query execution. The host application only needs to generate a signed URL and render an iframe. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e--- \u003c/p\u003e\u003ch2 class=\"text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3\"\u003eEmbedding Options in Metabase\u003c/h2\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eMetabase offers two embedding modes with fundamentally different security models: \u003c/p\u003e\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003ePublic Embedding (No Authentication)\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003ePublic embedding makes a dashboard or question accessible to anyone with the link — no login required. Metabase generates a public URL, and any iframe pointing to that URL will display the dashboard. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eWhen to use it:\u003c/strong\u003e \u003c/p\u003e\u003cli class=\"text-slate-700\"\u003ePublicly accessible dashboards (open data, marketing metrics, status pages)\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eInternal dashboards behind your own auth where you don't need per-user data filtering\u003c/li\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eWhen not to use it:\u003c/strong\u003e \u003c/p\u003e\u003cli class=\"text-slate-700\"\u003eAnything where different users should see different data\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eCustomer-facing analytics in a multi-tenant product\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eAny sensitive data\u003c/li\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eHow to enable it:\u003c/strong\u003e In Metabase, open a dashboard → \u003cstrong class=\"font-bold text-slate-900\"\u003eSharing\u003c/strong\u003e → \u003cstrong class=\"font-bold text-slate-900\"\u003eEnable public sharing\u003c/strong\u003e → copy the public URL. \u003c/p\u003e\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003eSigned Embedding (JWT Authentication)\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eSigned embedding — available in Metabase Pro and Enterprise — is the standard approach for production SaaS deployments. The host application generates a JWT token signed with a shared secret. The token encodes which dashboard to show and what parameters to apply. Metabase validates the signature and renders the dashboard with those parameters enforced server-side. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eWhen to use it:\u003c/strong\u003e \u003c/p\u003e\u003cli class=\"text-slate-700\"\u003eCustomer-facing analytics where each customer sees their own data\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eInternal tools where different users should see different subsets of data\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eAny embedded use case involving sensitive or private data\u003c/li\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eHow it works:\u003c/strong\u003e \u003c/p\u003e\u003cli class=\"text-slate-700\"\u003eThe host server generates a JWT token containing the dashboard ID and parameters\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eThe token is signed with \u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003eMB_EMBEDDING_SECRET_KEY\u003c/code\u003e (a shared secret known only to Metabase and your server)\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eThe token is embedded in the iframe URL\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eMetabase validates the signature, extracts the parameters, and applies them as locked filters — the user cannot override them\u003c/li\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eBecause the token is signed server-side and the secret never reaches the browser, users cannot modify the parameters to see data that doesn't belong to them. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e--- \u003c/p\u003e\u003ch2 class=\"text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3\"\u003eSetting Up Signed Embedding: Step by Step\u003c/h2\u003e\n\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003ePrerequisites\u003c/h3\u003e\n\u003cli class=\"text-slate-700\"\u003eMetabase Pro or Enterprise (signed embedding is not available in the open-source edition)\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003e\u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003eMB_EMBEDDING_SECRET_KEY\u003c/code\u003e set as an environment variable in your Metabase deployment\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eA server-side component in your host application (Node.js, Python, Ruby, Go, etc.) to generate JWT tokens\u003c/li\u003e\n\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003eStep 1: Configure the Embedding Secret\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eSet the embedding secret in your Metabase configuration: \u003c/p\u003e\u003cpre class=\"bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700\"\u003e\u003ccode class=\"text-sm leading-relaxed\"\u003ebash\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u0026lt;h1 class=\"text-4xl font-bold mb-6 text-slate-900\"\u0026gt;In your Docker run command or docker-compose.yml\u0026lt;/h1\u0026gt; MB_EMBEDDING_SECRET_KEY=your-long-random-secret-key\u003c/code\u003e\u003c/pre\u003e \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eGenerate a strong secret: \u003c/p\u003e\u003cpre class=\"bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700\"\u003e\u003ccode class=\"text-sm leading-relaxed\"\u003ebash\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eopenssl rand -hex 32\u003c/code\u003e\u003c/pre\u003e \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eThis secret must be kept server-side. Never expose it to the browser. \u003c/p\u003e\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003eStep 2: Enable Embedding on the Dashboard\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eIn Metabase, open the dashboard you want to embed: \u003c/p\u003e\u003cli class=\"text-slate-700\"\u003eClick the \u003cstrong class=\"font-bold text-slate-900\"\u003eSharing\u003c/strong\u003e icon (or go to \u003cstrong class=\"font-bold text-slate-900\"\u003eDashboard menu → Sharing and embedding\u003c/strong\u003e)\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eClick \u003cstrong class=\"font-bold text-slate-900\"\u003eEmbed this dashboard in an application\u003c/strong\u003e\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eConfigure which parameters are \u003cstrong class=\"font-bold text-slate-900\"\u003elocked\u003c/strong\u003e (controlled by your server) vs. \u003cstrong class=\"font-bold text-slate-900\"\u003eeditable\u003c/strong\u003e (adjustable by the user)\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eClick \u003cstrong class=\"font-bold text-slate-900\"\u003ePublish\u003c/strong\u003e\u003c/li\u003e\n\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003eStep 3: Generate a Signed URL (Server-Side)\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eHere's how to generate a signed embed URL in Node.js: \u003c/p\u003e\u003cpre class=\"bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700\"\u003e\u003ccode class=\"text-sm leading-relaxed\"\u003ejavascript\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003econst jwt = require(\"jsonwebtoken\"); \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003efunction getSignedEmbedUrl(dashboardId, params = {}) { const METABASE_SITE_URL = process.env.METABASE_SITE_URL; const METABASE_SECRET_KEY = process.env.METABASE_SECRET_KEY; \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003econst payload = { resource: { dashboard: dashboardId }, params: params, exp: Math.round(Date.now() / 1000) + (10 * 60), // 10 minute expiry }; \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003econst token = jwt.sign(payload, METABASE_SECRET_KEY); \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003ereturn \u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003e${METABASE_SITE_URL}/embed/dashboard/${token}#bordered=true\u0026titled=true\u003c/code\u003e; } \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e// Usage: embed dashboard 42, filtered to company_id 99 const embedUrl = getSignedEmbedUrl(42, { company_id: 99 });\u003c/code\u003e\u003c/pre\u003e \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003ePython equivalent: \u003c/p\u003e\u003cpre class=\"bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700\"\u003e\u003ccode class=\"text-sm leading-relaxed\"\u003epython\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eimport jwt import time import os \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003edef get_signed_embed_url(dashboard_id: int, params: dict = {}) -\u0026gt; str: METABASE_SITE_URL = os.environ[\"METABASE_SITE_URL\"] METABASE_SECRET_KEY = os.environ[\"METABASE_SECRET_KEY\"] \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003epayload = { \"resource\": {\"dashboard\": dashboard_id}, \"params\": params, \"exp\": round(time.time()) + (10 * 60) # 10 minute expiry } \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003etoken = jwt.encode(payload, METABASE_SECRET_KEY, algorithm=\"HS256\") return f\"{METABASE_SITE_URL}/embed/dashboard/{token}#bordered=true\u0026titled=true\" \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u0026lt;h1 class=\"text-4xl font-bold mb-6 text-slate-900\"\u0026gt;Usage\u0026lt;/h1\u0026gt; embed_url = get_signed_embed_url(42, {\"company_id\": 99})\u003c/code\u003e\u003c/pre\u003e \u003c/p\u003e\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003eStep 4: Render the iframe\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eIn your frontend: \u003c/p\u003e\u003cpre class=\"bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700\"\u003e\u003ccode class=\"text-sm leading-relaxed\"\u003ehtml\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u0026lt;!-- Simple HTML --\u0026gt; \u0026lt;iframe src=\"{{ embed_url }}\" frameborder=\"0\" width=\"100%\" height=\"600\" allowtransparency \u0026gt;\u0026lt;/iframe\u0026gt;\u003c/code\u003e\u003c/pre\u003e \u003c/p\u003e\u003cpre class=\"bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700\"\u003e\u003ccode class=\"text-sm leading-relaxed\"\u003ejsx\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e// React function EmbeddedDashboard({ embedUrl }) { return ( \u0026lt;iframe src={embedUrl} frameBorder={0} width=\"100%\" height={600} allowTransparency /\u0026gt; ); }\u003c/code\u003e\u003c/pre\u003e \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eThe \u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003eembedUrl\u003c/code\u003e should come from your server — never compute it client-side, as that would require exposing the secret key to the browser. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e--- \u003c/p\u003e\u003ch2 class=\"text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3\"\u003ePassing Parameters to Embedded Dashboards\u003c/h2\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eParameters let you filter the data shown in an embedded dashboard based on the context of the current user or page. This is how multi-tenant analytics works: you pass the current user's \u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003ecompany_id\u003c/code\u003e as a locked parameter, and Metabase ensures the dashboard only shows data matching that ID. \u003c/p\u003e\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003eSetting Up Parameters on the Dashboard\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eIn Metabase, add a filter to your dashboard: \u003c/p\u003e\u003cli class=\"text-slate-700\"\u003eClick \u003cstrong class=\"font-bold text-slate-900\"\u003eAdd a filter\u003c/strong\u003e (the filter icon in the dashboard editor)\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eChoose the filter type (ID, text, date, etc.)\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eConnect it to the relevant columns in your questions\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003eIn the embedding configuration, mark the filter as \u003cstrong class=\"font-bold text-slate-900\"\u003elocked\u003c/strong\u003e (fixed by the server) vs. \u003cstrong class=\"font-bold text-slate-900\"\u003eenabled\u003c/strong\u003e (adjustable by the user)\u003c/li\u003e\n\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003ePassing Locked Parameters\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eLocked parameters are passed in the JWT payload: \u003c/p\u003e\u003cpre class=\"bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700\"\u003e\u003ccode class=\"text-sm leading-relaxed\"\u003ejavascript\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003econst payload = { resource: { dashboard: 42 }, params: { company_id: currentUser.companyId, // locked — user cannot change this // date_range is not specified — user can adjust it freely }, exp: Math.round(Date.now() / 1000) + (10 * 60), };\u003c/code\u003e\u003c/pre\u003e \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eParameters in the JWT payload are enforced server-side. Users cannot bypass them by modifying the URL. \u003c/p\u003e\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003ePassing Editable Parameters via URL\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eEditable parameters (those not locked in the JWT) can be pre-populated via URL hash parameters: \u003c/p\u003e\u003cpre class=\"bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700\"\u003e\u003ccode class=\"text-sm leading-relaxed\"\u003ejavascript\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003econst url = \u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003e${METABASE_SITE_URL}/embed/dashboard/${token}#company_id=99\u0026date_range=last30days\u003c/code\u003e;\u003c/code\u003e\u003c/pre\u003e \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eThese can be changed by the user in the dashboard's filter UI. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e--- \u003c/p\u003e\u003ch2 class=\"text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3\"\u003eControlling the Embedded UI\u003c/h2\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eMetabase provides several URL parameters to control the appearance of embedded dashboards: \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u003ctable class=\"w-full border-collapse my-6 border border-slate-300\"\u003e\u003cthead class=\"bg-slate-100\"\u003e\u003ctr\u003e\u003cth class=\"border border-slate-300 px-4 py-2 text-left font-bold text-slate-900\"\u003eParameter\u003c/th\u003e\u003cth class=\"border border-slate-300 px-4 py-2 text-left font-bold text-slate-900\"\u003eValues\u003c/th\u003e\u003cth class=\"border border-slate-300 px-4 py-2 text-left font-bold text-slate-900\"\u003eDescription\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003e\u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003ebordered\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003e\u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003etrue\u003c/code\u003e / \u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003efalse\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eShow/hide the border around the dashboard\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003e\u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003etitled\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003e\u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003etrue\u003c/code\u003e / \u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003efalse\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eShow/hide the dashboard title\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003e\u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003etheme\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003e\u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003enight\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eEnable dark mode\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003e\u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003ehide_parameters\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003e\u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003eparam_name\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eHide specific filter controls\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003e\u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003efont\u003c/code\u003e\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eFont name\u003c/td\u003e\u003ctd class=\"border border-slate-300 px-4 py-2 text-slate-700\"\u003eOverride the dashboard font (Enterprise)\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e Example: \u003c/p\u003e\u003cpre class=\"bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700\"\u003e\u003ccode class=\"text-sm leading-relaxed\"\u003e/embed/dashboard/{token}#bordered=false\u0026titled=false\u0026theme=night\u003c/code\u003e\u003c/pre\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eFor full white-labeling — removing all Metabase branding — see the white-labeling guide in this series. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e--- \u003c/p\u003e\u003ch2 class=\"text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3\"\u003eSecurity Considerations\u003c/h2\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eAlways generate tokens server-side.\u003c/strong\u003e The embedding secret must never be exposed to the browser. If a user can see the secret, they can generate arbitrary tokens and access any data. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eSet a short token expiry.\u003c/strong\u003e Tokens with a long expiry increase the window during which a stolen token could be used. 10 minutes is a reasonable default for tokens generated per page load. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eValidate user identity before generating the token.\u003c/strong\u003e Your server should only generate an embed URL after confirming the user is authenticated and authorized to see the data. The JWT token itself does not carry authentication — it's your server's responsibility to verify the user before issuing one. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eUse HTTPS everywhere.\u003c/strong\u003e The embed URL contains the signed token. If transmitted over HTTP, it can be intercepted and reused. Always serve Metabase over HTTPS in production. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eDon't cache embed URLs across users.\u003c/strong\u003e Generate a new token for each user session. A cached URL with one user's \u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003ecompany_id\u003c/code\u003e parameter should never be served to a different user. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e--- \u003c/p\u003e\u003ch2 class=\"text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3\"\u003eCommon Embedding Patterns\u003c/h2\u003e\n\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003ePer-Customer Usage Dashboard (SaaS)\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eThe most common embedded analytics pattern: each customer has a dashboard showing their own usage data. The host application passes the customer's \u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003eid\u003c/code\u003e or \u003ccode class=\"bg-slate-100 text-slate-900 px-2 py-1 rounded text-sm font-mono border border-slate-200\"\u003eorganization_id\u003c/code\u003e as a locked parameter. \u003c/p\u003e\u003cpre class=\"bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700\"\u003e\u003ccode class=\"text-sm leading-relaxed\"\u003ejavascript\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e// On the customer's analytics page const embedUrl = getSignedEmbedUrl(USAGE_DASHBOARD_ID, { organization_id: session.user.organizationId });\u003c/code\u003e\u003c/pre\u003e \u003c/p\u003e\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003eRole-Based Dashboard Selection\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eDifferent user roles see different dashboards. An admin sees a full operational dashboard; a regular user sees a summarized view. \u003c/p\u003e\u003cpre class=\"bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700\"\u003e\u003ccode class=\"text-sm leading-relaxed\"\u003ejavascript\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003econst dashboardId = session.user.role === \"admin\" ? ADMIN_DASHBOARD_ID : USER_DASHBOARD_ID; \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003econst embedUrl = getSignedEmbedUrl(dashboardId, { user_id: session.user.id });\u003c/code\u003e\u003c/pre\u003e \u003c/p\u003e\u003ch3 class=\"text-2xl font-bold mt-8 mb-4 text-slate-900\"\u003eContextual Analytics (In-Page Embedding)\u003c/h3\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eEmbedding a small chart or metric directly in a product page — not a full dashboard. Use a single Metabase question (not a dashboard) embedded in a card or widget. \u003c/p\u003e\u003cpre class=\"bg-slate-800 text-slate-50 p-6 rounded-lg overflow-auto mb-6 border border-slate-700\"\u003e\u003ccode class=\"text-sm leading-relaxed\"\u003ejavascript\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003econst payload = { resource: { question: questionId }, // question, not dashboard params: { order_id: currentOrderId }, exp: Math.round(Date.now() / 1000) + (10 * 60), };\u003c/code\u003e\u003c/pre\u003e \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e--- \u003c/p\u003e\u003ch2 class=\"text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3\"\u003eLimitations of Iframe Embedding\u003c/h2\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eIframe-based embedding has a few inherent limitations: \u003c/p\u003e\u003cli class=\"text-slate-700\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eNo native cross-frame communication\u003c/strong\u003e — the host app can't programmatically react to user interactions inside the iframe (e.g., \"user clicked on a data point\") without additional work\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eMobile responsiveness\u003c/strong\u003e — iframes don't resize naturally on mobile; you'll need to handle this with JavaScript or CSS\u003c/li\u003e\n\u003cli class=\"text-slate-700\"\u003e\u003cstrong class=\"font-bold text-slate-900\"\u003eBrowser cookie policies\u003c/strong\u003e — some browsers restrict third-party cookies, which can affect session handling. Metabase's signed embedding model uses tokens rather than cookies, which avoids most of these issues.\u003c/li\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eFor teams that need deeper integration — custom interactivity, programmatic control, or native mobile embedding — see the Metabase SDK (beta), which provides React components that render Metabase content without an iframe. \u003c/p\u003e\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003e--- \u003c/p\u003e\u003ch2 class=\"text-3xl font-bold mt-10 mb-5 text-slate-900 border-b border-slate-200 pb-3\"\u003eSummary\u003c/h2\u003e\n\u003cp class=\"mb-6 leading-relaxed text-slate-700 text-lg\"\u003eEmbedded analytics with Metabase lets developers add a full analytics layer to their product in days rather than months. The core mechanism is an iframe rendered with a server-signed JWT token that locks parameters to control what data each user sees. Public embedding works without authentication for non-sensitive use cases. Signed embedding — available in Pro and Enterprise — is the production approach for multi-tenant SaaS applications. The key security requirement is that token generation always happens server-side, keeping the embedding secret out of the browser. \u003c/p\u003e"])</script><script>self.__next_f.push([1,"7:[\"slug\",\"06-embedded-analytics\",\"d\"]\nb:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$L2\",null,{\"buildId\":\"vL_mXLpxPijWDTVJIRvho\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"guides\",\"06-embedded-analytics\"],\"initialTree\":[\"\",{\"children\":[\"guides\",{\"children\":[[\"slug\",\"06-embedded-analytics\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"guides\",{\"children\":[[\"slug\",\"06-embedded-analytics\",\"d\"],{\"children\":[\"__PAGE__\",{},[[\"$L3\",[\"$\",\"div\",null,{\"className\":\"w-full\",\"children\":[[\"$\",\"div\",null,{\"className\":\"border-b border-slate-200 bg-slate-50\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8\",\"children\":[\"$\",\"$L4\",null,{\"href\":\"/guides\",\"className\":\"inline-flex items-center text-blue-600 hover:text-blue-700 transition-colors duration-300 mb-6 font-semibold\",\"children\":[[\"$\",\"span\",null,{\"className\":\"mr-2\",\"children\":\"←\"}],\" Back to all guides\"]}]}]}],[\"$\",\"article\",null,{\"className\":\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-12 pb-12 border-b border-slate-200\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-block px-4 py-2 bg-blue-100 text-blue-700 text-sm font-bold rounded-lg mb-6\",\"children\":\"Embedding Analytics\"}],[\"$\",\"h1\",null,{\"className\":\"text-5xl font-bold text-slate-900 mb-6 leading-tight\",\"children\":\"Embedded Analytics - The Developer's Complete Guide\"}],[\"$\",\"p\",null,{\"className\":\"text-xl text-slate-600 mb-8 leading-relaxed max-w-2xl\",\"children\":\"Embedded analytics is the practice of integrating data visualizations, dashboards, and reports directly into a third-party application, so users can v...\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-8 text-slate-600\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-lg\",\"children\":\"📅\"}],[\"$\",\"time\",null,{\"className\":\"font-medium\",\"children\":\"May 8, 2026\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-lg\",\"children\":\"📖\"}],[\"$\",\"span\",null,{\"className\":\"font-medium\",\"children\":[11,\" min read\"]}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mb-16\",\"children\":[\"$\",\"article\",null,{\"className\":\"max-w-none prose prose-slate\",\"dangerouslySetInnerHTML\":{\"__html\":\"$5\"}}]}],[\"$\",\"footer\",null,{\"className\":\"border-t border-slate-200 pt-12 mt-16\",\"children\":[\"$\",\"div\",null,{\"className\":\"mb-8\",\"children\":[\"$\",\"$L4\",null,{\"href\":\"/guides\",\"className\":\"inline-flex items-center text-blue-600 hover:text-blue-700 transition-colors duration-300 font-semibold\",\"children\":[[\"$\",\"span\",null,{\"className\":\"mr-2\",\"children\":\"←\"}],\" Back to all guides\"]}]}]}]]}]]}],null],null],null]},[null,[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"guides\",\"children\",\"$7\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]],null]},[null,[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"guides\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/f70a99a506308451.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"scroll-smooth\",\"children\":[\"$\",\"body\",null,{\"className\":\"bg-white text-slate-900\",\"children\":[[\"$\",\"nav\",null,{\"className\":\"sticky top-0 z-50 border-b border-slate-100 bg-white shadow-sm\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between h-20\",\"children\":[[\"$\",\"$L4\",null,{\"href\":\"/\",\"className\":\"text-2xl font-bold text-slate-900 hover:text-blue-600 transition-colors duration-300\",\"children\":[[\"$\",\"span\",null,{\"className\":\"bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent\",\"children\":\"analytics\"}],[\"$\",\"span\",null,{\"className\":\"text-slate-900\",\"children\":\"fordevs\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-8\",\"children\":[\"$\",\"$L4\",null,{\"href\":\"/guides\",\"className\":\"font-semibold text-slate-700 hover:text-blue-600 transition-colors duration-300\",\"children\":\"Guides\"}]}]]}]}]}],[\"$\",\"main\",null,{\"children\":[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]}],[\"$\",\"footer\",null,{\"className\":\"border-t border-slate-100 bg-slate-50 mt-20\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid md:grid-cols-3 gap-8 mb-8\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-bold text-slate-900 mb-4\",\"children\":\"About\"}],[\"$\",\"p\",null,{\"className\":\"text-sm text-slate-600\",\"children\":\"Comprehensive guides for integrating and scaling analytics with Metabase.\"}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-bold text-slate-900 mb-4\",\"children\":\"Resources\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2 text-sm text-slate-600\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/guides\",\"className\":\"hover:text-blue-600 transition-colors duration-300\",\"children\":\"All Guides\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"https://metabase.com\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"hover:text-blue-600 transition-colors duration-300\",\"children\":\"Metabase\"}]}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"border-t border-slate-200 pt-8\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-sm text-slate-600 text-center\",\"children\":[\"© \",2026,\" The Developer's Guide to Analytics. Built with Next.js and Tailwind CSS.\"]}]}]]}]}]]}]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L9\"],\"globalErrorComponent\":\"$a\",\"missingSlots\":\"$Wb\"}]\n"])</script><script>self.__next_f.push([1,"9:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"The Developer's Guide to Analytics\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Ship analytics in days, not quarters. Comprehensive guides for integrating and scaling analytics with Metabase.\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"The Developer's Guide to Analytics\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:description\",\"content\":\"Ship analytics in days, not quarters.\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"7\",{\"name\":\"twitter:card\",\"content\":\"summary\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:title\",\"content\":\"The Developer's Guide to Analytics\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:description\",\"content\":\"Ship analytics in days, not quarters.\"}]]\n3:null\n"])</script></body></html>