Introduction to Dashboards

Embeddable provides a no-code builder that lets non-technical users create, edit, and organize analytics dashboards without writing SQL or code.

It brings together your data models (defined in code) and your components (written in React), giving end users an intuitive, drag-and-drop environment to configure visuals, filters, interactivity, and more.

Why a No-Code Builder?

• Empower Non-Tech Users: Allow product managers, analysts, or support teams to build dashboards themselves.
• Faster Iterations: Dashboards can be designed and tested on the fly. No need to wait for dev cycles to adjust charts or filters.
• Reuse & Scale: Your code-defined models and components are made available in one place. Embeddable handles the plumbing - so a single chart component can be reused by multiple teams or use cases.

High-Level Workflow

1. Define Components & Models in Code

   • Your technical teams build React components (e.g. charts, controls) and data models, then push them to Embeddable.

2. Build Dashboards with Drag & Drop

   • Add a component (like a line chart or dropdown) onto the canvas.
   • Customize it using the inputs available - your team have full control over these.

3. Preview & Interact

   • Preview the dashboard right there, with live data.
   • Build in interactivity to create dynamic, engaging experiences.

4. Test Security Contexts

   • Switch between different security-contexts (e.g. “User A” or “User B”) and environments, seeing the exact data and set up your users see.

5. Publish & Embed

   • Once satisfied, click Publish.
   • Embed the resulting dashboard on your website or app using a web-component (not an iFrame).

With the no-code builder, everyone in your organization - devs and non-devs alike - can collaborate on analytics dashboards. Devs define the underlying data logic and React components; end users assemble, configure, and publish dashboards.

A Native Look and Feel

Embeddable dashboards appear on your site through a web component (<em-beddable>). This approach offers:

• Seamless Integration: The web component behaves like any native HTML element, so your dashboard feels right at home in your layout.
• Mobile Responsiveness: Automatic breakpoints and scaling help your dashboards adapt to smaller screens without extra effort.
• Flexible Branding: Any theming you’ve applied (e.g., custom colors) comes through naturally, since the canvas is invisible and won’t override your site’s look.

By design, visitors can’t tell they’re viewing something “external” - it looks and behaves like a built-in part of your website.

Examples