About this documentation

<aside> 🚧

This documentation describes a feature that is currently actively being developed. You should not use this feature in production. We might introduce breaking changes or even decide to not release it.

</aside>

<aside> ♻️

We are looking forward to hearing your feedback! Is there anything that feels particularly great? Anything you find useless or confusing? Is there anything missing?

</aside>

Introduction

Unlike interactive embedding, with this feature you don't work with iframes directly. Instead, we've created a small JS library, which abstracts you from it and which you can use to configure the experience. The idea is that later on it will also allow for more advanced functionality, such as triggering events.

This functionality is built on top of our React Embedding SDK, so you can benefit from some of its features, such as theming.

Quickstart Guide

<aside> ⚠️

Requirements:

The feature should have been enabled on your subscription
Make sure you are on the latest Metabase 56 </aside>

Step 1: Enable Embedding SDK

Enable the embedding SDK under Admin Settings → Embedding.

You can optionally enable authorized origins on certain domains, but since we'll be testing this with API keys first, there's no need to do this now.

Step 2: Load the script

Replace http://localhost:3000 with your Metabase URL. Note the async attribute in the script tag.

<script src="<http://localhost:3000/app/embed.js>" async></script>

Step 3: Create an API key

Navigate to Admin Settings → Authentication → API keys and create a new API key

Step 4: Configure and instantiate the embed

Set instanceUrl to point to your Metabase URL

Set apiKey to the API key you just created. Note that API keys only work when testing on localhost.

<script>
  function defineMetabaseConfig(args) {
    window.metabaseConfig = args;
  }
</script> 

<script>
  defineMetabaseConfig({
    instanceUrl: "<http://localhost:3000>",
    apiKey: "YOUR-API-KEY-HERE",
  });
</script>

<metabase-dashboard dashboard-id="1"></metabase-dashboard>