Squarespace integration

This guide adds the Donations Embed to any Squarespace page via a Code Block. It works with Squarespace 7.1 (the current generation) and Squarespace 7.0.

Note: Squarespace requires a Business plan or higher to use Code Blocks. The free Personal plan blocks them. Confirm your plan before starting.

Step 1: Generate a sandbox publishable key

In the 1st Flock Hub:

1. Open Donations Embed → Keys.
2. Click Create key pair.
3. Set environment to Sandbox and name it (e.g. My Squarespace site - sandbox).
4. Copy the publishable key (starts with pk_test_).

Step 2: Add a Code Block to a page

1. Edit the page where you want the embed (the page editor; not the Pages settings panel).
2. Hover over the spot where you want the embed and click the + insert button.
3. Pick Code from the block library (filed under "More").
4. In the Code Block editor:
   • Set the Type to HTML.
   • Display source is OFF.
5. Paste the snippet below into the editor. Replace pk_test_REPLACE_ME with your publishable key.

<flock-donate
  publishable-key="pk_test_REPLACE_ME"
  mode="inline"
></flock-donate>
<script type="module" src="https://sandbox.payments.1stflock.com/v1.js"></script>

1. Click outside the Code Block to apply.
2. Click Save (top of the editor) to publish.

Step 3: Test the donation flow (sandbox)

1. Open the published page in a browser (use Preview mode, or the live URL after saving).
2. Walk through the donor flow.
3. At the payment step, use these sandbox card details:

See Getting Started → Sandbox testing for the canonical sandbox card details (4111 1111 1111 1111, exp 10/29, CVV 123).

1. Submit. You should see a confirmation screen with an ID like don_8a1b9c4d.
2. Open the Hub's Donations tab — your test donation appears within a few seconds, marked with a TEST badge.

Step 4: Switch to live

When you are ready to take real donations:

1. Generate a live key pair in the Hub (environment set to Live).
2. Edit the page in Squarespace.
3. Open the Code Block.
4. Replace the pk_test_… value with the new pk_live_… value.
5. In the same snippet, change the script src from https://sandbox.payments.1stflock.com/v1.js to https://payments.1stflock.com/v1.js.
6. Save.

The publishable key and the script host must change together — they are paired.

Cross-mismatch enforcement. If you load the SDK from payments.1stflock.com but supply a pk_test_* key, the SDK throws with: Live SDK cannot use test keys. Load https://sandbox.payments.1stflock.com/v1.js instead. Same in reverse for sandbox.payments.1stflock.com + pk_live_*.

Customisation

Centre the embed and constrain its width

Squarespace Code Blocks default to the full width of the page section. Constrain the embed:

<div style="max-width: 480px; margin: 0 auto;">
  <flock-donate
    publishable-key="pk_test_REPLACE_ME"
    mode="inline"
  ></flock-donate>
</div>
<script type="module" src="https://sandbox.payments.1stflock.com/v1.js"></script>

Modal launcher button

For a non-disruptive call-to-action that opens the flow in a modal:

<flock-donate
  publishable-key="pk_test_REPLACE_ME"
  mode="modal"
  trigger-label="Give"
></flock-donate>
<script type="module" src="https://sandbox.payments.1stflock.com/v1.js"></script>

Constrain to a specific fund

<flock-donate
  publishable-key="pk_test_REPLACE_ME"
  funds="missions"
  default-fund="missions"
></flock-donate>
<script type="module" src="https://sandbox.payments.1stflock.com/v1.js"></script>

The full attribute reference is in Browser Embed.

Common pitfalls

Note: The Code Block option is greyed out. Your Squarespace plan does not include Code Blocks. Upgrade to the Business plan or higher.

Note: The script tag was stripped after I saved. Squarespace's Code Block sometimes silently strips <script> tags during preview rendering even when it preserves them in the saved page. Reload the live page (not the preview) to confirm.

Note: The embed renders, but the modal/drawer opens behind the Squarespace top navigation. Your site is using a sticky top navigation with a high z-index. Add inline CSS to the Code Block to nudge the embed's portal above it:

<style>
  flock-donate {
    --flock-portal-z-index: 9999;
  }
</style>
<flock-donate publishable-key="pk_test_REPLACE_ME" mode="modal"></flock-donate>
<script type="module" src="https://sandbox.payments.1stflock.com/v1.js"></script>

Note: Squarespace's "Lock-page" feature blocks the script. If your page is password-protected, the script tag still loads — but if you have Squarespace's "Lock entire site" enabled, the global page sets a CSP that blocks third-party scripts. Allowlist both payments.1stflock.com and sandbox.payments.1stflock.com in Settings → Advanced → Code Injection → Headers with the CSP recipe in Compliance & Security.

Next steps

• Try other render modes — see Browser Embed → Render modes.
• Receive donation events on your server — see Webhooks.
• Add a CSP — see Compliance & Security.