Build your first Embeddable

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.

1. In the Datasets Panel in the bottom right, click the + icon.
2. Name your dataset.
3. Select My customers (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 display to the dataset you just created.
3. Select your preferred Measure and Dimension.
4. Hit Save.

Add Interactivity

Adding interactivity is quick and easy.

1. Click Add component, choose Date Range Select Field, then hit Save.

2. Edit your Donut Chart.
3. Click Filter (under the Dataset input) and, from the dropdown, choose the Signed up at Dimension.
4. Next to the filter operator (“In date range”), click the link icon.
5. Select the date-range value variable, then hit Save.

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

3. Click the 'Publish' button in the top bar.
4. Select the 'Production' environment (the green box).
5. Grab your API Key and Embeddable ID from the 'How to embed' section at the bottom of the modal.
6. Click 'Publish' to publish your saved version.

Test embedding

7. Head to your code repo, open embedding-preview.cjs (here (opens in a new tab)).

8. Update the BASE_URL, API_KEY, and EMBEDDABLE_ID with the values from your dashboard. Then run:

   node src/embeddable.com/scripts/embedding-preview.cjs

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