Embedded analytics SDK - collections

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

CollectionBrowser props

Example embedding code with CollectionBrowser

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);
  };

  // Define the collection item types you want to be visible
  const visibleEntityTypes = ["dashboard", "question", "collection"];

  return (
    <CollectionBrowser
      collectionId={collectionId}
      onClick={handleItemClick}
      pageSize={10}
      visibleEntityTypes={visibleEntityTypes}
    />
  );
}

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 saveToCollectionId to the collection ID you want people to save items to.

For more options, see Question props.