# 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="https://3681914749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwfMeGo4DK4ZOTYwApD1a%2Fuploads%2Fu7e6tgLKUNFk9675oyfm%2Fimage.png?alt=media&#x26;token=534cbf20-3b78-4afe-8446-d87ccf1f2eff" 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="https://3681914749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwfMeGo4DK4ZOTYwApD1a%2Fuploads%2FOgwvPtpGNvJ4v4wwRezp%2Fimage.png?alt=media&#x26;token=34ea8519-62ea-49b1-acad-a14e5f887bd4" alt=""><figcaption></figcaption></figure>