如何为Tawk.to小部件添加notranslate类以避免GTranslate自动翻译

嘿，我来帮你搞定这个问题！GTranslate自动翻译聊天小部件确实挺闹心的，给元素加上notranslate类是个精准的解决方案。因为Tawk.to的小部件是动态异步加载的，直接在初始代码里硬加类肯定行不通，得用它官方提供的API回调来监听加载完成事件，再去操作DOM才靠谱。

完整修改后的代码 #

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();
    
    // 核心修改：监听小部件加载完成事件，添加notranslate类
    Tawk_API.onLoad = function() {
        // 定位Tawk.to小部件的根容器
        var tawkRoot = document.querySelector('.tawk-widget');
        if (tawkRoot) {
            tawkRoot.classList.add('notranslate');
            // 额外给聊天内容容器也加类，双重保险防止漏译
            var chatContent = tawkRoot.querySelector('.tawk-chat-container');
            if (chatContent) {
                chatContent.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);
})();

关键修改说明 #

1. 利用官方API回调：
   我们新增了Tawk_API.onLoad函数，这是Tawk.to官方提供的加载完成回调，会在小部件所有DOM元素都渲染完成后触发，完美解决了动态元素操作时机不对的问题。

2. 精准添加类名：

   • 先定位小部件的根容器.tawk-widget，给它加上notranslate类，从根源阻止GTranslate识别
   • 额外给内部聊天内容容器也加类，是为了双重保险，避免GTranslate识别到嵌套的可翻译元素

WordPress环境适配提示 #

如果是在WordPress上使用这段代码，注意不要直接粘贴到文章编辑器（会被过滤），推荐两种方式：

• 使用「Insert Headers and Footers」这类插件，把代码添加到页脚区域
• 或者把代码封装到PHP钩子中，添加到主题的functions.php文件：

function add_tawk_notranslate_widget() {
    ?>
    <!-- 粘贴上面修改后的完整JavaScript代码 -->
    <?php
}
add_action('wp_footer', 'add_tawk_notranslate_widget');

如果发现.tawk-widget选择器不生效，可以打开浏览器开发者工具（F12），手动定位小部件的根元素类名，替换成实际的类名即可。这个方案基于官方API，比直接监听DOM变化更稳定，不会因为Tawk.to版本更新失效。

内容来源于stack exchange