Embedded analytics

Three ways to embed

Method	Best for
JavaScript SDK	Rendering reports directly in your page (no iframe), with events and programmatic filters. Vue 3 and React examples available.
Report URLs and iframes	The fastest integration, with full isolation from your page’s styles and scripts.
Share links	Sending a read-only view to people outside the platform.

Sign users in from your backend

Your server signs a short-lived JSON Web Token for each user. The embedded report runs as that user, so row-level security applies automatically. Tokens are never signed in the browser.

<div id="report" style="width: 100%; height: 720px"></div>
<script>window.__dataforSDKBase = "https://<your-datafor-host>/datafor/content/datafor/ui/";</script>
<script src="https://<your-datafor-host>/datafor/content/datafor/ui/datafor-loader.js"></script>
<script>
  new Datafor.Visualizer({
    el: document.getElementById("report"),
    serverUrl: "https://<your-datafor-host>", // origin only, no /datafor
    path: "/home/admin/Sales Report.datafor",
    mode: "read",
    jwt: tokenSignedByYourBackend,
    onRedirectEvent: (next) => { /* re-create the visualizer with next */ },
  });
</script>

Control the experience

Opening filter values per user or page through initialFilterValues, and programmatic filters with setFilter().
Events for navigation, page title changes, and content readiness, so the report fits your app’s routing.
White-label branding: your name, logo, and theme color.

Multi-tenant by design

Each tenant gets its own users, content, and URL path, with entitlements such as plan, seat quota, and expiry managed from one console. New tenants are created from a template tenant that carries data sources, models, sample content, and branding.

Built for ISVs and OEMs

The OEM edition adds white-label packaging, multi-tenant delivery support, and OEM licensing terms. Talk to us about OEM →

Ship analytics inside your product, not next to it