Embedding Dashboards

Embedding Options

Basic Embed (iframe)

The simplest way to embed a dashboard is using an iframe:

<iframe
  src="https://app.lucaro.dev/embed/dashboards/DASHBOARD_ID"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

Signed Embeds

For secure embedding, generate a signed token on your server:

1. Generate Embed Token

// Server-side (Node.js example)
const response = await fetch('https://api.lucaro.dev/v2/embed/token', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    dashboard_id: 'DASHBOARD_ID',
    expires_in: 3600, // 1 hour
    filters: {
      customer_id: currentUser.customerId // Row-level security
    },
    permissions: {
      can_download: true,
      can_filter: true,
      show_toolbar: false
    }
  })
});

const { embed_url, token } = await response.json();

2. Embed with Token

<iframe
  src="https://app.lucaro.dev/embed/dashboards/DASHBOARD_ID?token=EMBED_TOKEN"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

Embed Options

JavaScript SDK

For more control, use the Lucaro JavaScript SDK:

<script src="https://cdn.lucaro.dev/embed.js"></script>
<div id="dashboard-container"></div>

<script>
  const dashboard = Lucaro.embed({
    container: '#dashboard-container',
    dashboardId: 'DASHBOARD_ID',
    token: 'EMBED_TOKEN',
    options: {
      theme: 'light',
      showToolbar: false,
      showFilters: true
    }
  });

  // Listen for events
  dashboard.on('filterChange', (filters) => {
    console.log('Filters changed:', filters);
  });

  dashboard.on('viewClick', (view, data) => {
    console.log('View clicked:', view, data);
  });

  // Update filters programmatically
  dashboard.setFilters({
    date_range: 'last_30_days',
    region: ['North', 'South']
  });
</script>

Row-Level Security

Restrict data visibility based on user attributes:

// Generate token with user-specific filters
const token = await generateEmbedToken({
  dashboard_id: 'DASHBOARD_ID',
  filters: {
    // Only show data for this customer
    customer_id: currentUser.customerId,
    // Only show specific regions
    region: currentUser.allowedRegions
  }
});