Finished Code Example

<script>
// place in the HTML head element before other script or style tags
(function(w,d,c,n,s,p){
  w[n] = w[n] || function () { (w[n].q = w[n].q || []).push(arguments) }, w[n].l = +new Date();
  s = d.createElement(c), p = d.getElementsByTagName(c)[0];
  // handling the onerror event is optional, but recommended
  s.onerror = function () { console.log('optionally perform an action here if the script fails to load...'); };
  s.async = s.src = 'https://icw.protecht.com/client-widget.min.js?v=4';
  p.parentNode.insertBefore(s, p);
})(window,document,'script','tg');

// place anywhere after the JavaScript snippet above
tg("configure", {
    apiKey: "pk_xxxxxxxxxxxxxxxxxxxx",
    items: [{
      cost: "100.00"
    },{
      cost: "50.00"
    }],
    // currency: "USD",
    // locale: "en_US",
    // persist: false,
    // sandbox: false,
    loadedCb: function() {
	    console.log("loaded callback");
	    
	    const isComplete = tg.isFormComplete(); // returns a boolean
	    const quote = tg.get("quote"); // returns the protection cost
	    
	    // TODO:
	    // 1. by checking isComplete, conditionally show UI elements. If false:
	    // --> a) alert the user to provide an opt-in or opt-out selection
	    // 2. verify the protection cost displayed in the widget matches the protection cost stored in the quote variable
    },
    optInCb: function() {
	    console.log("opted in callback");
	    
	    const isComplete = tg.isFormComplete(); // returns a boolean
	    const isProtected = tg.isProtected(); // returns a boolean
	    const quoteToken = tg.get("token"); // returns a JWT with quote data to pass through to your back-end

		// TODO:
		// 1. by checking isProtected, conditionally update the order total and **add** the protection cost in your cart's UI. If true:
		// --> a) send the quoteToken to update the cart total on your application's back end (add the protection cost)
	    // --> b) update your cart's UI to reflect the **addtion** of the protection cost in the cart total
	    // --> c) update your cart's UI to reflect the **addition** of the protection cost as a cart line item (optional)
	    // 2. by checking isComplete, conditionally show UI elements. If true:
	    // --> a) do not alert the user to provide an opt-in or opt-out selection
    },
    optOutCb: function() {
	    console.log("opted out callback");

	    const isComplete = tg.isFormComplete(); // returns a boolean
	    const isProtected = tg.isProtected(); // returns a boolean
	    const quoteToken = tg.get("token"); // returns a JWT with quote data to pass through to your back-end

		// TODO:
		// 1. by checking isProtected, conditionally update the order total and **remove** the protection cost in your cart's UI. If false:
		// --> a) send the quoteToken to update the cart total on your application's back end (remove the protection cost)
	    // --> b) update your cart's UI to reflect the **removal** of the protection cost in the cart total
	    // --> c) update your cart's UI to reflect the **removal** of the protection cost as a cart line item (optional)
	    // 2. by checking isComplete, conditionally show UI elements. If true:
	    // --> a) do not alert the user to provide an opt-in or opt-out selection
    },
    updatedCb: function() {
	    console.log("updated callback");

		const quote = tg.get("quote"); // returns the protection cost
		const quoteToken = tg.get("token"); // returns a JWT with quote data to pass through to your back-end

		// TODO:
		// 1. update the order total and **update** the protection cost in your cart's UI:
		// --> a) send the quoteToken to update the cart total on your application's back end (update the protection cost)
		// --> b) update your cart's UI to reflect the **change** of the protection cost in the cart total
	    // --> c) update your cart's UI to reflect the **change** of the protection cost as a cart line item (optional)
    },
	onErrorCb: function(message){
	    console.log(message);
		    
		const isComplete = tg.isFormComplete(); // returns a boolean
	    const isProtected = tg.isProtected(); // returns a boolean

		// TODO:
	    // 1. hide UI elements related to the widget
	    // --> a) do not alert the user to provide an opt-in or opt-out selection 
	    // --> b) do not display any text or style elements associated with the widget
	    // --> c) if your checkout process is a multi-step form, programmatically proceed to the next step (optional)
	    // --> d) log the error with your monitoring service (optional)
  }
});
</script>

<!-- Place within the HTML body element where you would like the widget to render -->
<div id="tg-placeholder"></div>