JSFiddle - React, Tailwind, and code Playground

by Ahmed Nawaz Butt

HTML

<!-- 
How to do onboarding with Shuttle

Include div with deep_link.id like:
<div data-shuttle-embed="j5btiamdi0yg2igwdyss7jsj9ef86325"></div>

Below we're dynamically injecting the attribute for the sake of the jsfiddle./
-->
<div id="onboarding"></div>

<!-- include Shuttle.js -->
<script src="https://app.shuttleglobal.com/1186_1867169/anb-vfairs-shuttle-instance-key/shuttle-1.3.X.js" type="text/javascript"></script>

JavaScript

// Customise the UX
var themes = {
	default: {},
  simple: {
      
    	"headerBackground": "yellow",
    	"headerBorderBottom": "5px solid #f00",
      "baseFontFamily": "Sans",
    	"baseBorderRadius": 5,
    	"colorPrimaryBase": "#0000ff",
    	"backgroundColor": "#aeaeae",
    	"textColor": "#f0f",
			"colorInfoBase": "Yellow",
			"linkColor": "gold",
  }
}

// Config
var config = {
	shared_key: "1186_1867169", // From your dev portal
	secret_key: "9ef34b4f9ecc72b52bbab8a921b19e7b", // From your dev portal
  instance_key: "anb-vfairs-shuttle-instance-key",
  theme: themes.simple // Try demo_themes.default
}

// This creates the deeplink, this should be done server side, to generate the
// `deep_link.id` You need to include a div on your page with `<div data-shuttle-embed=":id"></div>` 
fetch("https://app.shuttleglobal.com/c/api/instances/" + config.instance_key + "/deep_links", {
  method: "POST",
  mode: 'cors',
  headers: {
    "Content-Type": "application/json",
    Authorization: 'Basic ' + btoa(config.secret_key + ":")
   }, 
  body: JSON.stringify({
    "deep_link": {
        "type": "gateway-setup", // Mandatory
        "context": {
            "theme": config.theme 
        },
        "user": {
            "alt_key": "1", // Your logged in user's primary key
            "name": "John Doe" // Your logged in user's name
        },
        "ip_address": "217.150.215.42", // Recommended: Customer's IP
        "locale": "en_US" // Customer's locale, if not passed we will IP lookup
    }
	})
})
.then((response) => response.json())
.then((response) => {
	console.log("Deeplink Response: " + JSON.stringify(response));

  // Set the data attribute
  document.getElementById("onboarding").setAttribute("data-shuttle-embed", response.deep_link.id);

	// Tell Shuttle the page has been updated
  Shuttle.bind();
})
.catch((error) => {
  console.error(error)
});


// Stream window events to console so you can see the events we raise
window.addEventListener("message",...