Add a recurring donation form to your Squarespace site
Embed a recurring donation form on Squarespace with a two-line Code Block snippet, no plugin. Works on Core and Commerce plans, with a hosted fallback for Personal.
Your campaign
Community fund
67% funded
Choose an amount
Web, kiosk, and QR gifts land in one dashboard.
Last updated July 2026 by Akif
Quick answer
To add a recurring donation form to Squarespace, add a Code Block and paste Givebear's two-line snippet. Code Blocks with scripts work on Core and Commerce plans; on the Personal plan, link a button to a hosted Givebear giving page instead. Donors can choose a monthly gift and pay by card, Apple Pay, or Google Pay.
Key takeaways
- In Fluid Engine, give the Code Block enough room so the form is not cropped.
- The same snippet can go on several pages, one per campaign.
Who this is for
- Nonprofit and church web managers running a Squarespace 7.1 site who need monthly recurring giving that the native donation block does not provide
- Squarespace designers who want a branded donate button in the header without installing a third-party donation app or paid plugin
- Treasurers and finance volunteers who need fund-restricted gifts and automatic receipts flowing into one donor database, not the Squarespace store
- Smaller orgs on a Personal plan that blocks custom scripts and need a reliable hosted giving page they can link a Donate button to instead
How do you embed the donation form on Squarespace?
Open the page in the editor and click an insert point or Add Block, then choose Code (this is the only block that runs a script tag). Paste the two Givebear lines, leave the block set to HTML, and turn off Display Source. Save the section, then click Done and publish. Because Squarespace will not render external scripts while you are logged in to the editor, the form area can look empty: use Preview in Safe Mode or open the live page in a private window to confirm it mounted.
To put a Donate button site-wide instead of on one page, add the same snippet (swapped to data-givebear-button) once under Settings, then Advanced, then Code Injection in the Header field. That injects it on every page, so you only maintain it in one place. Keep the script async as shown so it never blocks your page from painting.
The Givebear SDK is plain browser JavaScript, so a squarespace donation form behaves exactly the way it does on any other host: there is no Squarespace-only feature gap and nothing to keep in sync. You paste the same two lines into a Code Block that you would use anywhere else: an empty div that names your organization, then an async script tag that mounts the form after the page loads. <div data-givebear-embed data-organization-id="YOUR_ORG_ID"></div> followed by <script src="https://givebear.io/sdk/givebear.js" async></script>. The widget inherits your template fonts, so it reads as a native section rather than a bolted-on iframe.
What Squarespace does not do natively is recurring nonprofit donations: its commerce tools are built for products, subscriptions, and donation blocks that are one-time or tied to a store checkout, not for monthly tithing, fund-restricted gifts, or automatic donor receipts. That is the exact gap Givebear fills. The embedded form handles cards plus Apple Pay and Google Pay through Stripe, lets a donor switch a gift to monthly, routes it to a specific fund or campaign, and emails the receipt without you wiring up any of it inside Squarespace.
You have three drop-in shapes from the same script: data-givebear-embed for an inline form, data-givebear-button for a modal Donate button you can drop into a header section, and data-givebear-card for a card with suggested amounts. Optional attributes such as data-button-text, data-accent-color, data-fund-id, and data-campaign-id let you match your brand color and point one button at, say, your building fund and another at general giving. Givebear charges a flat platform fee from 1.9% to 5.9% depending on plan (one rate online, at kiosks, and on memberships), plus Stripe card processing at cost, with no setup fee and no monthly minimum. For in-person events, the same organization also powers a lobby donation kiosk so on-site and online gifts land in one donor record.
Personal plan and Fluid Engine gotchas to plan around
Custom JavaScript in Code Blocks and Code Injection requires a paid plan: Core, Plus, Advanced, Business, Commerce Basic, or Commerce Advanced. The Squarespace Personal plan strips script tags, so the embed will silently not load there. The fix is not a workaround inside Squarespace: point a normal Squarespace button block at your hosted Givebear giving page, which gives donors the full recurring, multi-fund experience without any custom code.
On Squarespace 7.1, a Code Block lives inside a Fluid Engine grid cell, so give it a tall enough cell or the inline form can clip on mobile; the modal button variant sidesteps that entirely. If you are on an older Classic Editor section or run other plugins that target data-section-id, note that converting a section to Fluid Engine rewrites that markup, so re-check the block after any conversion.
Why is recurring giving the real reason to embed Givebear on Squarespace?
Squarespace's built-in donation block and commerce checkout are designed around one-time gifts or store-style subscriptions, with no concept of a restricted fund, a donor-managed monthly tithe, or an automated tax receipt. Givebear's embedded form adds all of that on top of the page you already built, while Squarespace keeps doing what it is good at: layout, content, and your brand.
Because the gift is processed by Givebear over Stripe rather than your Squarespace store, recurring donors, fund balances, and receipts live in one donor record that also includes anything given at a lobby kiosk, so you are not reconciling a Squarespace store export against a separate spreadsheet at year end.
Practical use cases
- Drop a data-givebear-button Donate button into your site header navigation so every Squarespace page carries a giving call to action.
- Embed an inline data-givebear-embed form on a dedicated /donate page styled with your template fonts and accent color.
- Use data-givebear-card with suggested amounts on a campaign landing page and pass data-campaign-id to keep that campaign's reporting clean.
- Link a Squarespace button block to your hosted Givebear giving page when the site is on a Personal plan that disallows custom code.
Key features
- Two-line Code Block embed with no plugin and no app install
- Inline form, modal button, or suggested-amount card from one script
- Recurring monthly giving that Squarespace's native donation block lacks
- Cards plus Apple Pay and Google Pay via Stripe
- Fund and campaign routing with data-fund-id and data-campaign-id
- Hosted Givebear giving page as a fallback for Personal plans
Common questions
How do I add a donation form to Squarespace?
Which Squarespace plan do I need for the donation form?
Can the Squarespace donation form take recurring monthly gifts?
Does the embedded form support Apple Pay and Google Pay?
Related reading
See it with your own funds.
Book a 30-minute walkthrough. No slides and no hard sell: we set Givebear up around how your organization already gives.
- Your funds, set up the way your treasurer reports them
- Where a kiosk would go, and what it costs
- The reports your board will actually see
Rather set it up yourself? Start free
Loading available times
Or open the booking page