Kindful's Donation Plugin is the easiest way to accept donations anywhere - and to have those donations automatically flow into your Kindful account.
Overview
This article goes over how to create and install the plugin on a Wix page.
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.
Linked Articles
- Let's Encrypt - Free SSL/TLS Certificates
- Cloudflare - The Web Performance & Security Company | Cloudflare
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.
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.
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>
Of Note: Be sure to include the "#" in the data-lookup-value= portion as shown above.
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 > Settings > Custom Code
Paste your reformatted embed code here. Make sure to select:
- "Add Code to All Pages"
- "Load code on each new page"
- "Place code in Head"
Of Note: It may be worth removing the URL that this button is currently linking to as well to prevent confusion. You can typically replace that URL with a # symbol.
Click "Apply." Now, the code is installed on your website, and the donation plugin will launch from the button you created.
Comments