Simple dashboard embedding

Embed a simple dashboard into your application using the Sumboard SDK.

This code snippet initializes the Sumboard SDK and retrieves a token from your back-end server. Subsequently, it initializes the Sumboard dashboard by providing the token and the dashboard ID to the init() method of the SDK.

import { Zeelix } from '@zeelix/sdk';

const sumboard = new Zeelix();

fetch('<https://your-backend.com/api/token>')
  .then<{ token: string }>((response) => response.json())
  .then(({ token }) => sumboard.init({ token, dashboardId: '<DASHBOARD_ID>' }));

Replace https://your-backend.com/api/token with the URL of your back-end's API endpoint responsible for token generation, and DASHBOARD_ID with the ID of the dashboard you wish to embed.

To display the dashboard within your application, insert a div element with the specified width and height, and assign the id attribute as zeelix:

<div id="zeelix" style="width: 1000px;height: 500px;"></div>

Demo

You can test this code in this stackblitz demo.

INFO

The demo uses a mock API to simulate fetching a token, and is for demonstration purposes only.