Metabase Integration

This is the official documentation of Forest Admin Cloud.

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:

Component Integration

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

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:

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

<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, 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.

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

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