Install the Kindful Donation Plugin on Squarespace

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.


 Easy Instructions:

Embed the Donation Plugin’s Button inside page content:

  1. 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.
  2. Click on the teardrop shaped buttons present inside the text box to open up the list of content blocks.
  3. Scroll down and find “Code” under the “More” section.
  4. Paste the embed code in the code box and click “Apply”. 

Advanced Options:

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):

  1. Open Developer Tools in browser. Can't find these tools? There are instructions at the bottom of this article.
  2. Find the button you want and find it’s id (ie: #yui_23783923728357235)
  3. Use a text editor (such as a Word Document) to modify your embed code in the following way:
    1. Remove the line of code that starts with <a and ends with /a> 
    2. Replace the ID in your original embed code with the ID you found in Step 2. Here's an example of an embed code that has been modified using an ID from an existing button:
      <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>
    3. Adding this piece to your code data-styles-off=”true” will allow you to use the elements on your page webpage, (instead of the donation button created by the plugin editor in Kindful) to launch your plugin.
  4. Navigate to Settings > Advanced > Code Injection because you want it on every page of the site.
  5. 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.
  6. Using the page editor, create a code block on the page and paste in the embed script.

 

  • 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 set the plugin to launch from an existing button or link (that does NOT have an ID you can reference):

  1. Open Inspector Tools
  2. Right click link tag and find copy > xpath
  3. Sample copied code: //*[@id="mainNavigation"]/div[1]/a
  4. 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[1]/a'></script>
  5. Navigate to Settings > Advanced > Code Injection because you want it on every page of the site.
  6. 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.
  7. Using the page editor, create a code block on the page and paste in the embed script.
  • 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

Using Multiple Plugins on the Same Page

  1. Open Inspector Tools
  2. Right click link tag and find copy > xpath
  3. Sample copied code: //*[@id="mainNavigation"]/div[1]/a
  4. From your Kindful donation plugin embed code, remove the <a><a/> tag line. 
  5. After the xpath, add the following: data-styles-off="true"
  6. Format embed code with xpath data, example below, elements you need to add are in bold (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-styles-off="true" data-lookup-value='//*[@id="mainNavigation"]/div[1]/a'></script>

  7. Using the page editor, create a code block in the page's footer for each plugin on the page and paste in the embed script.

 

How to center the button on Squarespace:

Place the <a> tag within a <div> and then center it using style="text-align: center;"

Example:

<div style="text-align: center;">
<a class='kindful-donate-btn' id='kindful-donate-btn-56c540dc-2f28-42ab-9dd6-1d0ff8958f1b'>Donate!</a>
</div>
<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/”


Still have questions?

Feel free to send our support team an email, or you can call the phone number found in the lower left hand corner of your Kindful Admin account to speak to a team member. 

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

Comments