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.