Click on a word below to proceed:
  • take
  • take off
  • takeaway
  • take away
  • take #barackobama
  • Boston Massachusetts
Developer guide:
  1. Build your widget here, copy the code and paste it into your HTML file.
  2. To access the widget: var widget = YG.getWidget("yg-widget-0");
  3. To search: widget.fetch("hello world","english");
  4. To pause the widget: widget.pause();
  5. To close the widget: widget.close();
- Look at the code below for complete code.
- Check out the JS API page to learn more about this API.
- Contact us if you have any questions or need help.
Visit YouGlish.com
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.fetch(text, "english");
 		$(".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>