Embed Image

1. Publish your project

Before embedding your data feature, you will need to publish your project. You can do this via the following steps:

Publish a project

Open a project -> click the “Publish” button in the top right -> click “Publish”.

This will publish all of your application’s styles, saved charts, and metadata. Whenever you make future changes to your project, you will need to publish them before they are applied in production.

2. Get embed code


Once a project is published, you can copy the iFrame code snippet via the following steps:

Copy iframe code snippet

Open a project -> click the “Embed” button in the top right -> click the clipboard icon to copy the code snippet

Here is an example of the code snippet:


Chat Popup

Open a project -> click the “Embed” button in the top right -> Click Chat Popup -> click the clipboard icon to copy the code snippet. Be sure to replace YOUR_USER_JWT_TOKEN and YOUR_REDIRECT_URL with your user’s JWT token and redirect URL. The redirect URL is optional if you would prefer to open the chat popup in Buster’s dashboard.

Here is an example of the code snippet:

    (function () {
	  window.busterSettings = {
		projectId: {YOUR_PROJECT_ID},
		jwtToken: {YOUR_USER_JWT_TOKEN},
		redirectUrl: {YOUR_REDIRECT_URL} //If none is provided, it will default Buster's Dashboard URL

      var l = function () {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://buster-public-assets.s3.us-west-2.amazonaws.com/cdn/latest.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
      if (document.readyState === "complete") {
      } else if (window.attachEvent) {
        window.attachEvent("onload", l);
      } else {
        window.addEventListener("load", l, false);

3. Authenticate the user

The embed URL contains a jwtToken query parameter. This is a JSON Web Token that is used to authenticate the user. We recommend fetching this token from your backend using your API key.

Refer to the API documentation for more information on how to generate a user auth token.

4. Inject the JWT into the iFrame URL

After generating the user auth token, you will need to inject it into the embed URL. You can do this by replacing the {} in the jwtToken query parameter with the user auth token.

5. Create loading state (optional)

If you want to display a loading state for the iframe (the chat popup already includes a loading state) while the embed component is loading, you can use the onload event to listener to toggle a loading state.

In practice, this would look something like this if were using React:

		height: 'calc(100vh',
		display: iframeLoaded ? 'block' : 'none',
		position: 'relative',
		onLoad={() => {
			setIframeLoaded(true); //You would then use this state to display a loading state over the top of the iframe
	{iframeLoaded && <div style={{
		postiion: 'absolute',
		top: 0,
		left: 0,
		width: '100%',
		height: '100%',
		display: 'flex',
		justifyContent: 'center',
		alignItems: 'center',
		<YourLoadingComponent />