Question

我把一个脚本代码放到我的网站上，聊天栏出现在页面底部，但是我需要把这个栏放到一个特定的位置，比如协调x = 55 y = 90;

你有任何处理这个吗？

以下是提供商提供的代码，

提前致谢！

<div class = "chat">
<!--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/.../default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</div>

该聊天代表您的css代码，提前感谢

Answer 1

我建议您使用CSS样式。到目前为止，你有两个选择。

<强> 1。使用固定位置

.chat {
  position: fixed;
  top: 90px;
  left: 55px;
}

请记住，如果你这样做，你的酒吧将始终坚持自己的立场。这种情况发生在您的固定位置，这意味着该位置与您的窗口有关。

<强> 2。使用绝对位置

使用绝对定位，除了将元素相对于其父容器定位外，您可以实现完全相同的操作。因此，您可以放置容器，在该容器中也放置聊天栏，具有绝对位置。

.chat {
  position: absolute;
  top: 90px;
  left: 55px;
}

在你的情况下，我建议使用绝对值，因为固定将通常用于页眉和页脚。无论如何，您可以自由探索哪一个适合您的需求。

Answer 2

尝试将此代码添加到您的css

main {
      position: fixed;
      top: 50px !important;
      right: 0 !important;
      box-sizing: content-box;
    }

Answer 3

我还使用了Tawk服务，无法花费大量时间来尝试自定义外部样式。我将解释我的发现。

Tawk开发人员拥有自己的反馈工具，他们已经对灵活调整气泡的位置或样式提出了若干要求：请参见here，here和here。
像我已经提到的那样，简单地覆盖CSS样式是行不通的，因为它们会通过注入的js代码注入的每个style上的iframe属性强制样式。 style在浏览器的HTML解析器逻辑中的优先级高于CSS。他们也使用!important，并且我理解他们的理由-确保样式应在任何应出现的环境（又称网站）中保持一致非常重要。
您可以在负载上使用JS代码。例如，我使用了Reactjs模块react-load-script，在加载外部源时可以在其上使用自定义回调函数。然后您可以做类似的事情

      let iframes = document.querySelectorAll("iframe[title='chat widget']")

      for (let f of iframes) {
        if (f.style.bottom === "auto") {
          f.style.bottom = "150px"
        } else {
          const pxBottom = Number.parseInt(f.style.bottom)
          f.style.bottom = pxBottom + 30 + "px"
        }
      }

强制更新样式。但。这是脚下的石头：在滚动到页面底部或顶部时，脚本会强制更新同一小部件的样式。因此，我没有缩小/修饰正在加载的源代码，并且可以向您保证，要在此级别上执行某些操作会花费太多的精力。

结论：我使用气泡的自定义位置设置为视口的中间，而不是底部。丑陋，但可作为临时解决方案。

Answer 4

我也遇到了同样的问题，我能够弄清楚我们如何用我们的自定义 css 覆盖他们的默认 css。

Style the Tawk.to chat widget with my custom css

定位聊天栏（JavaScript）

4 个答案: