Ko-fi
Ko-fi is a platform that enables creators and businesses to receive financial support directly from their audience through one-time tips, memberships, and other contributions.
Key features include:
- One-time support payments from customers or followers
- Customisable support buttons
- Website tip widgets
- Membership subscriptions
- Supporter messages and notifications
Ko-fi integrates with ShopWired by adding a tracking to the ShopWired theme so you can display a support widget and collect contributions directly from your website.
Account creation
Account creation
Create an account at Ko-fi.
After creating your account you should configure your creator page and connect a supported payment provider in your Ko-fi account so that you can receive payments.
Once your account is configured, Ko-fi will provide the code required to add support buttons and widgets to your website.
Theme installation
Theme installation
Ko-fi provides a script to display a widget on your website, similar to the example shown below:
<script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
<script>
kofiWidgetOverlay.draw('example', {
'type': 'floating-chat',
'floating-chat.donateButton.text': 'Support me',
});
</script>
The script shown above is provided as an example only. You must copy the exact script provided in your own account, as the script and any ID values will be unique to your website.
- Navigate to Website > Themes
- Select the
code editoroption for the theme you want to edit - Open the
master.twigfile - Add the script just above the closing
</head>tag - Select Save changes
Adding the script to your theme will display the Ko-fi tip widget across all website pages.
Adding the Ko-fi tip widget to website pages
Adding the Ko-fi tip widget to website pages
After generating the widget script in your Ko-fi account, it can also be added directly to individual pages using a custom HTML section.
- Navigate to Website > Themes
- Select
customise your themefor the theme you want to edit - Select
add a new section - Select the
custom HTMLsection type - Paste the widget code into the Custom HTML setting
- Position the section where the widget should appear
- Save your changes
Adding a Ko-fi support button to website pages
Adding a Ko-fi support button to website pages
Ko-fi can also generate a support button that links visitors directly to your Ko-fi page. The platform provides HTML similar to the example below.
<script type="text/javascript" src="https://storage.ko-fi.com/cdn/widget/Widget_2.js"></script>
<script type="text/javascript">
kofiwidget2.init('Support me on Ko-fi', '#72a4f2', 'example');
kofiwidget2.draw();
</script>
The code shown above is provided as an example only. You must copy the exact code generated in your Ko-fi account.
To add the button to a page:
- Navigate to Website > Themes
- Select
customise your theme - Select
add a new section - Select the
custom HTMLsection type - Paste the button code into the Custom HTML setting
- Position the section where the button should appear
- Save your changes
Recommendations
Recommendations
- Install the Ko-fi widget script only once within your theme
- Use custom HTML sections to control where support buttons appear
- Test widget placement before making theme changes live
- Keep a record of widget or button code added to your theme
