Embed a dashboard in your frontend using the SSO key and token

Now that you have successfully requested a SSO key and token in your backend, it's time to use them in your frontend to securely embed a multi-tenant dashboard!

We have different components available to support your application's frontend framework. The following resources should help in setting up the initial frontend embedding:

• Web component: more information can be found in our developer documentation.
• Angular component: more information can be found in our developer documentation.
• React component: more information can be found in our developer documentation.
• React Native component: more information can be found in our developer documentation.
• Vue.js component: more information can be found in our developer documentation.

After successfully creating your Integration in our UI we provide you with a code snippet for the necessary frontend code for the libraries above. You can simply copy this and fill in the required properties to embed dashboards in your frontend!

The code example below shows the definition of a Luzmo Web Component, with some optional loader color settings specified. All available properties are neatly explained in the Component's readme.

<luzmo-dashboard
   appServer="< https://app.luzmo.com (default) or https://app.us.luzmo.com/ or your VPC-specific address >"
   dashboardId="< a dashboard id >"
   authKey="< SSO key >"
   authToken="< SSO token >"
   loaderBackground="#f1f5f8"
   loaderFontColor="#000000"
   loaderSpinnerBackground="#a5a5a5"
   loaderSpinnerColor="#ff5354">
</luzmo-dashboard>

(Optional) Get all dashboards that are associated with the Integration

Now that the Component has a SSO key and token, you can use the getAccessibleDashboards call to get all dashboardIds (& corresponding slugs) that are associated with the Integration that the SSO user has been granted access to. This is particularly useful to dynamically get the accessible dashboards and provide them as e.g. tabs in your application, a dashboard picker with thumbnails that indicate the dashboard's topic, etc.!

const dashboardElement = document.querySelector('luzmo-dashboard');

dashboardElement.getAccessibleDashboards()
    .then(dashboards => {
        ...
    });

More embedded dashboard features can be found in this Academy article!