Using Fundraise Up on Squarespace

This tutorial will teach you how to add Fundraise Up’s Installation Code to a Squarespace website, so that you can provide your donors an elegant and in-site donation checkout experience!

Adding your Fundraise Up Installation Code to your Squarespace site

  1. Log into your account on Fundraise Up and copy the code from the Settings > Installation section.

    Untitled (5)-1
  2. In Squarespace Home Menu, click Settings, click Advanced, and then click Code Injection.

    advanced _ code injection

    In the Header field, paste the code. Click Save.

    code-inject
    This will connect your site with your Fundraise Up account so you can update your widget without reinstalling it each time you make a change.
  3. Now go to the Campaigns tab in your Fundraise Up dashboard and create and customize your checkout. Here's an article explaining Campaigns in more detail. Once done, save the widget and click on Save and Test.

    Untitled (6)-1
  4. Head over to the Elements tab and make some buttons! Our Elements article explains the process in more detail, but in summary:
    1. some Elements will give you HTML code which you can add to Code blocks in your Squarespace site,
    2. and some Elements will automatically appear on some or all pages of your site as per their URL Control settings.
  5. It is possible, with an extra step, to add an embeddable HTML Element, like Donate Button, to your Squarespace site's header bar, as shown in this screenshot:

    Screen Shot 2020-11-03 at 9.58.19 AM

    To do so:
    1. Copy the ID of the Element (usually something like XXXXXXXX) from its provided HTML code,
    2. And either:
      1. Go to your Squarespace site's Pages, click the plus button next to Main Navigation, and choose to add a Link - the link's text doesn't matter, because as long as the link's destination is #XXXXXXX (where XXXXXXXX is the Element's ID), the Element will render in its place in the header menu!
      2. Or, edit the "Button" in your Squarespace site's Header so that it links to #XXXXXXXX (where XXXXXXXX is the Element's ID), which will signal our code to replace the stock button with the Element you made.

        squarespace-button-adder