LLM-friendly URL

Quick start

Below you can see an explanation and code snippet to install the appropriate frontend component for your application's framework, and use that component to embed a specific Luzmo dashboard securely .

The full API reference of all the frontend component's available properties, methods, and events can be found here .

Installing the component

All frontend components are available via npm !

Install the web component via npm package manager by running the following command in your command line interface. It's recommended to use npm to ensure you can easily get the latest version of our component when available!

Command Line

Web component

Angular

React

React Native

Vue

npm i @luzmo/embed

In case your application does not support installing one of our components via npm , the Web component's minified javascript library can also be dynamically imported as a script using the code below.

Web component

Angular

React

React Native

Vue

<!--
You can (programmatically) retrieve the latest version via this link:
https://cdn.luzmo.com/js/luzmo-embed/latest-version.json
It is recommended to reference a static version in your application (e.g. "<WEB_COMPONENT_VERSION>"),
and periodically verify and upgrade your application's implementation to
benefit from any improvements in the latest version of the web component.
-->
<script
  defer
  src="https://cdn.luzmo.com/js/luzmo-embed/<WEB_COMPONENT_VERSION>/luzmo-embed.min.js"
  charset="utf-8"
></script>

Embedding a dashboard

:::langSpecific{lang=web type=frontend} 2. Import the component in a JavaScript module.

index.js

Web component

Angular

React

React Native

Vue

import '@luzmo/embed';

You can also import the component in an HTML page.

index.html

Web component

Angular

React

React Native

Vue

<script type="module">
  import './node_modules/@luzmo/embed/index.js';
</script>
<!-- OR -->
<script
  type="module"
  src="./node_modules/@luzmo/embed/index.js">
</script>

Add the Luzmo component to your HTML page.

index.html

Web component

Angular

React

React Native

Vue

<!--
Clients on our US multi-tenant application environment,
or a dedicated instance on a specific VPC, should specify:
- appServer="https://app.us.luzmo.com/" (or your VPC-specific address)
- apiHost="https://api.us.luzmo.com/" (or your VPC-specific address)
-->
<luzmo-embed-dashboard
  appServer="< Luzmo App server, defaults to https://app.luzmo.com >"
  apiHost="< Luzmo API server, defaults to https://api.luzmo.com >"
  authKey="< Embed authorization key >"
  authToken="< Embed authorization token >"
  dashboardId="< dashboard id you want to embed >"
></luzmo-embed-dashboard>

:::

:::langSpecific{lang=angular type=frontend} 2. Import the NgxLuzmoDashboardModule in your NgModule

app.module.ts

Web component

Angular

React

React Native

Vue

import { NgxLuzmoDashboardModule } from '@luzmo/ngx-embed';

@NgModule({
  // ...
  imports: [
    // ...,
    NgxLuzmoDashboardModule,
    // ...
  ],
  // ...
})

Add the Luzmo component in your Angular page

app.component.html

Web component

Angular

React

React Native

Vue

/*
Clients on our US multi-tenant application environment,
or a dedicated instance on a specific VPC, should specify:
- [appServer]="'https://app.us.luzmo.com/'" (or your VPC-specific address)
- [apiHost]="'https://api.us.luzmo.com/'" (or your VPC-specific address)
*/
<luzmo-dashboard
  [appServer]="'< Luzmo App server, defaults to https://app.luzmo.com >'"
  [apiHost]="'< Luzmo API server, defaults to https://api.luzmo.com >'"
  [authKey]="'< Embed authorization key >'"
  [authToken]="'< Embed authorization token >'"
  [dashboardId]="'< dashboard id you want to embed >'"
></luzmo-dashboard>

:::

:::langSpecific{lang=reactnative type=frontend} 2. Minimal required parameters to securely embed a dashboard in a React Native application

Dashboard.js

Web component

Angular

React

React Native

Vue

import LuzmoDashboardComponent from '@luzmo/react-native-embed';
// ...

  function LuzmoWrapper() {
    // ...

    /*
    Clients on our US multi-tenant application environment,
    or a dedicated instance on a specific VPC, should specify:
    - appServer="https://app.us.luzmo.com/" (or your VPC-specific address)
    - apiHost="https://api.us.luzmo.com/" (or your VPC-specific address)
    */
    return (
      <LuzmoDashboardComponent
        ref={ref}
        appServer="< Luzmo App server, defaults to https://app.luzmo.com >"
        apiHost="< Luzmo API server, defaults to https://api.luzmo.com >"
        authKey="< Embed authorization key >"
        authToken="< Embed authorization token >"
        dashboardId="< dashboard id you want to embed >"
      ></LuzmoDashboardComponent>
    );
  }

:::

:::langSpecific{lang=vue type=frontend} 2. Minimal required parameters to securely embed a dashboard in a Vue 3 application

main.js

Web component

Angular

React

React Native

Vue

import { createApp } from 'vue';
import App from './App.vue';
import VueLuzmoDashboard from '@luzmo/vue-embed';
...

const app = createApp(App);
...

// Defines the component at app level
app.use(VueLuzmoDashboard);
...

app.mount('#app');

You can also use our Vue component in your Vue 2 application

main.js

Web component

Angular

React

React Native

Vue

import Vue from 'vue';
import App from './App.vue';
import VueLuzmoDashboard from '@luzmo/vue-embed/vue2';
// ...

Vue.use(VueLuzmoDashboard);
// ...

new Vue({
  render: (h) => h(App),
}).$mount('#app');

In your HTML template of your Vue application

Dashboard.vue

Web component

Angular

React

React Native

Vue

<template>
  ...
  <!--
  Clients on our US multi-tenant application environment,
  or a dedicated instance on a specific VPC, should specify:
  - :appServer="https://app.us.luzmo.com/" (or your VPC-specific address)
  - :apiHost="https://api.us.luzmo.com/" (or your VPC-specific address)
   -->
  <luzmo-dashboard
    ref="dashboardInstance"
    appServer="< Luzmo App server, defaults to https://app.luzmo.com >"
    apiHost="< Luzmo API server, defaults to https://api.luzmo.com >"
    authKey="< Embed authorization key >"
    authToken="< Embed authorization token >"
  ></luzmo-dashboard>
</template>

:::

Component properties

The only necessary properties that need to be specified in order to embed a dashboard securely , are:

authKey - an Embed Authorization id
authToken - an Embed Authorization token
dashboardId - the UUID of a Luzmo dashboard to embed

The Embed key-token pair should be requested from your application's backend each time a specific end-user of your application wants to see an embedded Luzmo dashboard (see the step 'generate an Embed token' in the 'Dashboard embedding' guide ). After receiving the temporary token from your backend, it should be passed along to the frontend component before specifying the dashboardId property, to avoid the dashboard trying to load without an authorization token!

ℹ️

Depending on the locality of the Luzmo application where your organization resides, it might be necessary to first specify the appServer and apiHost properties! Customers on e.g. our US multi-tenant application environment should specify ' https://app.us.luzmo.com ' as appServer , and ' https://api.us.luzmo.com ' as apiHost .

Parameter	Description
appServer string	Tenancy of Luzmo app to connect to. Defaults to 'https://app.luzmo.com/'. For US multi-tenant application, set `appServer` to 'https://app.us.luzmo.com/'. For dedicated VPC environments, you should point towards your VPC-specific address.
apiHost string	Tenancy of Luzmo API to connect to. Defaults to 'https://api.luzmo.com/'. For US multi-tenant application, set `apiHost` to 'https://api.us.luzmo.com/'. For dedicated VPC environments, you should point towards your VPC-specific address.
authKey uuid	The authorization key (i.e. "id") from the response of the authorization request in your backend.
authToken string	The authorization token from the response of the authorization request in your backend.
dashboardId uuid	This is the id of the dashboard that you want to embed.

Did this page help you?

Yes