使用我的自定义 css 设置 Tawk.to 聊天小部件的样式

Question

我在我的 WordPress 网站上实现了 Tawk.to 小部件。但正如您在下图中（移动版本）所看到的，该小部件与我不想要的“致电我们”按钮重叠。默认情况下，Tawk.to 小部件不允许覆盖其 CSS。让我知道您对此的想法。

Answer 1

虽然答案很晚了，但我将其发布在这里，因为有些人可能会从中受益。经过大量关于该主题的谷歌搜索后，我发现更改 tawk.to 位置非常简单。下面的示例将显而易见。我使用了以下代码，当然我已经更改了下面代码中的 sl.src 值。只需将从 tawk.to 获取的代码片段放在标记之前，然后将自定义样式代码放置在该代码片段的标记之前，如下面的示例所示。

    <!--Start of Tawk.to Script-->
    <script type="text/javascript">
    var Tawk_API = Tawk_API || {},
      Tawk_LoadStart = new Date();
    (function () {
      var s1 = document.createElement("script"),
        s0 = document.getElementsByTagName("script")[0];
      s1.async = true;
      s1.src = 'https://embed.tawk.to/620929a89k40e$6ywsv/ry953*(*fqsdgl';
      s1.charset = 'UTF-8';
      s1.setAttribute('crossorigin', '*');
      s0.parentNode.insertBefore(s1, s0);
    })();

    // Custom styling of Offset starts here
    Tawk_API.customStyle = {
      visibility: {
        //for desktop only
        desktop: {
          position: 'br', // bottom-right
          xOffset: 15, // 15px away from right
          yOffset: 40 // 40px up from bottom
        },
        // for mobile only
        mobile: {
          position: 'bl', // bottom-left
          xOffset: 5, // 5px away from left
          yOffset: 50 // 50px up from bottom
        },
        // change settings of bubble if necessary
        bubble: {
          rotate: '0deg',
          xOffset: -20,
          yOffset: 0
        }
      }
    }
    </script>
    <!--End of Tawk.to Script-->

有关更多信息，您可以在此处查看 https://help.tawk.to/article/customizing-your-widget-placement-with-the-javascript-api

抱歉，这是我在 stackexchange 上的第一个答案，所以我不知道如何隐藏“运行代码片段”按钮，因为它在这里什么也不做

Answer 2

有一种方法可以使用您的自定义 css 覆盖默认 css。检查下面的代码：

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/60f038e2d6e7610a49ab6e35/1fal5sduv';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

var def_tawk_bottom = "20px"; /*This is their default style that I want to change*/
var def_tawk_right = "16px"; /*This is their default style that I want to change*/
var customize_tawk = ""; /*Interval object*/

function customize_tawk_widget(){
    var cur_bottom = jQuery("iframe[title='chat widget']").eq(0).css('bottom'); /*Get the default style*/
    var cur_right = jQuery("iframe[title='chat widget']").eq(0).css('right'); /*Get the default style*/
    if(cur_bottom == def_tawk_bottom && cur_right == def_tawk_right){
        /*Check if the default style exists then remove it and add my custom style*/
        jQuery("iframe[title='chat widget']").eq(0).css({ 'right': '', 'bottom': '' });
        jQuery("iframe[title='chat widget']").eq(0).addClass("custom-chat-widget");
        clearInterval(customize_tawk);
    }
}

/*Customize the widget as soon as the widget is loaded*/
Tawk_API = Tawk_API || {};
Tawk_API.onLoad = function(){
    /*Only for mobile version*/
    if(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent) ) {
        var customize_tawk = setInterval(customize_tawk_widget, 100);
    }
};

/*Customize the widget as soon as the widget is minimized*/
Tawk_API = Tawk_API || {};
Tawk_API.onChatMinimized = function(){
    /*Only for mobile version*/
    if(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent) ) {
        var customize_tawk = setInterval(customize_tawk_widget, 100);
    }
};