Embedding allows you to integrate your Basedash charts and dashboards directly into external applications, websites, and internal tools. This enables you to share data insights seamlessly across your organization without requiring users to access the Basedash platform directly.

​
How embedding works

Embedding allows you to take any dashboard created in Basedash and add it to your own app wrapper. To embed a dashboard:
  1. Click the Share button in the top right corner of your dashboard
  2. Enable “Embedding”
  3. Basedash provides you with the iframe code to copy
  4. Paste the embed code into your application
Embedded dashboards maintain their interactivity, including filters and variables, allowing users to explore data directly within your applications.

​
Getting embed codes

Embeds use public dashboard links with the /shared/{id} path. Copy the code from the share menu: 
<iframe src="https://charts.basedash.com/shared/xyz789"
	width="100%"
	height="600px"
	frameborder="0">
</iframe>

​
Use cases

​
Customer-facing dashboards

Embed charts into customer portals to show:
  • Account performance metrics
  • Usage statistics
  • Billing information
  • Custom analytics

​
Internal tools

Integrate charts into internal applications:
  • CRM systems
  • Project management tools
  • Executive dashboards
  • Team collaboration platforms

​
Marketing websites

Display public-facing metrics:
  • Company performance indicators
  • Product usage statistics
  • Customer success metrics
  • Industry benchmarks

​
Documentation sites

Embed charts into documentation to show:
  • API usage examples
  • Performance benchmarks
  • Feature adoption rates
  • System health metrics

​
Embedding with filters

​
Variable injection

You can pass variables via query parameters. On public dashboards, variables use the evar_ prefix and values use Base64 encoding: 
<iframe src="https://charts.basedash.com/shared/xyz789?evar_user_id=12345&dateRange=LAST_30_DAYS&groupByInterval=DAY"
	width="100%"
	height="600px"
	frameborder="0">
</iframe>
Notes:
  • Use evar_{syntax}={value} for public dashboards
  • Built-in variables: dateRange, groupByInterval, customDateFrom, customDateTo

​
Filter visibility control

Control what users can see and modify:
  • Allow user interaction: Let users change filters and explore data
  • Disable user visibility: Hide filters to show only specific data slices
  • Preset values: Lock filters to specific values for consistent views

​
Dynamic filtering

Update embedded charts programmatically:
  • Change filters via JavaScript
  • Respond to user interactions
  • Sync with parent application state
  • Real-time data updates

​
Security and access control

​
Secure data isolation

When a dashboard is embedded in an application, public variable values are URL-encoded with the evar_ prefix to avoid leaking labels and to simplify link sharing. For advanced isolation needs, contact us.

​
Authentication

Embedded charts respect your Basedash access controls:
  • User authentication required
  • Role-based permissions
  • Data access restrictions
  • Session management

​
Customer data isolation

Perfect for showing users dashboards of their own data without allowing them to see anything else:
  • User-specific dashboards
  • Customer portals
  • Account-specific analytics
  • Personalized views

​
Public embeds

Create public embeds for non-sensitive data:
  • Marketing materials
  • Public dashboards
  • Demo content
  • Educational resources

​
Private embeds

Secure embeds for sensitive data:
  • Customer-specific data
  • Internal metrics
  • Financial information
  • Proprietary analytics

​
Technical implementation

​
Basic embed code

<iframe
	src="https://charts.basedash.com/shared/YOUR_DASHBOARD_ID"
	width="100%"
	height="600px"
	frameborder="0"
	allowfullscreen>
</iframe>

​
Responsive embedding

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
	<iframe
		src="https://charts.basedash.com/shared/YOUR_DASHBOARD_ID"
		style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
		frameborder="0"
		allowfullscreen>
	</iframe>
</div>

​
Best practices

​
Responsive design

  • Use responsive iframe containers
  • Test on different screen sizes
  • Ensure mobile compatibility
  • Maintain aspect ratios

​
Performance optimization

  • Lazy load embedded charts
  • Cache embed codes
  • Minimize iframe updates
  • Use appropriate chart sizes

​
User experience

  • Provide loading states
  • Handle error scenarios
  • Maintain consistent styling
  • Ensure accessibility

​
Security considerations

  • Validate embed URLs
  • Sanitize filter parameters
  • Monitor embed usage
  • Implement rate limiting

​
Custom embedding

For more information about custom embedding, including advanced security features and styling options, please contact us.

​
Chart types for embedding

​
Interactive charts

  • Line charts: Time series with date filters
  • Bar charts: Category comparisons with entity filters
  • Funnel charts: Journey analysis with time filters
  • Activity charts: Daily patterns with date ranges

​
Data displays

  • Tables: Detailed data with sorting and filtering
  • Number displays: Key metrics with time filters
  • Detail: Entity information with selection filters
  • Text components: Formatted content with context filters

​
Specialized visualizations

  • Map visualizations: Geographic data with region filters
  • Image displays: Visual content with entity filters