All Collections
Website Embeds
How to use Givebutter Elements on a Squarespace website
How to use Givebutter Elements on a Squarespace website
Add donation buttons, bubbles, and forms directly to your own Squarespace website
Sunny avatar
Written by Sunny
Updated over a week ago

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.

numbered steps
  • 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.

an arrow points to copy code

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.

Did this answer your question?