时间戳

首页 > 解决方案 > 如何在 tidio 聊天中编辑 iframe CSS

javascript - 如何在 tidio 聊天中编辑 iframe CSS

问题描述

大家，

我正在使用 wordpress 创建一个电子商务网站并安装用于 tidio 聊天的插件。我想调整 tidio 聊天的位置（底部），目前是 0px，但我发现它正在使用 iframe，我无法通过添加自定义 css 来更改它。

<iframe title="Tidio Chat" id="tidio-chat-iframe" style="display: block; border: none; position: fixed; width: 112px; height: 140px; opacity: 1; left: auto; right: 0px; bottom: 0px; top: auto; background: none transparent; margin: 0px; max-height: 100vh; max-width: 100vw; transform: translateY(0px); transition: none 0s ease 0s; visibility: visible; z-index: 999999999 !important;"></iframe>

在javascript中添加的代码是什么，我尝试多次添加代码但仍然失败，任何人都可以帮助我解决这个问题吗？太感谢了。

标签： javascripthtmlcss

解决方案

可以移动整个 iframe 本身，但这仅适用于桌面版小部件（移动移动版会使其超出屏幕边界）。

尝试在网站标题中使用此样式代码：

<style>
#tidio-chat iframe { bottom: 3.5em !important; }
@media only screen and (max-width: 980px) {
    #tidio-chat iframe { bottom: 0px !important; }
}
</style>

第一行负责移动小部件，因此您可以使用这些值来根据需要定位聊天。第二行和第三行负责排除移动小部件的移动，因此我建议保持它们不变。

希望这可以帮助 ：）

推荐阅读