csswordpresswidgettawk.to

How do I add the "notranslate" class to the tawk.to widget?


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.


Solution

  • Adding a Custom Class to Tawk.to Widget Container Using 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.

    Solution

    (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);
    })();