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 the code repository you downloaded in Part One and will be augmented in a later step by bringing in additional components we provide via an NPM import.

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

Now let's test Embedding your dashboard in a simple HTML page.

  1. Click 'Save version' at the top of your dashboard.
Image 0
  1. Enter a description of your changes so far and click 'Save new version' to save your dashboard as it is.
Image 0
  1. Click 'Publish' to open the Publish modal.
Image 0
  1. Select 'Production' and then click 'Publish' again to publish your newly saved version to the Production environment.
Image 0
  1. Before closing the Publish modal, grab your API Key and Embeddable ID from the 'How to embed' section at the bottom of the modal.
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

Build your own component→

Import starter components→

2: Set up your workspace4: Build a component