# Metabase

{% embed url="<https://www.youtube.com/watch?v=5gh5s8Spb0E>" %}

All you have to do to embed your Metabase dashboard into Forest Admin is to create a new chart on Forest Admin and select the **Chart type**: "Smart Chart"

<figure><img src="/files/aTmKiR44VxklEK09IurB" alt=""><figcaption></figcaption></figure>

Then, click on "Edit in builder" to start creating your Smart Chart.

**Component**

No custom javascript is required to integrate Metabase, so you can leave the Component code by default:

```javascript
import Component from '@glimmer/component';
import { loadExternalStyle, loadExternalJavascript } from 'client/utils/smart-view-utils';

export default class extends Component {}
```

**Style**

To create a visually attractive look, you can alter the CSS to fit your preferences, but this style should provide a quite good design experience.

```css
.c-smart-chart {
  height: 100%;
  width: 100%;
}

.c-smart-chart__content {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  color: var(--color-beta-on-surface_medium);
}

.c-smart-chart__metabase {
  flex-grow: 1;
  border: none;
  margin: 0;
  padding: 0;
}
```

**Template**

The integration is done using an `<iframe>` to be included in your template. The `src` tag must be modified to specify the correct `METABASE_SITE_URL` and `JWT_TOKEN`.

```html
<div class="c-smart-chart">
  <div class="c-smart-chart__content">
    <iframe src="https://METABASE_SITE_URL/embed/dashboard/JWT_TOKEN#theme=transparent&bordered=false&titled=true" frameborder="0" allowtransparency class="c-smart-chart__metabase">
    </iframe>
  </div>
</div>
```

**`METABASE_SITE_URL`**

This corresponds to the hostname of your Metabase instance. For example, if your Metabase instance is accessible through *<https://myanalytics.mycompany.com>*, then you must set your `METABASE_SITE_URL` to `myanalytics.mycompany.com`.

**`JWT_TOKEN`**

The JWT\_TOKEN ensures valid authentication when retrieving the Metabase dashboard. The simplest way to do this is to generate it online using [https://token.dev](https://token.dev/). To sign the JWT token, you need to use the `METABASE_SECRET_KEY` provided by Metabase.

You must replace `METABASE_DASHBOARD_ID` by the the correct dashboard ID provided by Metabase.

*JWT Payload:*

```json
{
  "resource": { "dashboard": METABASE_DASHBOARD_ID },
  "params": {}
}
```

And voilà! Your Metabase dashboard is now fully integrated into Forest Admin 💚.\\

<figure><img src="/files/k7jxrxiTUW4u1QOhlSAF" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.forestadmin.com/user-guide/integrations/metabase.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.