Как изменить положение виджета пожертвований Ko-fi?

Я пишу небольшое веб-приложение и хочу добавить кнопку пожертвования с помощью кнопки виджета пожертвования ko-fi. Результат примерно такой:

Моя цель - изменить его положение, например, уменьшив кнопку до 5 пикселей. Я пробовал с некоторым 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.info(kofiElement);
      // Modify bottom position
      kofiElement[0].style.bottom = "5px";
      };
  </script>

Вы знаете, как виджет можно перемещать по html-странице, пожалуйста?

Эта ссылка может быть очень полезной: youtube.com/watch?v=N7v0yvdkIHg

— 18.04.2023 10:12

javascript html widget position

18.04.2023 10:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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";

Спасибо за быстрый ответ, но я получаю следующую ошибку: поймал ReferenceError: getContainerFrameId не определен

— 18.04.2023 10:20

18.04.2023 10:12

Ответ принят как подходящий

Я смог достичь своей цели, используя следующий прием: вместо использования плавающей кнопки, предоставляемой 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>

Обязательно обновите iframe со своей ссылкой на ko-fi!

19.04.2023 10:21