Embedding Multiple Dashboards

BETA FEATURE

This document outlines a Beta feature currently in progress. Until the Beta label is removed from both this notice and the feature in the Holistics' platform, it should not be regarded as part of our official documentation. Please note that this feature is subject to rapid, iterative changes, and the most current version may vary from what is described here. Contact [email protected] to try it out!

Summary

Embed Portal enables you to embed multiple dashboards with built-in navigation, all managed seamlessly through Holistics without requiring application code changes or redeployment.

Before vs. After

Before (Single dashboard embedding)	After (new Embed Portal)
❌ Complex separated embed code & credential management for each dashboard	✅ Easy to integrate & Single embed credential
❌ Manual navigation building in your app	✅ Built-in dashboard navigation
❌ Code changes + redeployment require engineering effort for new dashboards	✅ Just update Holistics code by data analyst for new dashboards
❌ Scattered user experience	✅ Cohesive analytics portal

Problem & Solution

Problem

When you start with embedded analytics, you typically embed one dashboard. Success breeds demand - users want more dashboards. Soon you're managing:

• Multiple embed codes and secrets stored in your database
• Custom navigation between different analytics views
• Engineering bottleneck & deployment dependencies to change code for every analytics update
• Inconsistent user experience across different embedded views

The Breaking Point: You realize you're building a mini BI application inside your app, duplicating work that should be handled by your BI platform.

Solution: Embed Portal

Embed Portal consolidates multiple dashboards into a single, navigable interface that:

1. Requires only one integration - single embed code, single iframe
2. Provides built-in navigation - collapsible sidebar, search, organization
3. Updates instantly - add/remove dashboards without application code deployment
4. Scales seamlessly - from 3 dashboards to 30+ dashboards
5. Enables future capabilities - foundation for exploration, personalization, and collaboration

How-to/Technical Setup

Create your portal containing multiple dashboards, publish, and integrate into your application. See Getting Started for detailed instructions covering portal creation, publishing, and integration.

EmbedPortal analytics_hub {
  objects: [
    sales_overview,      // dashboard
    revenue_trends,      // dashboard
    customer_metrics,    // dashboard
  ],
}

---

Migration from Multiple Single Dashboard Embeds

Before: Managing Multiple Single Dashboards

// Multiple credentials stored in your app
const dashboards = [
  { name: 'sales', code: 'abc123', secret: 'secret1' },
  { name: 'revenue', code: 'def456', secret: 'secret2' },
  { name: 'customers', code: 'ghi789', secret: 'secret3' }
];

// Function to load specific dashboard
function loadDashboard(dashboardName) {
  const dashboard = dashboards.find(d => d.name === dashboardName);
  const payload = { /* dashboard-specific payload */ };
  const token = jwt.sign(payload, dashboard.secret);
  const url = `https://holistics.io/embed/${dashboard.code}?token=${token}`;

  document.getElementById('analytics-frame').src = url;
}

<!-- Custom navigation between dashboards -->
<div class="dashboard-nav">
  <button onclick="loadDashboard('sales')">Sales</button>
  <button onclick="loadDashboard('revenue')">Revenue</button>
  <button onclick="loadDashboard('customers')">Customers</button>
</div>
<iframe id="analytics-frame" src="" width="100%" height="600"></iframe>

After: Single Embed Portal (Beta)

// Single credential for all dashboards
const embed_payload = {
  object_name: 'analytics_hub',
  object_type: 'EmbedPortal',
  user_attributes: {
    company_id: user.company_id,
    region: user.region,
  }
};

const token = jwt.sign(embed_payload, SINGLE_EMBED_SECRET);
const portalUrl = `https://holistics.io/embed/${KEY_ID}?token=${token}`;

<!-- Single iframe with built-in navigation -->
<iframe
  src="https://holistics.io/embed/your-key-id?token=generated-token"
  width="100%" 
  height="600"
  frameborder="0">
</iframe>

What Changes:

• Remove multiple credential storage and management
• Replace custom navigation logic with single portal iframe

Feature Ecosystem Position

This Feature Enables:

• Data Exploration: Users can explore data in dashboards or datasets
• Personal Workspace: Exploration results are saved to personal space within the portal
• Shared Workspace: Team collaboration happens in the same portal context