Dashboard > Embed
Embed Dashboard into your customer-facing apps
Draxlr lets you seamlessly embed dashboards into your web applications or portals, so your users get direct access to interactive analytics right within your own environment.
How to Embed a Dashboard?
1. Open the Dashboard You Want to Embed
Navigate to the dashboard you want to embed.
2. Click the Embed Button
At the top right of your dashboard, click the Embed button to open the embed settings.
3. Embed Preview & Settings
- You’ll see a live preview of your dashboard on the left side as it will appear when embedded.
- All the Embed settings are available on the right sidebar. Settings is broken into 3 parts:
- General Embed Settings
- Dashboard Filters
- Embed Code
Note: The Embed Code automatically updates after every setting change. This means you can simply copy and paste the latest Embed Code into your app without having to worry about adjusting any configuration options manually, the code always reflects your current settings.
Allowed Domains (Optional)
- Enter the domains where your embed is allowed to load.
- This restricts unauthorized sites from using your embed code.
Dashboard Header
- Toggle on/off to show or hide the dashboard title/header in the embed.
Export CSV
- Enable or disable the CSV export button for dashboard elements.
Configure Drill Down
- Click Configure Drill Down to enable or customize drill-down/drill-through actions for specific dashboard elements.
Available options:
| Dashboard Type | Group By | View Data | Drill Through |
|---|---|---|---|
| Graph | Yes | Yes | Yes |
| Pivot Table | No | Yes | Yes |
| Table | No | No | Yes |
| Computed Card | No | Yes | No |
4. Configure Dashboard Filters
- All dashboard-level filters will be listed.
- You can:
- Set a default value for each filter.
- Choose to hide filters if you don’t want embedded users to change them.
Tip: To show data to your customers with user-context, add a filter like AccountId (or UserId, CompanyID, etc). Hide this filter and pass the value of the filter based on the logged-in customer.
5. Copy the Embed Code
Draxlr provides code snippets for HTML, ReactJS, and VueJS embeds.
- Copy the desired code and paste it into your application wherever you want the dashboard to appear.
Using the Backend API (Optional)
- Enable Use Backend API for server-side authentication.
- Your backend calls Draxlr’s API with filters and configuration, receives a JWT token, and injects it into the frontend code.
More Options
- Responsive Preview: Switch between desktop and mobile previews.
- Background Color: Customize the background color of your embed.
- Filter Defaults & Visibility: Fine-tune which filters are visible and their starting values.
Tips
- Security: Always specify allowed domains for production environments.
- User Experience: Hide or pre-set filters to provide a focused view for your users.
- To show data to your customers with user-context, add a filter like AccountId (or UserId, CompanyID, etc). Hide this filter and pass the value of the filter based on the logged-in customer.