Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added images/references/embedding-interactivity.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 17 additions & 5 deletions references/embedding.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.

<Frame>
![](/images/references/embedding-interactivity.png)
</Frame>

#### 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

Expand Down Expand Up @@ -120,17 +132,17 @@ 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.

<Frame>
![](/images/references/embedding-explore-from-here.png)
</Frame>

#### 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.

<Frame>
![](/images/references/embedding-view-underlying-data.png)
Expand Down
10 changes: 7 additions & 3 deletions references/react-sdk.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -93,6 +95,8 @@ const data = {
canExportImages: false,
canExportPagePdf: true,
canDateZoom: false,
canExplore: false,
canViewUnderlyingData: false,
},
user: {
externalId: undefined,
Expand Down