Embed Dashboard

The <Dashboard> component renders the full BusinessDash dashboard as an iframe inside your application — your users see the same dashboard they'd see at app.businessdash.us, without leaving your site.

import { Dashboard, DashboardProvider } from '@businessdash/sdk/react'

function App() {
  return (
    <DashboardProvider apiKey={process.env.BD_API_KEY}>
      <Dashboard defaultPath="/dashboard/forms" />
    </DashboardProvider>
  )
}

Props:

PropTypeDefaultDescription
defaultPathstring/Initial dashboard route
theme'light' | 'dark' | 'auto''auto'Dashboard theme
localestring'en'Dashboard locale

The SDK handles authentication and session creation automatically through the DashboardProvider. The iframe communicates with the parent window via a secure postMessage protocol, so your app can listen for navigation changes or trigger dashboard actions.

import { useDashboardSession } from '@businessdash/sdk/react'

function DashboardToolbar() {
  const session = useDashboardSession()
  return <span>Session: {session.id}</span>
}