如何用自定义CSS修改Tawk.to样式 解决WordPress移动端组件重叠问题

方案1：自定义CSS强制覆盖（最简便） #

Tawk.to默认样式优先级较高，添加!important声明即可覆盖，操作步骤如下：

• 进入WordPress后台，依次点击外观 > 自定义 > 额外CSS
• 粘贴以下代码，根据你的呼叫按钮尺寸调整数值后保存即可：

/* 移动端适配，仅在屏幕宽度小于768px时生效 */
@media only screen and (max-width:768px) {
  /* 调整Tawk.to最小化悬浮按钮的位置 */
  .tawk-min-container, .tawk-float-button {
    /* 底部预留足够高度避开呼叫按钮，数值按需修改 */
    bottom: 80px !important;
    /* 如果要把Tawk.to按钮挪到左下角，取消下面两行的注释即可 */
    /* right: auto !important;
    left: 16px !important; */
  }
  /* 若展开的聊天窗口也存在重叠，新增以下样式 */
  .tawk-chat-window {
    bottom: 90px !important;
  }
}

方案2：通过JS API修改样式（CSS不生效时使用） #

如果加了!important依旧覆盖失败，可通过Tawk.to官方提供的加载回调API直接修改内联样式，操作如下：

• 进入WordPress后台，在主题的footer.php文件的</body>标签前插入以下代码，或使用自定义HTML插件将代码插入到站点页脚位置：

window.Tawk_API = window.Tawk_API || {};
// 等待Tawk.to组件完全加载后执行修改
window.Tawk_API.onLoad = function(){
  if(window.innerWidth < 768) {
    const tawkBtn = document.querySelector('.tawk-min-container');
    if(tawkBtn) {
      tawkBtn.style.bottom = '80px';
      // 挪到左下角则取消下面两行注释
      // tawkBtn.style.right = 'auto';
      // tawkBtn.style.left = '16px';
    }
  }
};

内容的提问来源于stack exchange，提问作者Danish Shaikh