Embedded analytics SDK - plugins

The Metabase Embedded analytics SDK supports plugins to customize the behavior of components. These plugins can be used in a global context or on a per-component basis.

Plugin scope

Global plugins

To use a plugin globally, add the plugin to the MetabaseProvider’s pluginsConfig prop:

<MetabaseProvider
  authConfig={authConfig}
  theme={theme}
  pluginsConfig={{
    mapQuestionClickActions: () => [], // Add your custom actions here
  }}
>
  {children}
</MetabaseProvider>

Component plugins

To use a plugin on a per-component basis, pass the plugin as a prop to the component:

<InteractiveQuestion
  questionId={1}
  plugins={{
    mapQuestionClickActions: () => [],
  }}
/>

See docs for specific components:

• Interactive question plugins
• Dashboard plugins

Global plugins

mapQuestionClickActions

The plugin mapQuestionClickActions lets you to customize what happens when people click on a data point on a dashboard or chart. mapQuestionClickActions can be used globally, or on component level.

See mapQuestionClickActions plugin for more information and examples.

handleLink

To customize what happens when people click a link in your embedded questions and dashboards, use the global plugin handleLink:

const plugins = {
  handleLink: (urlString: string) => {
    const url = new URL(urlString, window.location.origin);
    const isInternal = url.origin === window.location.origin;
    if (isInternal) {
      // Handle internal navigation (e.g., with your router)
      console.log("Navigate to:", url.pathname + url.search + url.hash);
      return { handled: true }; // prevent default navigation
    }
    return { handled: false }; // let the SDK do the default behavior
  },
};

return (
  <MetabaseProvider authConfig={authConfig} pluginsConfig={plugins}>
    <InteractiveDashboard dashboardId={1} />
  </MetabaseProvider>
);

The plugin handleLink can only be used globally on provider level.

getNoDataIllustration and getNoObjectIllustration

By default, Metabase displays a sailboat image when a query returns no results. To use a different image, you can use getNoDataIllustration and getNoObjectIllustration plugins which can accept a custom base64-encoded image:

const img_base64 = "..."; // base64-encoded image

const plugins = {
  getNoDataIllustration: () => img_base64,
  getNoObjectIllustration: () => img_base64,
};

return (
  <MetabaseProvider authConfig={authConfig} pluginsConfig={plugins}>
    <InteractiveDashboard dashboardId={1} />
  </MetabaseProvider>
);

The plugins getNoDataIllustration and getNoObjectIllustration can only be used globally on provider level.

Further reading

• Interactive question plugins
• Dashboard plugins