The synergy between Forest Admin and Metabase is perfect. While Forest Admin provides an easy way to manage data, Metabase enables you to analyze and extract insights from that data.

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"

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


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

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

export default class extends Component {}


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.

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


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


This corresponds to the hostname of your Metabase instance. For example, if your Metabase instance is accessible through, then you must set your METABASE_SITE_URL to


The JWT_TOKEN ensures valid authentication when retrieving the Metabase dashboard. The simplest way to do this is to generate it online using 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:

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

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

Last updated