Modular embedding components

There are different components you can embed, each with various options.

While you can use component parameters to show or hide parts of the embedded component, these parameters are not a substitute for permissions. Even if you hide stuff, people could still grab their token from the frontend and use it to query the Metabase API.

This page covers what you can embed. For theming your embeds, see Appearance.

Depending on the framework you’re using, you may need to stringify attributes before passing them to the embedded components.

Dashboard

To render a dashboard:

<metabase-dashboard dashboard-id="1" with-title="true" with-downloads="false">
</metabase-dashboard>

Attributes

For all modular embeds, you can also set a locale in your page-level configuration to translate embedded content, including content from translation dictionaries.

If you surround your attribute value with double quotes, make sure to use single quotes:

<metabase-dashboard
  dashboard-id="1"
  initial-parameters="{ 'productId': '42' }"
></metabase-dashboard>

If you surround your attribute value with double quotes, make sure to use single quotes:

<metabase-dashboard
  dashboard-id="1"
  hidden-parameters="['productId']"
></metabase-dashboard>

Resizing dashboards to fit their content

The <metabase-dashboard> web component automatically resizes to fit its content. No additional configuration is needed.

Question

To render a question (chart):

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

You can also use the question component to create new questions:

• question-id="new" — opens the visual query builder.
• question-id="new-native" — opens the SQL editor.

For example, to embed the SQL editor:

<metabase-question question-id="new-native"></metabase-question>

Attributes

Browser

Browser component is only available for authenticated modular embeds. It’s unavailable for Guest embeds.

To render a collection browser so people can navigate a collection and open dashboards or questions:

<metabase-browser
  initial-collection="14"
  read-only="false"
  collection-entity-types="['collection', 'dashboard']"
>
</metabase-browser>

Attributes

AI chat

AI chat component is only available for authenticated modular embeds. It’s unavailable for Guest embeds.

To render the AI chat interface:

<metabase-metabot></metabase-metabot>

Attributes

Customizing loader and error components

If you’re using the modular embedding SDK, you can provide your own components for loading and error states by specifying loaderComponent and errorComponent as props to MetabaseProvider.

import {
  MetabaseProvider,
  StaticDashboard,
} from "@metabase/embedding-sdk-react";

<MetabaseProvider
  loaderComponent={() => <div>Analytics is loading...</div>}
  errorComponent={({ type, message, onClose }) => {
    switch (type) {
      case "fixed":
        return (
          <div style={{ position: "fixed", left: 0, right: 0, bottom: 0 }}>
            There was an error: {message}. <span onClick={onClose}>X</span>
          </div>
        );
      case "relative":
      default:
        return <div>There was an error: {message}</div>;
    }
  }}
>
  <StaticDashboard dashboardId={1} />
</MetabaseProvider>

Further reading

• Appearance
• Modular embedding SDK.