The instructions below walk through adding the Donation Plugin to your Wordpress website.

Part 1: Security (SSL)

Kindful recommends you secure your Wordpress website with an SSL certificate. This allows your donors to stay on your website to complete their transaction. If you choose not to secure your website with SSL, then your donors will be routed to Kindful's secure checkout page to finish their transaction.

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.