Embedding

Embedding

After creating dashboards, there are three ways to embed them in your application.

1. React Components

Embedding dashboards in your React application is the recommended way to embed dashboards. It is the most flexible and customizable way to embed dashboards.

The @cue-ai/embedded package provides a set of React components that can be used to embed dashboards in your React application.

Installation

npm install @cue-ai/embedded

After installing, update your tailwind.config.js file to include the following:

import type { Config } from 'tailwindcss'
 
export const cueBorderRadius = {
  dashboardCard: "var(--cue-dashboard-card-radius)",
};
 
export const cueFontSize = {
  "dashboard-body": "var(--cue-dashboard-body-size)",
  "dashboard-h1": "var(--cue-dashboard-h1-size)",
  "dashboard-h2": "var(--cue-dashboard-h2-size)",
  "dashboard-card-body": "var(--cue-dashboard-card-body-size)",
  "dashboard-card-title": "var(--cue-dashboard-card-title-size)",
};
 
export const cueColors = {
  dashboard: {
    background: "var(--cue-dashboard-background)",
    foreground: "var(--cue-dashboard-foreground)  ",
    border: "var(--cue-dashboard-border)",
    muted: {
      DEFAULT: "var(--cue-dashboard-muted)",
      foreground: "var(--cue-dashboard-muted-foreground)",
    },
    accent: {
      DEFAULT: "var(--cue-dashboard-accent-foreground)",
      foreground: "var(--cue-dashboard-accent-foreground)",
    },
    card: {
      DEFAULT: "var(--cue-dashboard-card)",
      foreground: "var(--cue-dashboard-card-foreground)",
    },
  },
};
 
export const cueFontFamily = {
  dashboard: [
    "var(--cue-dashboard-font)",
    "var(--font-sans)",
  ],
};
 
export const cuePadding = {
  dashboardCard: "var(--cue-dashboard-card-padding)",
};
 
export const cueSafelist = [
  {
    pattern:
      /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    variants: ["hover", "ui-selected"],
  },
  {
    pattern:
      /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    variants: ["hover", "ui-selected"],
  },
  {
    pattern:
      /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
    variants: ["hover", "ui-selected"],
  },
  {
    pattern:
      /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
  },
  {
    pattern:
      /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
  },
  {
    pattern:
      /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
  },
]
 
const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    '../../node_modules/@cue-ai/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      borderRadius: cueBorderRadius,
      fontFamily: cueFontFamily,
      fontSize: cueFontSize,
      colors: cueColors,
      padding: cuePadding
    },
  },
  safelist: cueSafelist,
  // The rest of your config...
}
export default config

Usage

import { EmbeddedProvider, EmbeddedDashboardProvider, EmbeddedItemsRenderer  } from '@cue-ai/embedded';
 
<EmbeddedProvider organizationId="organizationId">
  <main className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
    <div className="py-8">
      <h1 className="text-2xl font-semibold text-gray-900">Embedded</h1>
      <p className="text-sm text-gray-500 mt-2">
        This is a demo of the embedded editor.
      </p>
    </div>
    <EmbeddedDashboardProvider
      dashboardId="dashboardId"
      customerId="customerId"
    >
      <EmbeddedItemsRenderer />
    </EmbeddedDashboardProvider>
  </main>
</EmbeddedProvider>

Swap out the organizationId, dashboardId and customerId with your own values.

Overriding Default Tailwind Theme

If you want to override the default Tailwind theme, you can define your own theme variables and pass them into the config in tailwind.config.js. See an example here (opens in a new tab).

2. iFrame

The iFrame method is the easiest way to embed dashboards. It is the least flexible and customizable way to embed dashboards.

<iframe
  src="https://app.trycue.ai/customer-dashboard/{dashboardId}?customer-id={customerId}"
/>

Swap out the dashboardId and customerId with your own values.

3. Customer Portal

The customer portal is a pre-built React application where your customers can access and configure their Cue dashboards.

This option is available by request only.

Getting StartedCustomers