Embedding Sisense Playground in React [Linux]

Step-by-Step Guide: 

About this project

This project is a hands-on playground for embedding Sisense analytics into modern web applications. By exploring the four embedding techniques included here, you can learn advanced integration patterns with React and improve the customizations of your own embedded analytics solutions.

The repository includes:

• Examples of embedding full dashboards and individual widgets using all Sisense embedding methods.
• A scalable structure for customizing filters, layouts, and interactivity between Sisense and React components.
• A ready-to-run reference project that you can adapt for your environment.

Note: SisenseJS still works, but the recommended method for new implementations is Compose SDK, as it is actively maintained and provides a modern developer experience.

Web Access Token (WAT)

This project uses Web Access Token (WAT) authentication.

WAT is a Sisense feature that lets you define user permissions inside your own backend logic—including which dashboards the user can view and which actions they can perform.

Some Sisense deployments require your Account Manager to enable WAT on your instance.

This example uses the self-hosted WAT flow. Inside wat-server/, you will find a Node.js server responsible for generating the token. In the default configuration, users are allowed to filter and export the dashboard:

grants: {

  res: [`dashboards/${process.env.VITE_APP_DASHBOARD_ID}`],

  prm: ['filter', 'export'],

}

You can modify these permissions as needed.

Where the Examples Live

All Embedding examples are located in src/routes/pages. Each page contains one embedding method:

iframe: The simplest embedding method. Embeds the full dashboard as-is, with minimal control or customization.

Embed SDK: Still iframe-based but adds events, filter control, and interaction hooks. Good when you need light customization without heavy development. If you need a hard customization, check other options.

SisenseJS: Legacy scripting for dashboard customization. Works for huge customizations, but not recommended for new builds. Use only for maintaining older projects. Prefer Compose SDK.

Compose SDK: A modern SDK with components for most of the recent frameworks and typed data sources. Not all widgets are supported yet, but this is the best option for huge customizations and future-proof development.

Project installation
Before starting, ensure you have:

• Node.js (LTS or current)
• pnpm package manager
• Access to a Sisense Linux instance with WAT enabled

Then run: pnpm install in the root path, this installs all frontend dependencies plus the WAT server dependencies.

Configuring your Web Access Token (WAT)
This project uses self-hosted WAT generation, so you need a public RSA key, which must be stored at: wat-server/wat_key.pub

You can follow the official documentation to set up your WAT.

Getting the Sisense user ID
Your Sisense user ID can be found in two ways:

1. Inside Create / Test Token (in the Sisense Admin area)
2. In the browser console, type: prism.user._id add this value to your .env file later.

Preparing the dashboard

A sample dashboard inside the SampleECommerce.dash file is included at the root of the repository.

1. Start the Sample ECommerce Elasticube.
2. Import the file into your Sisense instance.
3. (Optional) Create your own dashboards.

 **If you change dashboard or widget IDs, update the SisenseJS example, which references specific widget identifiers.

Set up Environment Variables

You can create your .env file by copying the example one: cp .env.example .env. Then configure it (using some of that info you got in previous steps):

#.env
VITE_APP_SISENSE_URL="<https://your-sisense-instance.com>"

VITE_APP_DASHBOARD_ID="your-dashboard-id"

SISENSE_USER_ID="your-sisense-user-id"

SISENSE_KID="your-kid-value"

Ensure that the dashboard ID matches the resource defined in the WAT server:

grants: {

  res: [`dashboards/${process.env.VITE_APP_DASHBOARD_ID}`],

  prm: ['filter', 'export']

}

You may add more permissions as needed.

Running the project

To start development mode, run: pnpm dev. This launches:

Then, visit now you can visit the main runtime in: http://localhost:5173.

And now you can see the dashboard. To switch between implementations, use the sidebar menu.

Important Concepts

Some places in the code you will see a WAT implementation that uses the actual WAT to get a token and to consume the api this concept in something not officially supported, so be careful in using it, check the article.

All those implementations are using React and use some concepts from it, so it's recommended to know about React.

If you want to change the data model or the types, use ComposeSDK CLI.

Conclusion: 

This project provides a complete environment for learning and testing all Sisense embedding methods inside a modern React application. By following the steps above, you can easily configure WAT, run the example dashboards, and use this repository as a solid foundation for your own embedded analytics solutions.

References/Related Content 

• Sisense Article – SisenseJS Demo Using React
  https://docs.sisense.com/main/SisenseLinux/using-web-access-token.htm
• Sisense Documentation – Web Access Token
  https://docs.sisense.com/main/SisenseLinux/using-web-access-token.htm
• Sisense Documentation – CLI
  https://docs.sisense.com/main/SisenseLinux/using-web-access-token.htm
• Sisense Documentation – Embed SDK
  https://docs.sisense.com/main/SisenseLinux/embed-sdk.htm
• Sisense Documentation – Compose SDK
  https://docs.sisense.com/main/SisenseLinux/compose-sdk.htm
• Sisense Academy – Embedding Courses
   https://academy.sisense.com

Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this, please let us know.