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 the iFrame URL

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:

<iframe
	src="https://app.buster.so/embed/94865ffa-6189-49fc-a509-eb9e6afaee52?isDarkMode=false&jwtToken={}"
	width="100%"
	height="100%"
	frameborder="0"
></iframe>

3. Authenticate the user

The iFrame 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 iFrame 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 while the iFrame 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:

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