Deployment
Embedding dashboards

Embedding Dashboards

Once you’ve published your dashboard in Embeddable, you can embed it in any website or web app - simply load our web component and pass in a security token.

How it works

Publish Your Dashboard

In the Embeddable builder, click Publish. This prepares the dashboard for embedding.

Insert Our Web Component

Add a <script> tag to your page to load the Embeddable custom element:

<script 
  type="module"
  src="https://api.<region>.embeddable.com/js/v1/">
</script>

This makes the <em-beddable> tag available anywhere on your page.

Learn more about region here.

Place the <em-beddable> Element

Anywhere in your HTML, include:

<em-beddable
  token="eyJhbGciOiJIUzI1NiJ9..."
></em-beddable>

token is a security token from our Tokens API, which is used for row-level security and more.

Test Embedding

The quickest way to test embedding is to use our test script here.

Example: In a Plain HTML Page

<!DOCTYPE html>
<html>
  <head>
    <script 
      type="module"
      src="https://api.<region>.embeddable.com/js/v1/">
    </script>
  </head>
  <body>
    <em-beddable 
      token="eyJhbGciOiJI..."
    ></em-beddable>
  </body>
</html>

Learn more about region here.

Learn how to retrieve a token here.

Embedding in a React App

If you’re using React, treat <em-beddable> like any other custom element. For example:

function Embeddable({ token }: { token: string }) {
  // Return a custom element
  return React.createElement('em-beddable', { token });
}
 
export default function DashboardPage() {
  const securityToken = 'eyJhbGciOiJI...'; 
  return <Embeddable token={securityToken} />;
}

Or using JSX directly:

export default function DashboardPage() {
  return (
    <>
      <script
        type="module"
        src="https://api.<region>.embeddable.com/js/v1/"
      />
      <em-beddable
        token="eyJhbGciOiJI..."
      />
    </>
  );
}

Learn more about region here.

Learn how to retrieve a token here.

Embedding in a Vue App

In Vue, you can place <em-beddable> in your templates. For instance:

<template>
  <em-beddable
    :token="token"
  />
</template>
 
<script setup lang="ts">
import { ref, onMounted } from 'vue';
 
const token = ref('eyJhbGciOiJI...');
 
onMounted(() => {
  // Load the web component script if needed, or include in index.html
});
</script>

Make sure you’ve loaded the script in your index.html (or another entry point) to define the custom element:

<script 
  type="module"
  src="https://api.<region>.embeddable.com/js/v1/">
</script>

Learn more about region here.

Learn how to generate a token here.

Common Pitfalls

  • Security Token: Must be retrieved server-side to avoid exposing secrets. See our Tokens API docs.

Complete Working Example

See our web-component-example repo (opens in a new tab) for a live demonstration, including how to fetch a security token from the Tokens API and embed it in a fully functional page or app.

Debugging dashboardsRetrieving security tokens