Embedded analytics SDK - collections

Embedding a collection browser

You can embed Metabase’s collection browser so that people can explore items in your Metabase from your application.

CollectionBrowser

API Reference

• Component
• Props

Example

import React from "react";
import { CollectionBrowser } from "@metabase/embedding-sdk-react";

export default function App() {
  const collectionId = 123; // This is the collection ID you want to browse
  const handleItemClick = item => {
    console.log("Clicked item:", item);
  };

  return (
    <CollectionBrowser
      collectionId={collectionId}
      onClick={handleItemClick}
      pageSize={10}
      // Define the collection item types you want to be visible
      visibleEntityTypes={["dashboard", "question", "collection"]}
    />
  );
}

Props

Hide the collection picker and hard code the collection you want people to save stuff to

With static questions, you set a specific collection as the collection people can save items to, so that they don’t have bother picking a collection. To hard-code a collection:

1. Set isSaveEnabled to true.
2. Set targetCollection to the collection ID you want people to save items to.

For more options, see Question props.