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.

Important - Is your Embeddable loading but not displaying any data, even though it works in the builder? Check and make sure you have a trailing slash at the end of your base-url value! Note: We’ll be fixing this soon so you’ll get a nice error message. 😉

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.