如何更改Ko-fi捐赠小工具的位置？

Question

我正在编写一个小型网络应用程序，我想使用 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',
    });
    // WHAT I TRIED TO DO!
    window.onload = function() {
      let kofiElement = document.getElementsByClassName("floatingchat-container-wrap");
      console.log(kofiElement);
      // Modify bottom position
      kofiElement[0].style.bottom = "5px";
      };
  </script>

您知道如何在 html 页面中移动小部件吗？

Answer 1

您可以随后添加此 CSS：

<style>
.floatingchat-container-wrap { bottom: 11px; }
.floating-chat-kofi-popup-iframe { bottom: 70px; }
</style>

如果您想将其放置在右侧（这是我的目标），那么：

<style>
.floatingchat-container-wrap { left:unset; right: 16px; }
.floating-chat-kofi-popup-iframe { left:unset; right: 16px; }
</style>

Answer 2

试试这个：

// const iFrame = getContainerFrameId(); // seems not in scope for you at the time you run it
const iFrame=document.querySelector("iframe[id^='kofi-wo-container']");
iFrame.style.position="absolute";
iFrame.style.bottom = "5px";

Answer 3

我能够通过使用以下技巧来实现我的目标：您可以使用创建一个 ko-fi 按钮作为图像，而不是使用 ko-fi 提供的浮动按钮，这样当您单击它时 捐赠面板 作为模式打开。

这是现在的样子：

正如您现在所看到的，该按钮位于导航栏中，但是当我单击它时，付款表格会出现在屏幕上。

这里是代码，以防您需要：

<a data-bs-toggle="modal" data-bs-target="#exampleModal"><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi4.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <iframe id='kofiframe' src='https://ko-fi.com/your-kofi-link' style='border:none;width:100%;padding:4px;background:#f9f9f9;' height='712' title='federicogentile90'></iframe>
        </div>
    </div>
</div>

确保使用您的 ko-fi 链接更新 iframe！

Answer 4

我能够使用以下 CSS 完成将捐赠按钮放在右下角。这建立在艾美奖的答案的基础上，但添加了一些影响移动和低宽度视图的缺失类。

<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
<script>
    kofiWidgetOverlay.draw('dupras', {
        'type': 'floating-chat',
        'floating-chat.donateButton.text': 'Support Me',
        'floating-chat.donateButton.background-color': '#00b9fe',
        'floating-chat.donateButton.text-color': '#fff'
    });
</script>   
<style>
    .floatingchat-container-wrap { left: unset; right: 50px; width: 50%; }
    .floatingchat-container-wrap-mobi { left: unset; right: 50px; width: 50%;}
    .floating-chat-kofi-popup-iframe { left: unset; right: 50px; }
    .floating-chat-kofi-popup-iframe-mobi { left: unset; right: 50px; }
    .floating-chat-kofi-popup-iframe-closer-mobi { left: unset; right: 50px; }
</style>