Embed the LiSA Live Widget

Follow the steps in this guide to add the code snippet to your CMS:

Step 1: add a new HTML host element

Add a quick host element with a tag where you wish to insert your Content hub. You can put it anywhere on your page where you would like the Content hub to appear:

<!-- LiSA Library host element -->
<div id="lisa-library"></div>

💡 The lisa-library class ID is used for advanced customizations of your Live Player UI and is mandatory. For more information, please view this documentation.

Step 2: add the LiSA script

Add this script to your web page to enabled your page to load the Content Hub and LiSA Live player:

<script type="text/javascript" async defer>
	(function() {
	  window.LiSA = window.LiSA || {};
	  if (!window.LiSA.library) {
	    window.LiSA.library = { configs: [] };
	    var scriptNode = document.createElement('script');
	    scriptNode.setAttribute('defer', 'defer');
	    scriptNode.src = 'https://static.lisa-cdn.net/sdks/lisa-embed-library/latest/lisa-embed-library.latest.js';
	    document.body.appendChild(scriptNode);
	  }
	
	  window.LiSA.library.configs.push({
	    client: '[YOUR_CLIENT_IDENTIFIER]', // todo replace with your individual client identifier
	    hostNode: '#lisa-library',
	  });
	})();
</script>

💡 You should replace YOUR_CLIENT_IDENTIFIER with your provided identifier. Contact LiSA if your identifier was not provided already.

Step 3: enjoy LiSA!

You can now re-load your page and view the Content Hub. You’re good to go!

Further customizations and set up to tailor your viewing experience are handled by LiSA at no additional cost. Contact your LiSA representative for further enquiries.