Embed portal - Embedding multiple dashboards

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