​
Embedding Intelligent Apps

Datazone allows you to embed your Intelligent Apps directly into your own applications using a simple iframe approach. This enables you to integrate powerful data visualizations and dashboards into your product while maintaining your own application’s user experience.
embedding

​
Overview

Embedding works through a secure token-based authentication mechanism:
  1. Your application generates a signed JWT token containing the necessary parameters
  2. This token is used to construct an iframe URL
  3. The iframe renders your Intelligent App inside your application

​
Integration Steps

​
1. Prerequisites

  • An Intelligent App in your Datazone account. You can look at Intelligent Apps to create your first app.
  • Go to Intelligent App settings page under the Project section and click the Access Control tab to enable embedding and get your code snippet.
  • A web application where you want to embed the Intelligent App

​
2. Example Code Snippet

const jwt = require("jsonwebtoken");

const DATAZONE_SITE_URL = "https://comet.datazone.co";
const DATAZONE_SECRET_KEY = "your_secret_key"; // Replace with your actual secret key

const payload = {
  intelligent_app_id: "your_app_id", // Replace with your app's ID
  email: "user@example.com",         // User's email (optional)
  variables: {},                     // Initial variables (optional)
};

const token = jwt.sign(payload, DATAZONE_SECRET_KEY);

const iframeUrl = DATAZONE_SITE_URL + "/app/embedding/" + token;

​
3. Embed the App

Insert an iframe in your application pointing to the generated URL: 
<iframe
  src="https://comet.datazone.co/app/embedding/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
  width="100%"
  height="600px"
  frameBorder="0"
  allow="fullscreen"
></iframe>
source-empty

​
Embedding Parameters

The JWT token payload can include the following parameters:
ParameterTypeDescription
intelligent_app_idstringRequired. The ID of your Intelligent App
emailstringEmail of the user viewing the app (for access control and analytics)
user_idstringOptional ID of the user in your system
variablesobjectInitial values for app variables
filter_valuesobjectInitial values for filter components
config_overwriteobjectOverride app configuration settings

​
Example: Setting Initial Variables and Filters

const payload = {
  intelligent_app_id: "685ff04dab58322fd751e040",
  email: "user@example.com",
  variables: {
    selected_region: "Europe",
    time_period: "last_30_days"
  },
  filter_values: {
    region_filter: "Europe",
    date_range: "2025-08-01,2025-09-01"
  }
};

​
Example: Overriding App Configuration

You can override app configuration settings: 
const payload = {
  intelligent_app_id: "685ff04dab58322fd751e040",
  email: "user@example.com",
  config_overwrite: {
    hide_header: true,
    hide_filters: false,
    style: {
      theme: "orange"
    }
  }
};

​
Security Considerations

  • Keep your Datazone secret key secure and never expose it in client-side code
  • Generate tokens server-side and pass the complete iframe URL to your frontend
  • Set appropriate content security policies for iframe embedding
  • Consider implementing additional authentication mechanisms if needed

​
Example: Full Server-Side Implementation

Here’s a more complete example using Node.js/Express: 
const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();

// Configuration
const DATAZONE_SITE_URL = "https://comet.datazone.co";
const DATAZONE_SECRET_KEY = process.env.DATAZONE_SECRET_KEY; // Store in environment variables

app.get('/embedded-dashboard', (req, res) => {
  // Get user information from your auth system
  const currentUser = req.user;
  
  // Create the token
  const payload = {
    intelligent_app_id: "685ff04dab58322fd751e040",
    email: currentUser.email,
    variables: {
      department: currentUser.department
    }
  };
  
  const token = jwt.sign(payload, DATAZONE_SECRET_KEY);
  const iframeUrl = DATAZONE_SITE_URL + "/app/embedding/" + token;
  
  // Render your page with the iframe URL
  res.render('dashboard', { iframeUrl });
});

app.listen(3000, () => console.log('Server running on port 3000'));

​
Customizing the Embedded Experience

You can customize how your embedded app appears by overriding configuration settings in the token: 
const payload = {
  intelligent_app_id: "685ff04dab58322fd751e040",
  config_overwrite: {
    hide_header: true,     // Hide the app header for a cleaner embed
    hide_llm: true,        // Hide the Orion AI assistant 
    hide_insights: true,   // Hide the insights panel
    style: {
      theme: "teal"        // Match your application's theme
    }
  }
};

​
Troubleshooting

If your embedded app isn’t loading correctly:
  1. Check that your token is signed correctly with the right secret key
  2. Verify that the Intelligent App ID is correct
  3. Ensure your domain is allowed for embedding (contact Datazone support if needed)
  4. Look for CORS or CSP issues in your browser’s developer tools

​
Next Steps