Embedding an Embeddable dashboard in your website is easy. Simply add our web component into your website’s HTML, anywhere where you would like the dashboard to appear. You’ll just need to retrieve a security token from our Tokens API, in order to apply row-level security.

Web Component

Clicking “publish” in the top corner of your Embeddable will make your dashboard ready to embed. The below HTML snippets are all you need:

  1. a script tag on your page to load our Web Component
<script 
	type="module" 
	src="<https://api.embeddable.com/js/v1/>">
</script>
  1. the Web Component itself to place anywhere in your page where you would like your dashboard to appear
<em-beddable 
	token='eyJhbGciOiJIUzI1NiJ9.eyJzZWN1cml0eVRva2VuSWQ...' base-url="<https://api.embeddable.com/>"
/>

To embed it a React.js app, simply define it like so:

function Embeddable(props: { token: string }) {
  return React.createElement('em-beddable', props);
}

return <Embeddable
  token="eyJhbGciOiJIUzI1NiJ9.eyJzZWN1cml0eVRva2VuSWQ..." base-url="<https://api.embeddable.com/>"
/>

The token in both cases is a security token which must be retrieved from our Tokens API (links below). This is also used to apply row-level security.

Working code example

A working example of embedding an Embeddable dashboard (including retrieving a security token from the Tokens API) can be found here:

Interacting with your Embeddable

You can interact with your Embeddable, from your own code, as if it is one of your own components.

const Dashboard = ({ securityToken }) => {
	const [isLoading, setIsLoading] = React.useState(true);
  const [variables, setVariables] = React.useState({
    'Country':'Germany',
    'Date range': { from: new Date(2024, 1, 12), to: new Date() }
  })
  return <Embeddable
    token={securityToken}
    variables={variables}
    onVariablesChange={setVariables}
    onComponentsLoad={() => setIsLoading(false)}
    onEmbeddableError={(e) => {
      console.log(`${e.errorMessage} : ${e.errorDetail}`);
    }}
    base-url="<https://api.embeddable.com/>"
  />
}