Forest Admin Cloud
  • What is Forest Admin?
  • How to Read This Doc?
  • Quick Start
  • Core Concepts
    • Agent
    • Data Sources
    • Collections
    • Views
    • Fields
      • Types
    • Relationships
    • Actions
    • Segments
    • Dashboards
    • Workspaces
    • Layouts
    • Roles & Permissions
    • Projects
    • Organizations
  • Native Modules
    • CRUD
    • Approval Workflows
    • Activity Logs
    • Notes
    • Inbox
  • UI Customization
    • Actions
    • Workspaces
    • Analytics
      • Metabase Integration
  • Code Customization
    • Getting Started
    • Actions
      • Context
      • Response
        • Data refresh
      • Form
        • Widgets
    • Fields
      • Filtering
      • Sorting
      • Validation
    • Relationships
    • Collections
      • Search
    • Charts
  • Security Modules
    • Roles & Permissions
    • SCIM User Provisioning
    • Single Sign On
    • Two-Factor Authentication
    • Auto-logout
    • IP Whitelisting
  • Data sources settings
    • SQL
    • MongoDB
    • Multiple Data Sources
    • Database Credentials
    • Schema Synchronization
  • Best Practices
    • Performance
Powered by GitBook
On this page

Was this helpful?

  1. UI Customization
  2. Analytics

Metabase Integration

Last updated 1 year ago

Was this helpful?

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

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

JWT_TOKEN: Generate this token using , signed with the METABASE_SECRET_KEY provided by Metabase.

https://token.dev