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.

<!-- 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>

Usage

Begin by creating an API key by going to https://dashboard.onvo.ai/api-keys (opens in a new tab), 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.

<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>
 

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