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">
</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.

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