Demo #5

Click on a word below to proceed:

take
take off
takeaway
take away
take #barackobama
Boston Massachusetts

Developer guide:

Build your widget here, copy the code and paste it into your HTML file.
To access the widget: var widget = YG.getWidget("yg-widget-0");
To run the widget: widget.fetch("hello world","english");
To pause the widget: widget.pause();
To close the widget: widget.close();

- Look at the code below for complete code.
- Check out the developer page to learn more about the API.
- Contact us if you have any questions or need help.

Select code

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


<style>
.ygParent{
	position:fixed;
	top: 10%;
	left: 30%;
	width:340px;
	display:none;
}

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

</style>

<script>
var widget;

$('body').on('click', '.playable', function(event){
	if (widget){
		var text = $(this).html();
		widget.search(text);
 		$(".ygParent").show();
	}
	else {
		alert("YG is unavailable. Try again later");
	}
	
});

function onYouglishAPIReady(){
	widget = YG.getWidget("yg-widget-0");
	if (widget){
		widget.addEventListener("onError", errorHdler);
	}
}

function errorHdler(event){
	switch(event.code){
		case YG.Error.OUTDATED_BROWSER: 
			alert("YG can't be run. Upgrade your browser and try again!");
			break;
		case YG.Error.TIMEOUT: 
	 		$(".ygParent").hide();
	 		if (widget) widget.close();
			alert("YG is unavailable. Try again later.");
			break;
	}
}
</script>

<ul>
	<li><span class='playable'> take </span>
	<li><span class='playable'> take off </span>
	<li><span class='playable'> take away </span>
	<li><span class='playable'> took away </span>
	<li><span class='playable'> it's time to go </span>
	<li><span class='playable'> Boston Massachusetts </span>
	<li><span class='playable'> take #barackobama </span>
</ul>

<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>