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

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

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