Embed dashboards and/or the dashboard editor in your frontend

Having successfully requested an embed key and token in your backend, you can use them in your frontend to grant your users access to view and/or edit embedded dashboards within your application!

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.

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, and you can even create an embed token to quickly test your frontend implementation!

For your production setup, you should fill the authKey & authToken with the response of the call you did in your backend to create the embed token.

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="< embed key >"
   authToken="< embed token >"
   loaderBackground="#f1f5f8"
   loaderFontColor="#000000"
   loaderSpinnerBackground="#a5a5a5"
   loaderSpinnerColor="#ff5354">
</luzmo-dashboard>

Enabling the dashboard editor

After setting up the basic frontend embedding code, you can ensure (certain) dashboards can be opened in a specific edit mode. This is where the editMode property comes into play! Below, you can find a small flow diagram to facilitate setting the right edit mode, and after that, a short explanation of each edit mode is given, together with the steps required to load / switch to it!

Note you need an Elite plan or higher to be able to embed the dashboard editor.

For more info on the different editModes, how to load a dashboard in them and switch between editModes, see the next article.