Contents:
Before you start
You will need access to Code Injector in Squarespace. As of 3/27/23, this is only available as part of Squarespace's business and commerce plans. Read more on the Squarespace pricing page.
Copy the Elements library from Givebutter
In your Givebutter dashboard, go to Account in the left-hand menu bar, and then Integrations.
Click on Elements.
Click Next.
Do not copy the text here; click Next. (special instructions for Squarespace)
For now, choose Enable Later. We'll come back to creating a button/bubble/form later.
In your Givebutter dashboard, click on Installation.
Click Copy.
Install the Elements library into your Squarespace account
In your Squarespace account, click on Settings.
Click on Advanced. You may have to scroll down to see this option.
Click on Code Injection.
Paste the copied code into the header section.
Click Save.
Types of Elements
Donation Bubbles add a bubble to your website that displays a donation form when clicked. By default, your Donation Bubble will float in the bottom right-hand corner of every page of your website.
Donation Buttons can be added anywhere on your website that displays a donation form when clicked.
Donation Forms are our donor-friendly donation forms you can add to any page on your website.
Create an Element
In your Givebutter dashboard, click New Element.
If you've left the Elements section, you can return there by going to Account in the left-hand menu bar, then Integrations, then Elements.
Choose which type of Element you want to create.
Customize your Element.
Click Create Element.
Do not click copy on the popup screen (special instructions for Squarespace).
Close the pop up screen.
Click Copy Code next to the element you want to use.
Visit our help article to learn more about creating and customizing Elements.
Install a bubble or button in Squarespace
In your Squarespace dashboard, paste the element code into the header or footer section you accessed in the library installation step. Make sure the element code is AFTER the library code.
Buttons can be pasted in the header or footer section, and will always be positioned at the far left.
Bubbles can be pasted in either section and will float on the bottom-right corner of your webpage.
Click Save.
Install a donation form in Squarespace
In your Givebutter dashboard, copy the code for the form element you want to insert.
In your Squarespace dashboard, go to the page where you want to insert the form.
Click Edit.
Click Add block in the section you want the form to appear in.
Choose code for type.
Double-click the code box that appears.
Delete the "hello world" text.
Paste the copied form code.
Click outside the content box.
Adjust position as desired.
Go to Done and then Save.