Embed your data feature

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:

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

iFrame

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

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/{projectId}?isDarkMode=false&jwtToken={}"
	width="100%"
	height="100%"
	frameborder="0"
></iframe>

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:

  <script>
    (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") {
        l();
      } else if (window.attachEvent) {
        window.attachEvent("onload", l);
      } else {
        window.addEventListener("load", l, false);
      }
    })();
  </script>

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.

auth.ts

import axios from 'axios';

const getUserToken = async (userId: string) => {
	const apiKey = ""; // Insert your API key here
	const url = `https://api.buster.so/api/v1/tokens`;

	const payload = {
		"external_id": userId,
	};
	const headers = {
		'Content-Type': 'application/json',
		'api-key': apiKey 
	};

	const token = axios.get(url, { headers, data: payload })
		.then(response => {
			return response.data.jwt;
		})

	return token;
}

auth.py

import requests
import json

def get_user_token(user_id):
	api_key = "" # Insert your API key here
	url = "https://api.buster.so/api/v1/tokens"

	payload = json.dumps({
		"external_id": user_id,
	})
	headers = {
		'Content-Type': 'application/json',
		'api-key': api_key # Insert your API key
	}

	response = requests.get(url, headers=headers, data=payload)
	token = response.json()['jwt']

	return token

auth.rb

require 'net/http'
require 'uri'
require 'json'

def get_user_token(user_id)
	api_key = "" # Insert your API key here
	url = "https://api.buster.so/api/v1/tokens"
	payload = {
		"external_id": user_id
	}.to_json
	headers = {
		'Content-Type' => 'application/json',
		'api-key' => api_key # Insert your API key
	}
	uri = URI.parse(url)
	http = Net::HTTP.new(uri.host, uri.port)
	http.use_ssl = true
	request = Net::HTTP::Post.new(uri.request_uri, headers)
	request.body = payload
	response = http.request(request)
	JSON.parse(response.body)["jwt"]
end

auth.rs

use reqwest::header::{HeaderMap, HeaderValue, CONTENT_TYPE};
use serde_json::json;
use std::error::Error;

struct JWTToken {
	jwt: String,
}

async fn get_user_token(user_id: String) -> Result<String, Box<dyn Error>> {
	let api_key = ""; // Insert your API key here
	let url = format!("https://api.buster.so/api/v1/tokens");

	let payload = json!({
		"external_id": user_id
	});

	let mut headers = HeaderMap::new();
	headers.insert(CONTENT_TYPE, HeaderValue::from_static("application/json"));
	headers.insert("api-key", HeaderValue::from_str(api_key)?);

	let client = reqwest::Client::new();
	let response = client.get(&url)
		.headers(headers)
		.json(&payload)
		.send()
		.await?;
	let response_body: JWTToken = match serde_json::from_str(result.as_str()) {
		Ok(body) => body,
		Err(e) => return Err(anyhow!(e.to_string()).into()),
	};
	Ok(response_body["jwt"])
}

auth.go

package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"io/ioutil"
	"net/http"
)

func main() {
	url := "https://api.buster.so/api/v1/tokens"
	method := "POST"

	payload := strings.NewReader(`{
		"external_id": "test@test.com"
	}`)

	client := &http.Client {
	}
	req, err := http.NewRequest(method, url, payload)

	if err != nil {
		fmt.Println(err)
		return
	}
	req.Header.Add("Content-Type", "application/json")
	req.Header.Add("api-key", "a48529a9-0fd1-4706-9ecb-78ee91c6e635")

	res, err := client.Do(req)
	if err != nil {
		fmt.Println(err)
		return
	}
	defer res.Body.Close()

	body, err := ioutil.ReadAll(res.Body)
	if err != nil {
		fmt.Println(err)
		return
	}
	fmt.Println(string(body))
}

auth.cs

using RestSharp;
using System;
using System.Threading.Tasks;

public class RestClientHelper
{
	public async Task BusterAuthRequest(string userId)
	{
		var options = new RestClientOptions("https://api.buster.so/api/v1/tokens")
		{
			MaxTimeout = -1,
		};
		var client = new RestClient(options);
		var request = new RestRequest("/api/v1/tokens", Method.Post);
		request.AddHeader("Content-Type", "application/json");
		request.AddHeader("api-key", "INSERT_API_KEY_HERE");
		var body = @"{" + "\n" +
		@"    ""external_id"": """ + userId + @"""" + "\n" +
		@"}";
		request.AddStringBody(body, DataFormat.Json);
		IRestResponse response = await client.ExecuteAsync(request);

		return response.Content.jwt;
	}
}

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:

<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>

Documentation

Connect your database

Train your model

Users & access controls

Build & embed dashboards

Embed your data feature

1. Publish your project

2. Get embed code

iFrame

3. Authenticate the user

4. Inject the JWT into the iFrame URL

5. Create loading state (optional)

Documentation

Connect your database

Train your model

Users & access controls

Build & embed dashboards

​1. Publish your project

​2. Get embed code

​iFrame

​Chat Popup

​3. Authenticate the user

​4. Inject the JWT into the iFrame URL

​5. Create loading state (optional)

1. Publish your project

2. Get embed code

iFrame

Chat Popup

3. Authenticate the user

4. Inject the JWT into the iFrame URL

5. Create loading state (optional)