Question 42567 in Html Question posted in
Some basic documentation can be found here.

How to change Ko-fi donation widget position? – Html

I am writing a small web app and I would like to add a donation button by using the ko-fi donation widget button. The result is something like this:

enter image description here

My goal is to change it’s position for example by lowering the button to 5px.
I tried with some javascript but it looks like it only works if I do it from the browser console.

<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>

Do you know how the widget can be moved around the html page please?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to achieve my goal by using the following trick: instead of using the floating button provided by ko-fi, you can use the create a ko-fi button as an image so that when you click on it the donation panel opens up as a modal.

    Here is what it looks like right now:

    enter image description here

    As you can see now the button is in the navbar but when I click on it the payment form appears on the screen.

    Here is the code in case you need it:

    <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>

    Make sure to update the iframe with your ko-fi link!


  2. 0

    Try this:

    // 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";
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search