diff --git a/images/references/embedding-interactivity.png b/images/references/embedding-interactivity.png new file mode 100644 index 0000000..a7f5f7a Binary files /dev/null and b/images/references/embedding-interactivity.png differ diff --git a/references/embedding.mdx b/references/embedding.mdx index 0cbf41b..31a97cc 100644 --- a/references/embedding.mdx +++ b/references/embedding.mdx @@ -22,7 +22,7 @@ There are a couple of known limitations today with embedding: - Embedding only works for dashboards, not table explores or single charts (unless the single chart is pinned to a dashboard first). - The **Filter dashboard to** option when clicking on individual chart segments will not work on embedded dashboards. -If you're interested in embedding and one or more of these items are blockers, please reach out - we can activate them quickly. +If you're interested in embedding and one or more of these items are blockers, please reach out - we can activate them quickly. ## Embed secret @@ -72,7 +72,19 @@ To learn about getting your embedded dashboard to show different values for diff ### Interactivity -There are options to enable certain dashboard interactivity features on your embedded dashboard in this section. By default, all interactivity is disabled on an embedded dashboard. +There are options to enable certain dashboard interactivity features on your embedded dashboard in this section. This includes filters as well as granular control over Lightdash features and capabilities. By default, all interactivity is disabled on an embedded dashboard. + + + ![](/images/references/embedding-interactivity.png) + + +#### iframe + +To control interactive features for an embedded iframe, simply use the toggles in the settings page. + +#### React SDK + +Use the React [SDK docs](/references/react-sdk#token-configuration). #### Allow users to change dashboard filters @@ -120,7 +132,7 @@ On the embedded dashboard, this `download button` is accessible from the `...` o This option allows users to open a dashboard chart in the [Lightdash Explore view](https://docs.lightdash.com/get-started/exploring-data/using-explores#select-your-fields). Within an embedded context, users can only interact with the chart from which they clicked "Explore from here". Any changes to a chart in this context will not be saved. Embedded users also are not able to run raw SQL for any Explores. -On the embedded dashboard, "Explore from here" is accessible from the `...` options menu located in the top right corner when hovering over the chart tile. +On the embedded dashboard, "Explore from here" is accessible from the `...` options menu located in the top right corner when hovering over the chart tile. ![](/images/references/embedding-explore-from-here.png) @@ -128,9 +140,9 @@ On the embedded dashboard, "Explore from here" is accessible from the `...` opti #### Can View Underlying Data -[View Underlying Data](/get-started/exploring-data/exploring-your-content#view-underlying-data) allows users to open a table for a given dashboard tile, and view a table of the data powering that tile. In the embedded context, users can only view the underlying data—that underlying data cannot be exported or opened in an Explore view. +[View Underlying Data](/get-started/exploring-data/exploring-your-content#view-underlying-data) allows users to open a table for a given dashboard tile, and view a table of the data powering that tile. In the embedded context, users can only view the underlying data—that underlying data cannot be exported or opened in an Explore view. -The "View underlying data" option can be opened by clicking on a chart or big number to see the "View Underlying Data" menu option. +The "View underlying data" option can be opened by clicking on a chart or big number to see the "View Underlying Data" menu option. ![](/images/references/embedding-view-underlying-data.png) diff --git a/references/react-sdk.mdx b/references/react-sdk.mdx index e14dfa2..a6823d7 100644 --- a/references/react-sdk.mdx +++ b/references/react-sdk.mdx @@ -66,13 +66,15 @@ To run the Lightdash SDK in production you need: 1. A frontend to embed the Lightdash dashboard. 2. A backend (or other privileged environment) where you can safely generate embedding tokens. This component will be able to generate access to any content, so this shouldn’t be accessible to your end users. -**JWT Authentication Flow** +### JWT Authentication Flow ![images/jwt-auth-flow.png](/images/jwt-auth-flow.png) -To generate a signed JWT token, you need to use your **embed secret**, which is located in **Settings → Embed** in Lightdash. There, you can generate or regenerate the secret. This secret is used to sign JWT tokens, allowing secure use of the SDK. +To generate a signed JWT token, you need to use your **embed secret**, which is located in **Settings → Embed** in Lightdash. There, you can [generate or regenerate the secret](/references/embedding#embed-secret). This secret is used to sign JWT tokens, allowing secure use of the SDK. -You can use the form to configure which **Dashboard** you want to show in the SDK, enable specific features, and set up **User Attributes** for advanced security controls. For more details on **User Attributes**, check out the guide [here](https://docs.lightdash.com/references/user-attributes). +You can use the form to configure which **Dashboard** you want to show in the SDK, [enable specific features](/references/embedding#interactivity), and set up **User Attributes** for advanced security controls. For more details on **User Attributes**, check out the guide [here](https://docs.lightdash.com/references/user-attributes). + +#### Token Configuration After you configure the form you should end up with the snippet which looks like this: @@ -93,6 +95,8 @@ const data = { canExportImages: false, canExportPagePdf: true, canDateZoom: false, + canExplore: false, + canViewUnderlyingData: false, }, user: { externalId: undefined,