I am following this article.
<!--Start of Tawk.to Script-->
<script type="text/javascript">
function getChatId() {
// function to retrieve the property/widget chat id;
// substitute 000000000001 to property id
var lang = navigator.language || navigator.userLanguage;
// return the default language if the lang variable is empty
if (!lang) {
return '000000000001/DEFAULT_WIDGET';
}
if (lang.match('en')) {
return '000000000001/WIDGET_FOR_EN';
} else if (lang.match('de')) {
return '000000000001/WIDGET_FOR_DE';
} else if (lang.match('ru')) {
return '000000000001/WIDGET_FOR_RU';
} else {
return '000000000001/DEFAULT_WIDGET';
}
}
(function () {
var chatId = getChatId();
if (!chatId) {
return;
}
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src = 'https://embed.tawk.to/' + chatId;
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
How do I adapt this code so that the widget adds the notranslate
class to the element? This is to prevent auto-translation with GTranslate.
Also asked on WordPress site.
Tawk_API.onLoad
To add a custom class to the Tawk.to widget's dynamically created <div>
element with the widget-visible
class, use the Tawk_API.onLoad
event to detect when the widget is fully loaded and modify the element.
(function () {
var chatId = getChatId();
if (!chatId) {
return;
}
var Tawk_API=Tawk_API||{},
Tawk_LoadStart = new Date();
// Tawk API onLoad function to add class name to the widget container:
Tawk_API.onLoad = function() {
// Selenct the widget container
var widgetContainer = document.querySelector('div.widget-visible');
if (widgetContainer) {
// Add class name to the widget container
widgetContainer.classList.add('notranslate');
}
};
var s1 = document.createElement("script"),
s0 = document.getElementsByTagName("script")[0];
s1.async = true;
s1.src = 'https://embed.tawk.to/' + chatId;
s1.charset = 'UTF-8';
s1.setAttribute('crossorigin', '*');
s0.parentNode.insertBefore(s1, s0);
})();