> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usedatabrain.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vanilla JS

## @databrainhq/plugin

> Databrain app ui web component plugin.

<Card title="npm: @databrainhq/plugin" icon="box" href="https://www.npmjs.com/package/@databrainhq/plugin">
  v0.15.135-uat
</Card>

<Card title="Code Style: StandardJS" icon="check" href="https://standardjs.com/">
  Enforced using StandardJS styleguide.
</Card>

## Github Repo Link

[https://github.com/databrainhq/dbn-demos-updated/tree/main/dbn-demo-vanilla](https://github.com/databrainhq/dbn-demos-updated/tree/main/dbn-demo-vanilla)

## Usage

In your index.html file, add the following script

```html theme={"dark"}
<script src="https://unpkg.com/@databrainhq/plugin@latest"></script>
```

**Note:** If you want to use a specific version, add the version in place of latest. For example

```html theme={"dark"}
<script src="https://unpkg.com/@databrainhq/plugin@0.15.49"></script>
```

**If you get process error in your console, add the below script above your cdn script**

```html theme={"dark"}
<script>
  window.process = { env: {} };
</script>
```

Use global document object to create components. Add the below script in your script file like main.js or inside script tags.

### Integrating Dashboard:

```js theme={"dark"}
function initDashboard() {
  const url = new URL(location.href);
  const token = url.searchParams.get("token") || "";
  const dashboardId = url.searchParams.get("dashboardId") || "";

  // Create the dashboard element
  const dashboardElement = document.createElement('dbn-dashboard');

  // Set attributes
  if (token) {
    dashboardElement.setAttribute('token', token);
  }

  if (dashboardId) {
    dashboardElement.setAttribute('dashboard-id', dashboardId);
  }

  // Append the dashboard to the body
  document.body.appendChild(dashboardElement);
}

// Initialize the dashboard when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', initDashboard);
```

### Integrating Metric

```js theme={"dark"}
function initMetric() {
  const url = new URL(location.href);
  const token = url.searchParams.get("token") || "";
  const dashboardId = url.searchParams.get("metricId") || "";

  // Create the metric element
  const metricElement = document.createElement('dbn-metric');

  // Set attributes
  if (token) {
    metricElement.setAttribute('token', token);
  }

  if (dashboardId) {
    metricElement.setAttribute('metric-id', dashboardId);
  }

  // Append the metric to the body
  document.body.appendChild(metricElement);
}

// Initialize the metric when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', initMetric);
```

**Note:** If you don't want to use cdn link, you can install the below npm package.

```bash theme={"dark"}
npm i @databrainhq/plugin
```

Add import statement like below in your main.js file.

```js theme={"dark"}
import "@databrainhq/plugin/web";
```