Modular embedding components

Modular embedding gives you a handful of components you can drop into your app, with either web components or the React SDK. This page maps out the docs for each one.

While you can use attributes and props to show or hide parts of an embedded component, they’re 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.

Dashboard

Embed a dashboard view-only, interactive, or editable, and let people create dashboards from your app.

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

Question

Embed a single chart, or the query builder and SQL editor so people can build questions from scratch.

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

Browser

Embed a browsable collection, so people can find and open dashboards and questions themselves.

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

AI chat

Embed an AI chat, so people can ask questions of their data in natural language.

• Embed an AI chat, for the <metabase-metabot> attributes, the MetabotQuestion props, and the useMetabot hook

Things you can only do with the React SDK

Web components cover the components above. A few features are React-only, because they take React components or hooks that an HTML attribute can’t carry. For those, use the Modular embedding SDK.

• Plugins, to customize component menus and click actions
• Actions, to run Metabase actions from your app with the useAction hook
• Custom question layouts, to lay out a question yourself with namespaced InteractiveQuestion components
• Customize loading, error, and empty states, to swap in your own loading and error components, and your own no-results image

Further reading

• Appearance
• Modular embedding SDK config, for the MetabaseProvider props
• Modular embedding parameters
• Translating embeds
• Authentication
• Modular embedding SDK