What is a floating donation button?

Having a donation button on your website that directs donors and prospects to your Kindest fundraising page is not only convenient, but also an important part of your fundraising strategy. For one thing, it remains afloat as your website visitor navigates from page to page. Second, it enhances the overall theme of your website. In your Kindest account settings, you can, however, change the color of your donation button.

The image below shows how it looks like on a page:

By default, the floating donation button links to a general donation page, but you may now choose which fundraising page the donation button should promote.

How to add the donation button to your website

Here are the steps on how you can find the button code on your Kindest workspace account to paste on your website:

  1. Log in to your Kindest workspace account.

  2. Click on Settings, and look for Donate Button.

  3. Scroll down a bit to until you'll get to see the part that says Add Donate Button to Your Website. Click on Copy Snippet button.

Here's a screencast to summarize the steps above:

Due to GoDaddy SiteBuilder's restrictive nature, for some reasons, it doesn't allow our donation button to "float" and other restrictive behavior has been observed. In light with this, if you are OK with a static donation button for now, you may add an custom HTML section and then paste your donation button script.

How To Customize Your Donate Button Code Parameters?

You can customize your donate button by using the following options to the configuration object. You can find these in the Donate Button section of your Kindest workspace account.

The default script for the donation button is shown below:

<script>window.kindest = { appId: 'yourappID' }</script>
<script async src="https://kindest.com/widget/donate-button"></script>

Note that 'yourappID' shown on the code is unique to your own donate button, so please keep your appID generated automatically by the system as is.

In its expanded form, button snippet/code looks like this:

<script>window.kindest = { appId: 'yourAppid', position: 'right', offsetRight: 30, offsetBottom: 45, offsetLeft: 30, mobile: true  }</script>
<script async src="https://kindest.com/widget/donate-button"></script>

With the available attributes shown below, you can customize the donate button by inserting/adding your desired value on the expanded form above.

Did this answer your question?