Embedded analytics

Embed Dataki dashboards in any web application

Use the <dataki-dashboard> web component to turn Dataki into the analytics layer of your product. Copy the snippet from any dashboard, paste it into your app, and you're live.

Talk to us about embedded use cases

No iFrame hacks. Native web component, isolated styles, secure by design.

Step 1

Enable embedding for a dashboard

From inside Dataki, open any dashboard and use the Embed action to enable embedding. Dataki will generate a secure API key and optional list of allowed domains.

  • Toggle Enable Embedding to allow external access to this dashboard.
  • Copy the generated API key; you will use it in your embed code.
  • Optionally specify Allowed domains (e.g. app.yourcompany.com) to restrict where the dashboard can be embedded.

You can regenerate the API key or update allowed domains at any time from the same dialog.

What the embed dialog configures

API key

Used to authorize embed requests for this specific dashboard.

Allowed domains

Optional safety net so only specific hostnames can render the embed.

Embed code

Copy‑paste HTML snippet tailored to this dashboard and API key.

Step 2

Paste the embed code into your app

The simplest way to embed is to copy the HTML snippet from the Embed dialog and paste it into any HTML page in your application.

HTML embed snippet Copy & paste
dashboard.html 

<!-- Load the Dataki embed script once -->
<script type="module" src="https://app.dataki.ai/embed/dataki-embed.es.js"></script>

<!-- Render a dashboard anywhere in your app -->
<dataki-dashboard
  dashboard-id="YOUR_DASHBOARD_ID"
  api-key="YOUR_EMBED_API_KEY"
  theme="dark"
  filters="false">
</dataki-dashboard>

In Dataki, the Embed dialog pre‑fills dashboard-id and api-key for you. You just paste the snippet where you want the dashboard to appear.

Works with any stack

Because <dataki-dashboard> is a standard web component, you can use it in React, Vue, Next.js, Rails, Django templates, or plain HTML.

Styling & theming

The embed renders inside a Shadow DOM with Dataki's styles and fonts. Your page stays clean, and the dashboard looks exactly like it does in the main app.

Component props

The embed is available as a web component (<dataki-dashboard>) and as a React component. Web component uses HTML attributes; React uses props.

dashboard-id

Required. The dashboard ID to render. You’ll copy this from the Embed dialog.

api-key

Required. Your public embed API key. This authenticates the request and is scoped to the dashboard.

api-url

Optional. Override the API base URL (useful for self-hosting / staging).

theme

Optional. light (default) or dark. Controls the embed’s color mode.

filters (important)

The embed has a top bar (filters button + date range picker) that normally appears above the dashboard. You can control it with filters.

1) Hide the entire top bar
If you want a clean, “just the dashboard” embed, set filters to false. 


<dataki-dashboard
  dashboard-id="YOUR_DASHBOARD_ID"
  api-key="YOUR_EMBED_API_KEY"
  filters="false">
</dataki-dashboard>

2) React: prefill or enforce filter values
In React, you can pass an object to filters to pre-fill or enforce filter values. Filter values are keyed by the dashboard filter key.

  • topBar: set to false to hide the bar even when enforcing values.
  • enforce: when true, users can’t change the enforced values.
  • values: map of { [filterKey]: value } (string/number/array/etc depending on filter type).
  • dateRange: set a fixed date range using JS Date objects.

<DashboardEmbed
  dashboardId="YOUR_DASHBOARD_ID"
  apiKey="YOUR_EMBED_API_KEY"
  filters={
    topBar: false,
    enforce: true,
    values: {
      country: "Italy",
      status: ["paid", "refunded"]
    },
    dateRange: {
      start: new Date("2025-01-01"),
      end: new Date("2025-12-31")
    }
  }/>

Note: the Web Component currently supports filters="false" (hide top bar). Enforcing values is supported via the React API.

Styling & theming

Customize the embed by setting CSS variables on <dataki-dashboard> (Web Component) or .dataki-embed-root (React).

Quick start

You can override only the variables you care about (for example --color-primary). 


dataki-dashboard {
  --color-primary: #0070F4;
  --font-sans: "Geist Sans", system-ui, sans-serif;
}

All variables

Full list of theme variables supported by the embed.

CSS variables Paste into your host page stylesheet 

dataki-dashboard, .dataki-embed-root {
  /* Fonts */
  --font-sans: "Geist Sans", "ui-sans-serif", "system-ui", "sans-serif";
  --font-headers: "Geist Sans", "ui-sans-serif", "system-ui", "sans-serif";
  --font-mono: "IBM Plex Mono", "ui-monospace", "monospace";

  /* Surface colors */
  --color-surface-50: #f8f8fc;
  --color-surface-100: #E7E7EB;
  --color-surface-200: #CFCFD6;
  --color-surface-300: #B7B7BF;
  --color-surface-400: #A0A0A9;
  --color-surface-500: #87878F;
  --color-surface-600: #6B6B74;
  --color-surface-700: #454552;
  --color-surface-800: #292934;
  --color-surface-900: #17171B;
  --color-surface-950: #101013;

  /* Surface accent colors */
  --color-surface-accent-50: #f8fafc;
  --color-surface-accent-100: #f1f5f9;
  --color-surface-accent-200: #e2e8f0;
  --color-surface-accent-300: #cbd5e1;
  --color-surface-accent-400: #94a3b8;
  --color-surface-accent-500: #64748b;
  --color-surface-accent-600: #475569;
  --color-surface-accent-700: #334155;
  --color-surface-accent-800: #1e293b;
  --color-surface-accent-900: #0f172a;
  --color-surface-accent-950: #020617;

  /* Brand */
  --color-primary: #0070F4;
  --color-secondary: #FF5B79;

  /* Charts */
  --chart-text-color: #333;
  --chart-grid-color: #f0f0f0;
}

/* Optional dark-mode overrides */
.dark dataki-dashboard,
.dark .dataki-embed-root {
  --chart-text-color: #ccc;
  --chart-grid-color: #222222;
}

Step 3

Lock down where your dashboards can be embedded

Use the Allowed domains list in the Embed dialog to restrict which hostnames can render your embed. Any request coming from an unauthorized domain will be rejected.

  • Add production domains like app.yourcompany.com.
  • Include development hosts like localhost:3000 while building.
  • Leave empty if you want to allow embeds from any domain (not recommended for public data).

Best practices

  • Treat embed API keys like secrets: don't check them into public repos.
  • Use a different dashboard (and key) per customer if you need per‑tenant analytics.
  • Rotate keys periodically or whenever you suspect they may have leaked.

FAQ

Common questions about embedding

Can I embed Dataki in a single‑page app (SPA)?

Yes. The <dataki-dashboard> component works in React, Vue, Next.js, and other SPA frameworks. Just ensure the embed script is loaded once at the top level of your app.

Does the embed support dark mode?

Yes. Set the theme attribute to light or dark. Dataki will render the dashboard with the appropriate theme and styling.

Can I control which data a customer sees?

Use separate dashboards and API keys per customer, or use Dataki's data modeling to filter data at the dashboard level. Get in touch with us to design the right approach.

What if I need custom interactions?

Today the embed focuses on read‑only analytics. If you need deeper interactions or writeback, our team can help you scope a solution.

Building an embedded analytics product?

We help teams go from proof‑of‑concept to fully embedded dashboards in days, not months.

Talk to us