# Metabase Integration

{% hint style="success" %}
This is the official documentation of Forest Admin Cloud.
{% endhint %}

Embedding your Metabase dashboard into Forest Admin is a seamless process. To get started, navigate to your Forest Admin dashboard and ensure that the layout editor is enabled. Create a new chart of type "Smart Chart." Now, follow the instructions below for a smooth integration:

<figure><img src="/files/2lw0eLaPxNV2ryf4tjdI" alt=""><figcaption></figcaption></figure>

#### Component Integration

No custom JavaScript is needed for Metabase integration. Use the default component code:

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

export default class extends Component {}
```

#### Style Customization

You can enhance the visual appeal of your smart chart with CSS customization:

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

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

Ensure accurate configuration by replacing placeholders:

* **METABASE\_SITE\_URL:** Set this to the hostname of your Metabase instance (e.g., `myanalytics.mycompany.com`).
* **JWT\_TOKEN:** Generate this token using [https://token.dev](https://token.dev/), signed with the `METABASE_SECRET_KEY` provided by Metabase.
* **METABASE\_DASHBOARD\_ID:** Replace this with the correct dashboard ID provided by Metabase in the following format:\
  \
  You must replace `METABASE_DASHBOARD_ID` by the the correct dashboard ID provided by Metabase.

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

Your Metabase dashboard is now seamlessly integrated into Forest Admin. Enjoy a unified experience with these simple instructions.

<figure><img src="/files/rXG6J4KNLXaukXvWDyq0" 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/cloud/ui-customization/analytics/metabase-integration.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.