• Help center
  • Wordpress tutorial

Wordpress tutorial

Duration: +/- 10 minutes
In this tutorial, you'll learn how to add the Donation Button to your Wordpress website's footer.

The Donation Button allows you to collect donations directly from your own website! The button can be installed on your Wordpress site in a few short and simple steps. We'll explain the following steps:
  • 1. Creating your Donation Button
  • 2. Adding javascript to your site
  • 3. Adding the button to your site
  Please note: you need to have an artist account in order to complete this tutorial.
Example
Example of Duitje's donation button
The button is available in both a light and a dark theme and you can customise your button's colours to your heart's content.
1. Creating your Donation Button
Creating your personal Donation Button is quite simple. Log in and visit this page. There, please carry out the next 3 tasks:
  • - Request an API key by clicking on "Request an API Key and secret code".
  • - Enter the domain on which you'd like to use the button by clicking on "Add a domain". Your domain is something like my-wordpress.com.
  • - Use the wizard to customise your Donation Button.
When you've finished these steps, the wizard will show you two codes, which we'll insert into your Wordpress site in the next steps. The codes look similar to these:
Code 1: 
<script src="https://duitje.online/api.min.js"></script>
Code 2:
<div class="duitje-dbtn" data-sitekey="YOUR_API_KEY" data-locale="en_GB"></div>
  Please store your personal codes somewhere for now, as you'll be needing them in the next steps.
2. Adding javascript to your site
In this step, you'll be adding Code 1 into your website's head tag.
To insert Code 1, you need a plugin that allows you to add lines of code to your website's head tag. We've detailed two methods below:
Method 1: Use the Insert Headers and Footers plugin
A reliable and user-friendly plugin is Insert Headers and Footers created by WPBeginner. You can install this plugin in your Wordpress panel, by navigating to Plugins Add New and searching for "Insert Headers and Footers". After installing the plugin, navigate to Settings Insert Headers and Footers. Paste Code 1 in the field entitled "Scripts in Header" and hit [ Save ].
Example of Method 1
Method 2: Use our custom plugin
You can also use our own plugin. This plugin inserts Code 1 into your website's head tag automatically. Download the plugin as a .zip file here. Next, upload this .zip file in your Wordpress Panel by navigating to Plugins Add New Upload. After uploading, please activate the plugin entitled "Duitje Donation Button".
Example of Method 2
3. Adding the button to your site
You're almost done! In this final step, you'll be adding Code 2 to your website's body tag.
In your Wordpress panel, navigate to Pages and select the page where you'd like the button to show. In the top bar, hit the [ ] button, navigate to Blocks Widgets and select [ Custom HTML ]. This will place a HTML block on your page. Paste Code 2 in this block. You can add a title and additional text to your liking. Next, move the block to your desired location, hit [ Update ], and you're all set!
Example of step 3
Example of step 3
Conclusion
In this tutorial, you've learned how to insert your Donation Button into your website step-by-step. You're now ready to collect donations from your fans, supporters, family and friends directly from your own site.

If you cannot get things to work, don't worry; we'll gladly help you out! Feel free to contact us, and we'll see how we can assist you.

Thanks for reading!