Getting started
3: Build an Embeddable

Build your first Embeddable

You're ready to start building! Let’s walk through creating a basic dashboard in Embeddable - from adding your first component to embedding the result.

💡

An Embeddable is an interactive dashboard that you embed in your web application.

Create a New Embeddable

  • On your workspace homepage, click Create new Embeddable to create a fresh dashboard.

Add a Text Component

  1. Click Add component (top right).
  2. Scroll down and choose the Hello World component.
  3. Fill in Title and Body, then hit Save.
💡

The available components come from your code repository (opens in a new tab).

Add a Dataset

  1. In the Datasets panel (bottom right), click the + icon.
  2. Name your dataset.
  3. Select My customers (or any other sample data model), then Save.

Add a Pie Chart

  1. Click Add component again. Pick Pie Chart.
  2. In the edit panel, set Dataset to display to the dataset you just created.
  3. Select your preferred Slice and Metric.
  4. Save and position your pie chart on the canvas.

Add Interactivity

It's really simple to make your dashboards interactive.

Let's add a search input that filters the data. Watch and follow this quick video to see how:

Embed Your Dashboard

  1. Click Publish at the top of your dashboard.
  2. In the pop-up, copy your API Key and Embeddable ID.
Image 0
  1. In your code repo, open embedding-preview.cjs (here (opens in a new tab)).
  2. Update the BASE_URL, API_KEY, and EMBEDDABLE_ID with the values from your dashboard.
  3. Run: 
    node src/embeddable.com/scripts/embedding-preview.cjs
  4. Go to http://localhost:8080/ (opens in a new tab) to see your embedded dashboard in action! 🤩

Congratulations! You've built your first Embeddable - now you're well on your way to creating amazing, interactive analytics experiences.

Next Steps

Complete the homework challenge→

2: Set up your workspace4: Homework