Install the Kindful donation plugin on Wix

Kindful's Donation Plugin is the easiest way to accept donations anywhere - and to have those donations automatically flow into your Kindful account.

Prerequisite: In order to install a Kindful plugin on Wix, you must have a premium Wix plan. Refer to this Wix article on how to purchase a premium plan.

If you have not already created a Donation Plugin, read these instructions.

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


 

Part 1: Security (SSL)

 
Kindful recommends you secure your Wix 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.
 
Here are two resources on how to add an SSL certificate to your site:

 

Part 2: Create Wix button, and retrieve button attribute ID

Decide which page you'd like the plugin to be installed. If you have multiple sites, be sure you select the site on which you'd like the plugin to launch. 

Go to Site Editor Manage & Edit Site Edit Site Select the 'Add' plus sign on the right side to add a button. 

Please note: While Kindful does provide a button in the embed code of the plugin itself, when installing the button on Wix, you'll need to create your own donation button. 

Screenshot_by_Daniel_Bateman_2018-08-31_at_2.38_PM.png

Once you've added the button, click "Publish" in the upper righthand corner. This will save your work and allow you to see the button publicly as well. 

After you've published your site, open up a separate tab and navigate to the page where your new button is in public view. This is where you'll find and copy the attribute ID. You'll need this element ID when customizing your donation plugin code. in the next step. 

This part is a little bit tricky so make sure to pay close attention:

  • Right click on the button on your public website, and select "Inspect."
  • Clicking Inspect will automatically take you to a specific reference point for that button. You need to look at the ID just above the reference point that you were led to when clicking "Inspect." The element ID is the value in between the quotes after <div ID=
  • In the example below, the element ID is as follows: comp-jlieijwg
  • Copy and paste the element ID somewhere you can save for Part 3. 

 

copy_the_element_ID.gif

Part 3: Create your donation plugin in Kindful, reformat code 

Create your donation plugin in Kindful. If you've never created a donation plugin, refer to this article for instructions on how to do so. 

Once created, copy the plugin's Embed Code and paste it into a word document or a text editor to make the adjustments specified below. 

Here are the steps to reformat your Kindful donation plugin code:

  • Find the line of code that begins with "<a>" and ends with "</a>". REMOVE this line entirely. 
  • You should now only have a snippet of code that begins with "<script>" and ends with "</script>". 
  •  Add a new line to your embed code. This new line should be data-styles-off="true"
  • Finally, identify the line of code that starts with data-lookup-value. The value between the single quotes in this line needs to be changed to reference the attribute ID that you found previously from the button you created on Wix. 

Below is an example of what your new donation plugin code should look like. Any line that is in bold has been added or changed from the original Kindful code. 

<script

src='https://seaturtles.kindful.com/embeds/66424488-0448-465a-8b48-48b84ae62ab7/init.js'

data-embed-id='66424488-0448-465a-8b48-48b84ae62ab7'

data-lookup-type='jquery-selector'

data-styles-off="true"

data-lookup-value='#comp-jlieijwg'>

</script>

 

Part 4: Installing your reformatted code on your Wix website

Be certain that your Wix admin permissions allow you to edit your site. 

From your Wix dashboard, go to My Sites Manage Website Tracking & Analytics New Tool (blue button, top right) > select </> Custom

Screenshot_by_Daniel_Bateman_2018-07-27_at_11.21_AM_4.png

Paste your reformatted embed code here. Make sure to select:

  1. "Add Code to All Pages"
  2. "Load code on each new page"
  3. "Place code in Head" 

Screenshot_by_Daniel_Bateman_2018-07-27_at_11.22_AM_1.png

Click "Apply." Now, the code is installed on your website, and the donation plugin will launch from the button you created. 

Wahoo! 🎉 Great work. Now go forth and fundraise!

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments