Submit a request
How can we help?

Install the Kindful Donation Plugin in Squarespace

Avatar
Follow

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 explains how to connect a donation button on your Squarespace website to Kindful. You can use the default Kindful donation button or a custom button. The button connects to one of your Kindful donation plugins.

You can add multiple donation buttons on your website that connect to different Kindful donation plugins.

In this article:

Before You Begin

If you do not have a Kindful donation plugin, create one. See Creating a Donation Plugin. 

Add the Default Kindful Donation Button

Use this method to add the default Kindful donation button to your Squarespace website. This is the simplest way to add a donation button. 

To add a donation button to your website:

  1. In Kindful, select Fundraising > Donation Plugins. 
  2. Next to the donation plugin, select Action > Get Embed Code.
  3. In the Embed Button Code section, click Copy to Clipboard.
  4. In Squarespace, select your website.
  5. Click Edit.
  6. Click Add Block.
  7. Click Code. The Embedded Scripts block appears.
  8. On the Embedded Scripts block, click Edit.
  9. In the text box, remove the sample "Hello, World" code.
  10. Paste the embed code that you copied from Kindful.
    sqsp_code.png
  11. At the upper left of the page, select Done > Save.

Note: We recommend that you configure the button target to open in a new browser window. This helps prevent issues that might occur when a donor has a pop-up blocker enabled.

Connect a Custom Donation Button (Advanced)

Don’t want to use the button from Kindful? You can connect your own custom donation button to a Kindful donation plugin.

To set this up, you must use advanced tools in your web browser known as developer tools. With the developer tools, you can find the code that identifies your custom donation button. You can insert this code into the embed code for your Kindful donation plugin. 

First, determine whether your donation button has an ID. 

  1. Open Developer Tools in your web browser. To open developer tools:
    • In Chrome, Firefox, Edge, or Opera, right-click your donation button and click Inspect Element.
    • In Safari, select Preferences > Advanced > Show Develop menu in menu bar. Right-click your donation button and click Inspect Element.
  2. In the developer tools view, find your donation button. If the button has an ID, it might resemble this: #yui_23783923728357235.
  3. If the button does not have an ID, right-click the link tag and select Copy > Xpath. The code  copies to your clipboard.
    Example: //*[@id="mainNavigation"]/div[1]/a
  4. If your donation button has an ID, follow the steps in the Edit an Embed Code for a Button with an ID section.
  5. If your donation button does not have an ID, follow the steps in the Edit an Embed Code for a Button Without an ID section.

Edit and Use an Embed Code for a Button with an ID

  1. In Kindful, select Fundraising > Donation Plugins. 
  2. Next to the donation plugin, select Action > Get Embed Code.
  3. In the Embed Button Code section, click Copy to Clipboard.
  4. Paste the embed code (script) into a text editor (Notepad, Microsoft Word, Google Docs, or another application).
  5. In the embed code:
    1. Remove the line of code that starts with <a and ends with /a> .
    2. Edit the data-lookup-value to be the button ID.embed_edited.png
    3. To turn data styles off, add this code: data-styles-off='true'
      Tip: We recommend that you turn data styles off so you can apply the script to multiple elements on your website.
      embed_edited_data_styles.png
  6. In Squarespace, select your website.
  7. To execute the script on every page of your website, select Settings > Advanced > Code Injection. For more information about code injection, see Using Code Injection in the Squarespace documentation.
  8. Copy the script and paste it into the box.
    Note: If you later change your site structure, that might change which link is active.
  9. In the page editor, create a code block on the page. For more information about code blocks, see Code Blocks in the Squarespace documentation.
  10. In Kindful, copy the embed script.
  11. In Squarespace, paste the embed script into the code block. 

Edit and Use an Embed Code for a Button Without an ID

If your button does not have an ID, you can reference the block that contains the button when you edit the data-lookup-value in the embed code script tag. For example, the block might be named “#button_wrapper_id a”.

  1. In Kindful, select Fundraising > Donation Plugins. 
  2. Next to the donation plugin, select Action > Get Embed Code.
  3. In the Embed Button Code section, click Copy to Clipboard.
  4. Paste the embed code (script) into a text editor (Notepad, Microsoft Word, Google Docs, or another application).
  5. In the embed code, edit the data-lookup-value to be the xpath data that you copied for your button.
    Example: <script src='https://kindful.com/embeds/A012345601234560123456B/init.js' data-embed-id='f356fb7d-9dfc-4027-aa7a-683a3251177e' data-lookup-type='xpath' data-lookup-value='//*[@id="mainNavigation"]/div[1]/a'></script>
  6. In Squarespace, select your website.
  7. To execute this script on every page of your website, select Settings > Advanced > Code Injection. For more information about code injection, see Using Code Injection in the Squarespace documentation.
  8. Copy the script and paste it into the box.
    Note: If you later change your site structure, that might change which link is active.
  9. Using the page editor, create a code block on the page. For more information about code blocks, see Code Blocks in the Squarespace documentation.
  10. In Kindful, copy the embed script.
  11. In Squarespace, paste the embed script into the code block. 

The script is disabled while you are signed in and editing your website. You might see the message "Script Disabled." After you save the code block, you can select Preview in Safe Mode, which allows you to preview the donation button while you are signed in. If you save your changes and view your website, the button appears and the script is enabled.

Tip: To use multiple plugins on the same page, add data-styles-off='true' to your embed code. In Squarespace, in the footer, create a code block for each plugin and paste in the embed script. For information about how to edit the footer, see Editing Footers in the Squarespace documentation.

Center the Button on Your Squarespace Page

To center your donation button on your Squarespace page:

  1. Include the <a> tag within a <div> .
  2. Add this to the <div>: 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>

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

Comments