Skip to content
Gallery
5x
5X - One Pagers
5X - Bring your own Snowflake
5X - Bring your own Google BigQuery
Setup Guide: Google Ads to Azure Data Lake Storage on 5X Platform
Multi-region support for the 5X Platform
5X Platform: Comprehensive DORA Compliance Assessment and Roadmap
Embedding 5X BI Dashboards
5X - Setting Up GitHub Merge-Triggered Workflows Using 5X Webhooks
Embedding 5X BI Dashboards
Share
Explore

Embedding 5X BI Dashboards

Overview

This guide provides detailed instructions for embedding 5X Business Intelligence (5X BI) dashboards into your applications. 5X BI, powered by Apache Superset, enables you to seamlessly integrate powerful data visualization capabilities into your applications using our secure embedding framework.

Prerequisites

Required Access

Active paid subscription to 5X platform
BI module enabled for your account
API key from the 5X team

Technical Requirements

Backend server to handle API calls
Frontend web application
Secure HTTPS environment
Modern web browser

Quick Start

Follow these steps to quickly embed a dashboard:
Enable embedding for your dashboard in 5X BI
Implement the backend endpoint for guest token generation
Add the embedding code to your frontend
Test the implementation

Detailed Implementation Guide

1️⃣ Dashboard Configuration

Enable Embedding

Navigate to your dashboard in 5X BI
Click "..." (three dots) in the top right
Select "Embed Dashboard"
Configure allowed domains
Enable embedding toggle
Save changes

Domain Configuration

Add specific domains where embedding is allowed
Format: https://app.yourcompany.com
Wildcard supported: *.yourcompany.com
Always use HTTPS URLs

2️⃣ Backend Implementation

The BI embed capability used guest tokens to authenticate into the BI instance. A server side flow for fetching the guest token from 5X needs to be implemented. From your server, a call needs to be made to the POST
https://api-v1.5x.co/business-intelligence/v1/guest-token
⁠
API end point to fetch the guest token that can be used for authenticating the dashboard embed.
The API Key needs to be passed in the ‘Authorization’ Header.
Request Body:
{
// Pass the list of dashboard ids for the dashboards that needs to be embedded.
"dashboardIds": [
"1",
"2",
"3"
]
}
Response Body:
{
"status": "SUCCESS",
"message": "Guest token fetched successfully.",
"data": {
"guestToken": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjp7Imxhc3RfbmFtZSI6IkFkbWluIiwiZmlyc3RfbmFtZSI6IlBsYXRmb3JtIiwidXNlcm5hbWUiOiJhZG1pbiJ9LCJyZXNvdXJjZXMiOlt7InR5cGUiOiJkYXNoYm9hcmQiLCJpZCI6IjEifSx7InR5cGUiOiJkYXNoYm9hcmQiLCJpZCI6IjIifSx7InR5cGUiOiJkYXNoYm9hcmQiLCJpZCI6IjMifV0sInJsc19ydWxlcyI6W10sImlhdCI6MTcyOTUzOTQzNC4zODA2NzU2LCJleHAiOjE3Mjk1Mzk3MzQuMzgwNjc1NiwiYXVkIjoiaHR0cDovLzAuMC4wLjA6ODA4MC8iLCJ0eXBlIjoiZ3Vlc3QifQ.VcpXMS2LJe4IhTlK-NMnWBA1CiD0QRFK1bJcgHFm3Ac",
"host": "https://myhsiw.superset.platform.5x.co"
}
}

API Endpoint Setup Sample(Node.js/Express Example)

Create an endpoint in your app’s backend server to generate guest tokens:
// Node.js/Express Example
const express = require('express');
const app = express();

app.post('/api/guest-token', async (req, res) => {
try {
const response = await fetch('https://api-v1.5x.co/business-intelligence/v1/guest-token', {
method: 'POST',
headers: {
'Authorization': `${process.env.FIVEX_API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
dashboardIds: req.body.dashboardIds
})
});

const data = await response.json();
res.json({
status: 'success',
guestToken: data.data.guestToken
});
} catch (error) {
res.status(500).json({
status: 'error',
message: 'Failed to generate guest token'
});
}
});

Security Best Practices

Store API key securely
Use environment variables
Never commit API keys to source control
Implement key rotation mechanism
Implement rate limiting
Add request validation
Use HTTPS only
Set up proper CORS policies

3️⃣ Frontend Implementation

Basic Setup

Create your HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5X BI Dashboard</title>
<style>
.dashboard-container {
width: 100%;
height: 800px;
border: 1px solid #ccc;
border-radius: 4px;
margin: 20px 0;
}
.error-message {
color: #721c24;
background-color: #f8d7da;
padding: 12px;
border-radius: 4px;
display: none;
}
.loading-indicator {
text-align: center;
padding: 20px;
display: none;
}
</style>
</head>
<body>
<div class="error-message" id="errorMessage"></div>
<div class="loading-indicator" id="loadingIndicator">Loading dashboard...</div>
<div class="dashboard-container" id="dashboardContainer"></div>

<script src="https://unpkg.com/@superset-ui/embedded-sdk"></script>
<script src="dashboard.js"></script>
</body>
</html>

Implementation Code

Create dashboard.js:
// Configuration
const config = {
dashboardIds: ['your-dashboard-id'], // Replace with your dashboard ID
apiEndpoint: '/api/guest-token',
supersetDomain: 'https://yourcompany.5x.co' // Your 5X BI domain
};

// Token Management
class TokenManager {
constructor() {
this.token = null;
this.tokenExpiry = null;
}

async getToken() {
if (!this.token || Date.now() > (this.tokenExpiry - 30000)) {
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.