Before you start ❗
You will need access to Code Injection in Squarespace. This is only available as part of Squarespace's business and commerce plans. Read more on the Squarespace pricing page.
About Givebutter Widgets 🔎
Givebutter Widgets is the most powerful way to drive donations to your campaigns by putting calls to action right where your donors already are – on your website! Donors can submit a transaction (or purchase tickets) directly on your site, without being redirected.
Widgets can be used with any campaign type, including Forms, Pages and Events. Please note that an embedded Widget will not embed the entire campaign page for Pages and Events – it will embed the checkout flow.
Widgets created from the Givebutter dashboard are dynamic, which means any changes you make on Givebutter will update on your Widget, without needing to update your site's code. You can embed Givebutter Widgets on specific parts of your website by copying and pasting provided HTML code into the editor area of the website where you'd like them to appear.
Types of Widgets 🖥️
Button – Buttons can be added anywhere on your website, and display a donation form when clicked. Buttons can be added to the header or footer section of your website. Buttons have two configurable formats, Static and Floating.
Static – Placed within your site formatting (such as your site navigation). Scrolls with the page when you scroll down.
Floating – Positioned in the lower right corner of the page and "floats" on top of your site formatting so it is always visible. Does not scroll when you scroll down the page.
Form – Donor-friendly donation forms can be added to any page on your website. Directly embeds the entire Form, which scrolls with the rest of the page content.
Goal Bar – Showcase the progress of your campaign's success with a simple goal bar reflecting performance in real time. Also available as a thermometer-style embed.
Signup Form – Add an embedded form (or popup) to your external website to capture potential donor information for your newsletter mailing list. Contact form entries are automatically added as new contacts in your Givebutter account.
Supported payment methods 💸
Donors can complete transactions in a Widget using the following payment options:
Credit or debit card
Paypal
Venmo
Google Pay
Apple Pay will not appear in embedded Widgets, as limitations set by Apple prevent it from being used in iFrames. If you would like to provide this option, you will need to direct supporters to your Givebutter campaign page directly.
Customization options 🎨
Looking to customize your Widget or align it to a specific position on your site? You can alter a button's color, styling, and icon, as well as add an align attribute to position your Widget on the left, right, or center or your page. Goal bar Widgets also have configurable options for color and sizing. Read more about our available configuration options →
Installing Widgets on Squarespace ⚙️
Widgets are installed in two parts: the library, and the Widget itself. Take a look at our video guide below for step by step instructions on how to add Button and Form Widgets to your Squarespace site, or skip ahead if you prefer to read the instructions.
The Squarespace Code Injection option is now located under Website > Website Tools > Code Injection. All other steps in the video guide are up-to-date.
Add the library 📖
To get started with creating and managing Widgets, visit your Givebutter dashboard.
Go to Settings on the left-hand menu bar.
Click Integrations – only account admins have access to the Integrations page.
Click Widgets, and click on the Squarespace button.
The following window will appear, with instructions on how to add the library code to your Squarespace site. Follow the instructions shown, or read on for details and images showing the steps!
Click on the Website heading in your Squarespace account, and click Pages, nested under the Website heading.
Scroll down to the bottom of the sidebar menu, and under the Utilities heading, click Website Tools.
Click Code Injection.
You can also add "/config/pages/website-tools/code-injection" to the end of your Squarespace URL.
Don't see Code Injection in your account? This is only available as part of Squarespace's business and commerce plans. Read more on the Squarespace pricing page.
Under the Header section, paste your library code as found in your Givebutter dashboard.
Where is my library code?
You can find your library code by clicking the Squarespace button in the Widgets installation guide, or walk through the steps at the beginning of this section.
Save your changes, and navigate back to Givebutter. You should see that the library has been installed.
Embed a Widget ➕
In Squarespace, select Pages from your main navigation, and click on the page you would like to add the Widget to.
Click Edit in the upper left corner of your Squarespace page. This will open up the page editor.
In the section you'd like to add the Widget to, click Add Block.
Search for or select Code, and a new block will appear with some filler text inside it.
Click the Edit icon.
Remove the filler code and replace it with your Widget's embed code. The Widget will update!
Where's my Widget embed code?
Go to your campaign's Sharing tab, click Widgets in the sub-menu, and click Embed on the Widget you want to embed. You'll find the embed code located at the top of the popup window.
Save your changes, and exit the editor.
When you view your site, you can click the Widget to open up the donation checkout flow.
Removing a Floating Button Widget from specific pages on your site:
You can hide a Floating Button Widget from specific pages on your site using CSS. You'll need the Widget ID in order to hide it. Add the following CSS to the page that you'd like to remove the Widget from, replacing "WIDGETID" with the ID of the relevant Widget:
givebutter-widget[id='WIDGETID'] { display: none; }
Add a Static Button Widget to your Squarespace site header:
If you want to add a Static Button Widget to your Squarespace site header, use the following custom code, replace "XXXXXXX" with your Widget ID, then paste it into Code Injection > Footer:
<script> function appendWidget(){const e=document.createElement("givebutter-widget");e.id="XXXXXXX",e.align="right";const n=document.querySelector("nav.Header-nav.Header-nav--secondary > div");n.innerHTML="",n.appendChild(e)}if(document.querySelector("nav.Header-nav.Header-nav--secondary > div"))appendWidget();else{const c=new MutationObserver((e,n)=>{document.querySelector("nav.Header-nav.Header-nav--secondary > div")&&(appendWidget(),n.disconnect())});c.observe(document.body,{childList:!0,subtree:!0})} </script>Next, add a Call to Action (Donate) button in your Squarespace navigation header. The code snippet above replaces that button and turns it into a Widget. (If you do not add a button to your header in Squarespace, the script code won't do anything – it needs to replace a button that already exists.)