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

• Embed a dashboard
• Dashboard component reference, for <metabase-dashboard> attributes and SDK props

Question

• Embed a chart
• Embed a query editor
• Question component reference, for <metabase-question> attributes and SDK props

Browser

• Embed a collection browser
• Browser component reference, for <metabase-browser> attributes and SDK props

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>

If you’re using the SDK, you can use either the MetabotQuestion component or the useMetabot hook for a custom UI.

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.