Kindful's Donation Plugin is the easiest way to accept donations anywhere - and to have those donations automatically flow into your Kindful account.
If you have not already created a Donation Plugin, read these instructions.
The instructions below walk through adding the Donation Plugin to your Wordpress website.
Part 2: Wordpress Plugin for embedding code
To add the Kindful plugin to your Wordpress site, please install and activate a Wordpress plugin that allows you to embed code into the head tag. We have used this plugin: https://wordpress.org/plugins/embed-code/ , but any one you prefer that allows you to put in full script tags will work great. (Or, if you’re a developer, you can add the Donation Plugin code it in whatever way is best for your site setup.)
Part 3: Embedding your donate button to a page or post:
- Include the button tag to your page or post’s html:
<a href="#" class="kindful-donate-btn">Donate</a>
- Add the Kindful plugin script tag to your website’s head (via the embed-code plugin, or elsewhere)
Optional: Using one of your nav-links as a donate button:
- View your website and open up developer tools. Grab the id or (very specific class) of the link you’re wanting to turn into a donate button (or the link of it’s wrapper div)... ie: .page-item-52 a
- Add the Kindful plugin script tag to your website’s head (via the embed-code plugin, or elsewhere). Use ‘jquery-selector’ lookupType option and use your unique jquery selector you found w/ developer tools (ie: “.page-item-52 a”) as lookupValue. If you want button styles applied, leave as is, otherwise set the option: “data-styles-off=’true”
Finding Developer Tools in your Browser
As well as a menu shortcut, you can access the Developer Tools easily either pressing "F12" in Windows or "Cmd" ⌘, "Option" ⌥ and "I" on the Mac, or by right clicking on the page and selecting “Inspect Element”.
In Safari, you will need to enable the Developer Tools by checking the option in Preferences > Advanced > Show Develop Menu first.
In Opera, you will need to enable Developer Tools by checking the option in More Tools > Enable developer tools.
Since Firebug is an extension for Firefox, you will need to install the add on from http://getfirebug.com/”