如何调整Ko-fi捐赠挂件的页面显示位置？

问题背景 #

我正在开发一个小型Web应用，添加了Ko-fi的浮动聊天式捐赠挂件，目前效果如下：

目标是将按钮下移至距离底部5px处，但尝试用JavaScript修改时，仅在浏览器控制台中生效，代码如下：

<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
<script>
  kofiWidgetOverlay.draw('federicogentile90', {
    'type': 'floating-chat',
    'floating-chat.donateButton.text': 'Support me',
    'floating-chat.donateButton.background-color': '#fcbf47',
    'floating-chat.donateButton.text-color': '#323842',
  });
  // 尝试的代码
  window.onload = function() {
    let kofiElement = document.getElementsByClassName("floatingchat-container-wrap");
    console.log(kofiElement);
    // 修改底部位置
    kofiElement[0].style.bottom = "5px";
  };
</script>

解决方法 #

问题核心是Ko-fi挂件的加载时机晚于window.onload，导致你的代码执行时，挂件元素还未创建，因此无法修改样式。以下两种方法可解决：

方法1：利用Ko-fi的加载回调 #

Ko-fi的draw方法支持传入onReady回调，在挂件完全加载完成后执行样式修改：

<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
<script>
  kofiWidgetOverlay.draw('federicogentile90', {
    'type': 'floating-chat',
    'floating-chat.donateButton.text': 'Support me',
    'floating-chat.donateButton.background-color': '#fcbf47',
    'floating-chat.donateButton.text-color': '#323842',
    'onReady': function() {
      let kofiElement = document.querySelector(".floatingchat-container-wrap");
      if (kofiElement) {
        kofiElement.style.bottom = "5px";
      }
    }
  });
</script>

方法2：用CSS强制覆盖样式 #

直接通过CSS的!important规则覆盖挂件默认的底部间距，无需依赖JS执行时机：

/* 放在页面<style>标签或外部样式表中 */
.floatingchat-container-wrap {
  bottom: 5px !important;
}

两种方法都能确保样式生效，其中CSS方法更简单稳定，无需考虑脚本加载顺序问题。

内容的提问来源于stack exchange，提问作者Federico Gentile