To embed a DataBrain dashboard into your application, we offer a straightforward approach using the DataBrain npm package. Simply install this package, and then bring it into your application to access a range of components. These components enable you to display full dashboards or specific metrics as needed. We’ve got you covered with a step-by-step guide here to help you integrate DataBrain dashboards into your user interface seamlessly.

​
Step-by-Step Guide to Embed DataBrain Dashboard

1

Install DataBrain NPM Package

npm install @databrainhq/plugin
2

Import the Plugin

import '@databrainhq/plugin/web';
3

Use the Components in Your Application

For embedding a Dashboard
<dbn-dashboard token="token" dashboard-id="dashboardId" />
orFor embedding a Metric Card
<dbn-metric token="token" metric-id="metricId" />
TokenThe token should be a guest token, fetched from your backend based on the current user’s login information. You can see more about it here.Here is an example with sample token and dashboardId that you can use in your frontend app to get started without a backend.
<dbn-dashboard token="3affda8b-7bd4-4a88-9687-105a94cfffab" dashboard-id="ex-demo" />

​
Additional Resources and Customization

  • Customizing the Look and Feel:
    • For further customizations related to the appearance of the embedded elements, refer here.
  • Understanding the Overall Architecture:
    • For a comprehensive understanding of the overarching architecture and how embedding fits into it, refer here.
With these steps, embedding DataBrain dashboards or metrics into your application can be done efficiently, offering a dynamic and insightful data visualization component to your users.