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

Question

我在我的 wordpress 网站上实现了一个 Tawk.to 小部件。但正如您在下图（移动版）中看到的那样，小部件与我不想要的呼叫我们按钮重叠。默认情况下，Tawk.to 小部件不允许覆盖其 css。让我知道你对这个的想法。

Answer 1

有一种方法可以用您的自定义 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);
    }
};

Answer 2

虽然答案很晚，但我将其发布在这里，因为有些人可能会从中受益。在对该主题进行了大量谷歌搜索后，我发现将 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 上的第一个答案，所以我不知道如何隐藏“运行代码片段”按钮，因为它在这里什么也不做