Getting started
3: Build an Embeddable

Build your first Embeddable

Create and embed your first Embeddable dashboard.

💡

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

This guide assumes you have already set up your workspace and explored your workspace.

Create a New Embeddable

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

Add a Dataset

Datasets are how you access data on a dashboard.

Your workspace is linked to our sample database and uses the sample data models (opens in a new tab) that you pushed to your workspace from your boilerplate repository.

  1. In the Datasets Panel in the bottom right, click the + icon.
  2. Name your dataset "data" (or give it any other name).
  3. Select Daily Listeners Data (or any other sample data model), then Save.

Add a Donut Chart

Build your dashboard by adding components to the canvas.

  1. Click Add component. Pick Donut Chart.
  2. In the edit panel, set Dataset to the dataset you just created.
  3. Select the Measure "# Total listens (Daily Listeners Data)" and the Dimension "Country (Daily Listeners Data)".
  4. Hit Add to dashboard.
⚡️

Bonus: check the console in the right sidebar to see what's happening behind the scenes.

Add Interactivity

Interactivity allows user interaction with one component to affect the data shown in another component. E.g. choosing a value from a dropdown can, for example, affect the data loaded in the charts in the rest of the dashboard.

Adding interactivity is quick and easy.

  1. Click Add component, choose Date-Range Picker - Presets, then hit Add to dashboard to add it to your canvas.
⚡️

In the right-hand Variables panel in the Builder, you’ll see a new variable appear: date-range value. Variables store outputs from interactive components (like date pickers) and can be passed around the dashboard.

Let's now link that variable to our Donut Chart (as shown in video above, and described below).

  1. Edit your Donut Chart, by selecting it and then clicking the pencil icon.
  2. Click Filter (under the Dataset input) and, from the dropdown, choose the Data listened (Daily Listeners Data) Dimension.
  3. Next to the filter operator (“In date range”), click the link icon, select the date-range value variable, then hit Save.
🥳

Success! Switch to Preview mode in the top bar to test the interaction.

Embed your dashboard

As a final step, test embedding your dashboard in a simple HTML page. Steps described below.

Save a version

  1. Click 'Save version' at the top of your dashboard.
  2. Enter a simple description and click 'Save new version'.

Publish the dashboard

  1. Click the 'Publish' button.
  2. Select the 'Production' environment (the green box).
  3. Click 'Publish' to publish your saved version.
  4. Grab your API Key and Embeddable ID from the 'View instructions' section at the bottom of the modal.

Test embedding

  1. Head to your code repo, open src/embeddable.com/scripts/preview-in-html.cjs.

  2. Update the BASE_URL, API_KEY, and EMBEDDABLE_ID (here (opens in a new tab)) with the values from your dashboard. Then run:

    node src/embeddable.com/scripts/preview-in-html.cjs

  3. Go to http://localhost:8080/ (opens in a new tab) to see your embedded dashboard in action! 🤩

🥳

Notice: If you "View page source" you can see that Embeddable doesn't use iframes. It uses a web-component that embeds directly as part of your DOM.

 
<!doctype html>
<html>
  <head>
    <title>Embedabble</title>
    <meta charset="utf-8" />
    <script
      type="module"
      src="https://api.<region>.embeddable.com/js/v1/"
    ></script>
  </head>
  <body>
    <em-beddable token="..."></em-beddable>
  </body>
</html>

Learn more about embedding Embeddable dashboards here.

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

Next Steps

4️⃣Try switching the theme→

2: Explore your workspace4. Switch the theme