Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding a ko-fi floating button widget #923

Open
sander1095 opened this issue Jul 12, 2024 · 0 comments
Open

Adding a ko-fi floating button widget #923

sander1095 opened this issue Jul 12, 2024 · 0 comments

Comments

@sander1095
Copy link

Describe the enhancement

Hello.

I'm trying to add a ko-fi widget to my page but I can't get it to work.

Modifying baseof

The instructions are to add the following just before the end of the body tag. I've decided to copy the _baseof.html into my own layouts folder to do so.

<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
<script>
  kofiWidgetOverlay.draw('username-here', {
    'type': 'floating-chat',
    'floating-chat.donateButton.text': 'Support me',
    'floating-chat.donateButton.background-color': '#fcbf47',
    'floating-chat.donateButton.text-color': '#323842'
  });
</script>

I've disabled all CSP policies to test this locally, but this doesn't work. I get the following error and it renders in an ugly way:

This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”.

Using a plugin

I've also tried using this hugo-kofi plugin, but even without that the same error occurs so I'm guessing it is the theme

https://github.com/tgagor/hugo-shortcode-kofi/tree/main

{{< kofi/floating-button user="stenbrinke">}}

The repo says to add this to the end of a blog post; i've tried that but it still looks ugly.

image

Using kofi button

I would prefer to have the floating window. However, I also tried to use the ko-fi button that links to the kofi website. Sadly this also doesn't render well.

image

I would really appreciate some support in getting ko-fi support into this theme, or at least in my repo :)

Less desirable options like using

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant