diff --git a/docs/embedding/sdk/appearance.md b/docs/embedding/sdk/appearance.md
index b433d8abc4940a18af709d57f067834f3a2327d0..ff0069412c9e640d53982b2c4b5af5eca4f23533 100644
--- a/docs/embedding/sdk/appearance.md
+++ b/docs/embedding/sdk/appearance.md
@@ -13,7 +13,9 @@ You can style your embedded Metabase components with a theme.
Here's an example that includes the various styling options available:
```js
-const theme = {
+import {defineEmbeddingSdkTheme} from "@metabase/embedding-sdk-react";
+
+const theme = defineEmbeddingSdkTheme({
// Specify a font to use from the set of fonts supported by Metabase.
// You can set the font to "Custom" to use the custom font
// configured in your Metabase instance.
@@ -169,7 +171,7 @@ const theme = {
zIndex: 4,
},
},
-};
+});
```
### Customizing loader and error components
diff --git a/docs/embedding/sdk/collections.md b/docs/embedding/sdk/collections.md
index de25e2167c66ae6c74d332d0ea2236f53ada6a2b..adbc21227d316ae588f1852533fb09ec583016f6 100644
--- a/docs/embedding/sdk/collections.md
+++ b/docs/embedding/sdk/collections.md
@@ -44,3 +44,12 @@ export default function App() {
);
}
```
+
+## 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](./questions.md#question-props).
diff --git a/docs/embedding/sdk/questions.md b/docs/embedding/sdk/questions.md
index 7417cd494649f42555e0d3f566c2d691a9cd00ee..56d4b2cb204cfa58aff0525c0f33348f59e79f21 100644
--- a/docs/embedding/sdk/questions.md
+++ b/docs/embedding/sdk/questions.md
@@ -10,9 +10,9 @@ title: "Embedded analytics SDK - components"
There are different ways you can embed questions:
-- [`StaticQuestion`](#embedding-a-static-question). Embeds a chart. Clicking on the chart doesn't do anything.
-- [`InteractiveQuestion`](#embedding-an-interactive-question). Clicking on the chart gives you the drill-through menu.
-- [`CreateQuestion`]()
+- [Static question](#embedding-a-static-question). Embeds a chart. Clicking on the chart doesn't do anything.
+- [Interactive question](#embedding-an-interactive-question). Clicking on the chart gives you the drill-through menu.
+- [Query builder](#embedding-the-query-builder). Embeds the graphical query builder without a pre-defined query.
## Embedding a static question
@@ -68,19 +68,19 @@ export default function App() {
## Question props
-| Prop | Type | Description |
-| ------------------ | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| questionId | `number \| string` | (required) The ID of the question. This is either:<br>- The numerical ID when accessing a question link, e.g., `http://localhost:3000/question/1-my-question` where the ID is `1`.<br>- The `entity_id` key of the question object. You can find a question's entity ID in the info panel when viewing a question. |
-| plugins | `{ mapQuestionClickActions: Function } \| null` | Additional mapper function to override or add drill-down menu. |
-| height | `number \| string` | (optional) A number or string specifying a CSS size value that specifies the height of the component |
-| entityTypeFilter | `("table" \| "question" \| "model" \| "metric")[]` | (optional) An array that specifies which entity types are available in the data picker |
-| isSaveEnabled | `boolean` | (optional) Whether people can save the question. |
-| withResetButton | `boolean` | (optional, default: `true`) Determines whether a reset button is displayed. Only relevant when using the default layout |
-| withTitle | `boolean` | (optional, default: `false`) Determines whether the question title is displayed. Only relevant when using the default layout. |
-| customTitle | `string \| undefined` | (optional) Allows a custom title to be displayed instead of the default question title. Only relevant when using the default layout. |
-| onBeforeSave | `() => void` | (optional) A callback function that triggers before saving. Only relevant when `isSaveEnabled = true`. |
-| onSave | `() => void` | (optional) A callback function that triggers when a user saves the question. Only relevant when `isSaveEnabled = true`. |
-| saveToCollectionId | `number` | (optional) The target collection to save the question to. This will hide the collection picker from the save modal. Only applicable to static questions. |
+| Prop | Type | Description |
+| ------------------ | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| questionId | number or string | (required) The ID of the question. This is either:<br>- The numerical ID when accessing a question link, e.g., `http://localhost:3000/question/1-my-question` where the ID is `1`.<br>- The `entity_id` key of the question object. You can find a question's entity ID in the info panel when viewing a question. |
+| plugins | `{ mapQuestionClickActions: Function }` or null | Additional mapper function to override or add drill-down menu. |
+| height | number or string | (optional) A number or string specifying a CSS size value that specifies the height of the component |
+| entityTypeFilter | string array; options include "table", "question", "model", "metric" | (optional) An array that specifies which entity types are available in the data picker |
+| isSaveEnabled | boolean | (optional) Whether people can save the question. |
+| withResetButton | boolean | (optional, default: `true`) Determines whether a reset button is displayed. Only relevant when using the default layout |
+| withTitle | boolean | (optional, default: `false`) Determines whether the question title is displayed. Only relevant when using the default layout. |
+| customTitle | string or undefined | (optional) Allows a custom title to be displayed instead of the default question title. Only relevant when using the default layout. |
+| onBeforeSave | `() => void` | (optional) A callback function that triggers before saving. Only relevant when `isSaveEnabled = true`. |
+| onSave | `() => void` | (optional) A callback function that triggers when a user saves the question. Only relevant when `isSaveEnabled = true`. |
+| saveToCollectionId | number | (optional) The target collection to save the question to. This will hide the collection picker from the save modal. Only applicable to static questions. |
## Customizing interactive questions
@@ -137,7 +137,7 @@ To customize the layout, use namespaced components within the `InteractiveQuesti
These components are available via the `InteractiveQuestion` namespace (e.g., `<InteractiveQuestion.Filter />`).
| Component | Info |
-|-------------------------|------------------------------------------------------------------------------------------------------------------------------|
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `BackButton` | The back button, which provides `back` functionality for the InteractiveDashboard |
| `FilterBar` | The row of badges that contains the current filters that are applied to the question |
| `Filter` | The Filter pane containing all possible filters |
@@ -154,10 +154,11 @@ These components are available via the `InteractiveQuestion` namespace (e.g., `<
## Interactive question plugins
+You can use plugins to add custom functionality to your questions.
+
### `mapQuestionClickActions`
-This plugin allows you to add custom actions to
-the click-through menu of an interactive question. You can add and
+This plugin allows you to add custom actions to the click-through menu of an interactive question. You can add and
customize the appearance and behavior of the custom actions.
```typescript
@@ -216,39 +217,39 @@ return (
);
```
-## Creating a question
+## Embedding an editable interactive question
-With the `CreateQuestion` component, you can create a new question from scratch with Metabase's query builder.
+You can edit an existing question using the query builder by passing the `isSaveEnabled` prop on the `InteractiveQuestion` component.
```tsx
import React from "react";
-import {MetabaseProvider, CreateQuestion} from "@metabase/embedding-sdk-react";
+import {MetabaseProvider, InteractiveQuestion} from "@metabase/embedding-sdk-react";
const config = {...}
export default function App() {
return (
<MetabaseProvider config={config}>
- <CreateQuestion/>
+ <InteractiveQuestion questionId={1} isSaveEnabled />
</MetabaseProvider>
);
}
```
-## Embedding an editable question
+## Embedding the query builder
-You can edit an existing question using the query builder by using the `isSaveEnabled` prop on the `InteractiveQuestion` component.
+With the `CreateQuestion` component, you can embed the query builder without a pre-defined question.
```tsx
import React from "react";
-import {MetabaseProvider, InteractiveQuestion} from "@metabase/embedding-sdk-react";
+import {MetabaseProvider, CreateQuestion} from "@metabase/embedding-sdk-react";
const config = {...}
export default function App() {
return (
<MetabaseProvider config={config}>
- <InteractiveQuestion questionId={1} isSaveEnabled />
+ <CreateQuestion/>
</MetabaseProvider>
);
}