You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: guides/embedding/how-to-embed-content.mdx
+22-3Lines changed: 22 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -42,14 +42,33 @@ Chart embedding requires the React SDK. iframe embedding is only available for d
42
42
43
43
## How can you embed content?
44
44
45
-
Lightdash offers two embedding methods:
45
+
Lightdash offers two embedding methods. The choice mainly comes down to what you're embedding and how much customization you need.
46
46
47
-
**[iframe embedding](/references/iframe-embedding)**: Embed Lightdash **dashboards** using a simple iframe with a JWT in the URL. No special integration required. iframe embedding is only available for dashboards, not charts.
47
+
**[iframe embedding](/references/iframe-embedding)** is simple to set up. You only need to generate a JWT, construct a URL, and add this to an `<iframe>` tag. There are no additional setup requirements and this works anywhere (React, Vue, plain HTML). Note that iframe embedding currently only supports dashboards (chart embedding via iframe is not supported).
48
48
49
-
**[React SDK](/references/react-sdk)**: Use the `@lightdash/sdk` package for seamless integration in React applications. The React SDK supports both dashboards and charts with additional features like programmatic filters and callbacks.
49
+
**[React SDK](/references/react-sdk)** (`@lightdash/sdk`) is the more powerful option. It supports both dashboards and charts, lets you pass filters programmatically, hook into user interaction callbacks (like when someone navigates to Explore), and apply custom styling to match your app. It requires a React/Next.js app and CORS configuration on the Lightdash instance (Cloud customers need to contact Lightdash to set that up).
50
50
51
51
Both methods use the same JWT-based authentication and security model.
52
52
53
+
### Quick comparison
54
+
55
+
| Feature | iframe | React SDK |
56
+
|---|---|---|
57
+
| Dashboards | ✓ | ✓ |
58
+
| Individual charts | ✗ | ✓ |
59
+
| Setup complexity | Low | Medium |
60
+
| CORS needed | No | Yes |
61
+
| Programmatic filters | Via JWT config | Via SDK `filters` prop |
0 commit comments