Demo #6

Select code
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>

	<script>
	
	var widget;
	
		
	$('body').on('click', '.playable', function(event){
		if (widget){
			var txt = $(this).html();
			widget.fetch(txt);
			$('.ygParent').show();
		}
		else {
			alert("YG is unavailable. Try again later");
		}
		
	});
	
	
	function onYouglishAPIReady(){
		//register as partner using your key
		YG.setParnterKey("partner_test_key");
		
		//get the widget
		widget = YG.getWidget("yg-widget-0");
		
		if (widget){
			//display ads on LEFT and BOTTOM location:
			widget.setAdsLocation(YG.AdLocations.LEFT|YG.AdLocations.BOTTOM);
			
			//register events 
			widget.addEventListener("onError", errorHdler);
		}

	}
	
	function onYouglishDisplayAd(id, location, parent, sugWidth){
		if (location === YG.AdLocations.BOTTOM){
			//a responsive ad require to setup the width of the parent. Let's use the suggested width.
			parent.style.width =  sugWidth + "px";
			parent.innerHTML = "<div style='color:white;background-color:#6e94ce;display: table;min-height:80px;height:100%;width: 100%;'><div style='display: table-cell;text-align: center;vertical-align: middle;'>BOTTOM Ad</div></div>";

		}	
		else if (location === YG.AdLocations.LEFT){
			//a 140px width ad 
			parent.innerHTML = "<div style='color:white;background-color:#6e94ce;display: table;min-height:80px;height:100%;width: 140px;'><div style='display: table-cell;text-align: center;vertical-align: middle;'>Partner LEFT Ad</div></div>";
		}
		
		/*
		here's how to display a responsive adsense ad on the LEFT side of the widget:
			else if (location === YG.AdLocations.LEFT){
				parent.style.width =  sugWidth + "px";
				//call adsense
				parent.innerHTML = "<ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-11111' data-ad-slot='22222' data-ad-format='auto'></ins>";
				(adsbygoogle = window.adsbygoogle || []).push({});
			}
			
		*/
	}
	
	function errorHdler(event){
		switch(event.code){
			case YG.Error.OUTDATED_BROWSER: 
				alert("YG can't be run on your browser. Upgrade your browser to the latest version and try again!");
				break;
			case YG.Error.TIMEOUT: 
				$('.ygParent').hide();
		 		if (widget) widget.close();
				alert("YG is under maintenance. Try again later.");
				break;
		}
	}
	

	
	$(document).ready(function() {
			$(".playable").hover(
				  function() {
					    $(this).css('color', 'red');
				  }, function() {
					    $(this).css('color', '#333');
				  }
			);
		

	});
	



</script>
	
<style>
	
.ygParent{
    position:fixed;
    top: 5%;
    left: 40%;
    width:480px;
	  display:none;
}

.playable {  
	cursor:pointer;
	font-size:25px;
}

</style>
	
<body>

	
<div style='padding:10px'>
			<div style='font-size:20px'>
				<div class='ttl'>Click on a word below to proceed:</div>
				<ul>
					
						<li><span class='playable'> take </span>
					
						<li><span class='playable'> take off </span>
					
						<li><span class='playable'> takeaway </span>
					
						<li><span class='playable'> take away </span>
					
						<li><span class='playable'> take #barackobama </span>
					
						<li><span class='playable'> Boston Massachusetts </span>
					
				</ul>
			</div>
</div>




<div class='ygParent'>

	<a  id="yg-widget-0" class="youglish-widget" data-components="7423" data-delay-load="1" data-toggle-ui="1"  href="https://youglish.com">Visit YouGlish.com</a>

</div>

<script async src="https://youglish.com/public/emb/widget.js" charset="utf-8"></script>
  </body>
</html>