Web component library

The web components package can be used to display the list of dashboards available to a user or single dashboard. The components are also completely customizable.

Installation

In your frontend environment, install the @onvo-ai/react package, this lets you display the list of dashboards and individual dashboards.

jsdelivr


<!-- Load the latest version (RECOMMENDED) -->
<script src="http://cdn.jsdelivr.net/npm/@onvo-ai/web-components"></script>
 
<!-- Load a specific version -->
<script src="http://cdn.jsdelivr.net/npm/@onvo-ai/web-components@0.0.16"></script>

npm


npm install @onvo-ai/react

yarn


yarn add @onvo-ai/react

npm


pnpm install @onvo-ai/react

bun


bun install @onvo-ai/react

Usage

Begin by creating an API key by going to https://dashboard.onvo.ai/api-keys , filling in a name for your API key and clicking Generate. Use this token to setup a backend endpoint that can fetch the user access token from a secure environment.

index.html


<script src="http://cdn.jsdelivr.net/npm/@onvo-ai/web-components"></script>
<script>
  function clickHandler(dashboard) {
    console.log("Dashboard clicked");
    console.log(dashboard);
  }
</script>
 
<onvo-dashboard-list
  base-url="https://dashboard.onvo.ai"
  list-variant="list|grid"
  on-click-item="clickHandler"
  num-columns="3"
  user-token="..."
></onvo-dashboard-list>
 
<onvo-dashboard
  base-url="https://dashboard.onvo.ai"
  user-token="..."
  dashboard-id="31f4f9ec-3881-448a-b3e7-02485290ca9f"
></onvo-dashboard>
 
<onvo-copilot
  base-url="https://dashboard.onvo.ai"
  user-token="..."
  icon-variant="none|small|large"
  dashboard-id="31f4f9ec-3881-448a-b3e7-02485290ca9f"
  copilot-variant="fullscreen|copilot"
></onvo-copilot>

backend.js


import Onvo from "@onvo-ai/js";
import dotenv from "dotenv";
import express from "express";
 
dotenv.config();
let onvo = new Onvo(process.env.API_KEY);
 
const app = express();
 
app.use(express.static("public"));
 
app.get("/api/get-token/:id", async function (req, res) {
  try {
    let data = await onvo.embed_user(req.params.id).getAccessToken();
    res.send(JSON.stringify(data));
  } catch (e) {
    console.log(e);
  }
});

.env


API_KEY=eyJhbGciOiJIUzI1NiJ9.e...

Library Reference

Wrapper

DashboardList

The Dashboard list provides a list of all the dashboards an embed user has access to. You can render it as a list or as a grid and you get a callback when a dashboard is clicked.


<script>
  function clickHandler(dashboard){
    console.log("Dashboard clicked");
    console.log(dashboard);
  }
</script>
 
<onvo-dashboard-list
  base-url="https://dashboard.onvo.ai"
  list-variant="list|grid"
  on-click-item="clickHandler"
  num-columns="3"
  user-token="..."
></onvo-dashboard-list>

Dashboard

This component is used to show a single dashboard. By itself, this component does not render anything and is merely a wrapper for other components listed below.


<onvo-dashboard
  base-url="https://dashboard.onvo.ai"
  user-token="..."
  dashboard-id="31f4f9ec-3881-448a-b3e7-02485290ca9f"
></onvo-dashboard>

Copilot

This component allows a user to ask questions to the dashboard and create new widgets.


<onvo-copilot
  base-url="https://dashboard.onvo.ai"
  user-token="..."
  icon-variant="none|small|large"
  dashboard-id="31f4f9ec-3881-448a-b3e7-02485290ca9f"
  copilot-variant="fullscreen|copilot"
></onvo-copilot>
 
<script>
  // Opening the copilot component
  Onvo.setCopilotOpen(true);
 
  // Closing the copilot component
  Onvo.setCopilotOpen(false);
</script>

Links

Github

https://github.com/onvo-ai/sdks/tree/main/react

Go to Github

NPM

https://www.npmjs.com/package/@onvo-ai/react

Go to NPM