---
title: "Embedded Analytics"
slug: /embedded
sidebar_label: "Introduction"
image: "https://cdn.holistics.io/product/embedded-og-image-20240916-284.png"
description: "Embed Holistics dashboards and self-service analytics into your own application with one signed payload and an iframe"
hide_title: true
---

<Hero
  title="Embedded Analytics"
  subtitle="Put dashboards and self-service analytics right inside your own product."
  imageAlt="Holistics dashboards and self-service analytics running inside a host application" />

With **Embedded Analytics**, you can embed specific dashboards (or a full
analytics experience) directly into your own application. Your users get analytics
that look and feel like a native part of your product, without ever leaving your app.

Think: customer usage dashboards in your SaaS app, per-client reports filtered to
each organization's data, or internal operational dashboards for your team. Here's
what you get out of the box:

- **No build from scratch**: embed pre-built dashboards instead of writing custom analytics code
- **Your app, your brand**: white-label the look, domain, and experience to match your product
- **Secure multi-tenancy**: [row-level permissions](/embedded/row-level-permissions) filter each report to the viewer's own data, mapped to your existing user system
- **Self-service exploration**: let users build their own dashboards and explore data
- **Developer friendly**: define portals as code, with Git integration, a live preview in the Embed Builder, and preview environments

<VideoPlayer src="https://media.holistics.io/0f348f93-hero-embedded.mp4" />

## What your users can do

Each capability below is a payload change away. Turn on what your product needs, when it
needs it.

<CardGrid cols={2}>
  <Card
    title="View dashboards"
    media={{type: 'video', src: 'https://media.holistics.io/fc4f6cf7-embed-portal-intro.mp4', poster: 'https://media.holistics.io/a7215f21-embed-portal.png'}}
    href="/embedded/quickstart"
    cta="Embed a dashboard">
    Show one or many dashboards with filters, export, and drill-through, filtered to each viewer's own data.
  </Card>
  <Card
    title="Explore data"
    media={{type: 'video', src: 'https://media.holistics.io/599b94a0-embed-portal-explore-data.mp4'}}
    href="/embedded/self-serve-exploration"
    cta="Enable exploration">
    Let users drill down, break down, and build their own charts from your datasets.
  </Card>
  <Card
    title="View underlying data"
    media={{type: 'video', src: 'https://media.holistics.io/e8a09846-embed-portal-vud.mp4'}}
    href="/embedded/self-serve-exploration#view-underlying-data"
    cta="Show the rows">
    Let users open the rows behind any chart to check the numbers, filtered to their own data.
  </Card>
  <Card
    title="Ask AI"
    media={{type: 'video', src: 'https://media.holistics.io/5f2c8c77-ask-ai-embedded-analytics.mp4', poster: 'https://media.holistics.io/94740eb8-customized-ask-ai.png'}}
    href="/embedded/ask-ai"
    cta="Enable Ask AI">
    Answer questions in plain language, summarize charts, and dig into data with conversational analytics.
  </Card>
  <Card
    title="Subscribe by email"
    media={{type: 'video', src: 'https://media.holistics.io/0b21de4c-embed-email-subscription.mp4'}}
    href="/embedded/email-subscriptions"
    cta="Enable subscriptions">
    Let users schedule dashboards to their inbox as PDF, PNG, CSV, or Excel, with their own filters applied.
  </Card>
  <Card
    title="Build their own dashboards"
    media={{type: 'video', src: 'https://media.holistics.io/bf831e67-user-save-explore-to-dashboard.mp4', poster: 'https://media.holistics.io/bc8ae269-embed-portal-personal-dashboard.jpg'}}
    href="/embedded/user-built-dashboards"
    cta="Set up workspaces">
    Give each user a personal workspace, or a shared one per organization, to save and collaborate on dashboards.
  </Card>
</CardGrid>

## How it works

There is one way to embed, and it takes a few minutes. Your backend signs an **embed payload**
that describes what to show and who is viewing. Your frontend loads the result in an **iframe**.

<ReactFlowDiagram id="embed-flow" height={540} fixed />

1. **Generate embed credentials** in Holistics: one Key ID and Secret for all your embeds.
2. **Build and sign the payload** on your backend. List the dashboards to show, the viewer's
   identity, and their [row-level permissions](/embedded/row-level-permissions), then sign it
   with your Secret.
3. **Load the iframe** in your frontend, pointing at the embed URL with the signed token.

Everything lives in the payload, so you start with a single dashboard and unlock more later
by adding a few keys. There is no second setup to learn and no migration when your needs grow.

:::info Already using per-dashboard embed links?
Your existing links keep working. When you're ready for the newer capabilities, follow [Migrate to the new embed payload](/embedded/single-dashboard/migrate-to-new-embed-payload).
:::

<CardGrid cols={3}>
  <Card title="Quickstart" href="/embedded/quickstart" badge="Start here" cta="Embed in minutes">
    Generate credentials, sign a payload, and load your first dashboard end to end.
  </Card>
  <Card title="Embed payload reference" href="/embedded/parameters-reference" cta="Browse the reference">
    Every payload and URL parameter: objects, identity, permissions, settings.
  </Card>
  <Card title="Demo playground" href="https://hooli.getholistics.com/" cta="Try the live demo">
    See embedded dashboards, exploration, and Ask AI working inside a sample app.
  </Card>
</CardGrid>

## Customize the experience

Make the embed look and behave like part of your product: your brand, your viewers' language,
and two-way communication with your app.

<CardGrid cols={3}>
  <Card
    title="Match your brand"
    media={{type: 'video', src: 'https://media.holistics.io/144bb21f-Set-1.mp4'}}
    href="/embedded/customization-and-styling"
    cta="Style your embed">
    White-label colors, fonts, layout, and the Ask AI assistant so the embed feels native.
  </Card>
  <Card
    title="Localization"
    media={{type: 'image', src: 'https://media.holistics.io/embed/localization/embed-localization-fr-FR.jpg'}}
    href="/embedded/localization"
    cta="Translate your embed">
    Serve dashboards in each viewer's language with translation files and a language user attribute.
  </Card>
  <Card
    title="Embed events"
    media={{type: 'image', src: 'https://media.holistics.io/bf456ce7-embed-events.png'}}
    href="/embedded/embed-events"
    cta="Control with JavaScript">
    Sync filters, navigate between dashboards, and refresh tokens from your app through postMessage.
  </Card>
</CardGrid>

## Operations & security

Once the basics are working, these guides cover multi-tenancy, governance, and production
concerns.

<CardGrid cols={3}>
  <Card title="Row-level permissions" href="/embedded/row-level-permissions" cta="Secure your data">
    Filter every query to the viewer's own rows, either directly in the payload or through dataset rules and user attributes.
  </Card>
  <Card title="Identity & workspace" href="/embedded/identity-workspace" cta="Model your users">
    Map embed users and organizations to your own user system, and control what each role can do.
  </Card>
  <Card title="Embed Portal" href="/embedded/embed-portal/" cta="Persist your setup as code">
    Move what you embed into a version-controlled AML file when keeping the payload in sync becomes a burden.
  </Card>
  <Card title="Dynamic data sources" href="/embedded/dynamic-data-sources" cta="Route per customer">
    Point one embedded dashboard at a different database for each customer.
  </Card>
  <Card title="Security" href="/embedded/security" cta="Read the guide">
    How signed tokens, expiry, and row-level permissions keep each viewer's data isolated.
  </Card>
</CardGrid>