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 Squarespace website.
Embed the Donation Plugin’s Button inside page content:
- Go to your Squarespace site editor, find or create the donation page onto which you want to embed the donation form, and click “Edit” on the page’s main content box.
- Click on the teardrop shaped buttons present inside the text box to open up the list of content blocks.
- Scroll down and find “Code” under the “More” section.
- Paste the embed code in the code box and click “Apply”.
Don’t want to use the button from Kindful?
How to set the plugin to launch from an existing button or link (that has an ID you can reference):
- Open Inspector Tools in browser
- Find the button you want and find it’s id (ie: #yui_23783923728357235)
- Modify embed code to include:
- <script src='https://kindful.com/embeds/F356FB7D9DFC4027AA7A683A3251177E/init.js' data-embed-id='f356fb7d-9dfc-4027-aa7a-683a3251177e' data-lookup-type='jquery-selector' data-lookup-value='#yui_23783923728357235' data-styles-off=”true”></script>
- data-styles-off=”true” will allow user to use the styles on the page, instead of the donation button css created by the plugin editor)
How to set the plugin to launch from an existing button or link (that does NOT have an ID you can reference):
- Open Inspector Tools
- Right click link tag and find copy > xpath
- Sample copied code: //*[@id="mainNavigation"]/div/a
- Format embed code with xpath data (least preferred for Squarespace): <script src='https://kindful.com/embeds/F356FBSDD027AA7A683A3251177E/init.js' data-embed-id='f356fb7d-9dfc-4027-aa7a-683a3251177e' data-lookup-type='xpath' data-lookup-value='//*[@id="mainNavigation"]/div/a'></script>
- Navigate to Settings > Advanced > Code Injection because you want it on every page of the site.
- Paste in the script tag (it will now be executed on every page, just like the nav)
- Note: If you make changes to your site structure this could mess up which link is going to be active.
- Note: some buttons won’t have an id, so you’ll have to reference the block that the button is in when setting the “data-lookup-value” on the embed code script tag. Ie: “#button_wrapper_id a”
- Note: if you turn the styles off, this gives you flexibility to apply the script to multiple elements on the site
How to center the button on Squarespace:
Place the <a> tag within a <div> and then center it using style="text-align: center;"
<div style="text-align: center;">
<a class='kindful-donate-btn' id='kindful-donate-btn-56c540dc-2f28-42ab-9dd6-1d0ff8958f1b'>Donate!</a>
<script src='https://example.kindful.com/embeds/56c540dc-2f28-42ab-9dd6-1d0ff8958f1b/init.js' data-embed-id='56c530dc-2f28-42ab-9dd6-1d0ff8958f1b' data-lookup-type='jquery-selector' data-lookup-value='#kindful-donate-btn-56c530dc-2f28-42ab-9dd6-1d0ff8958f1b'></script>
How to Find 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/”