Welcome to LiSA Widgets
Embed the LiSA Live Widget

3min
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:
HTML
<!-- LiSA Library host element -->
<div id="lisa-library"></div>
<!-- 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](https://docs.hello-lisa.com/sdks/appearance).
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:
Text
<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>
<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.
Updated 25 Mar 2024
Did this page help you?
LiSA Live Widget Intro
LiSA Stories Widget Intro