Giving Kit 1.0 · Install guide

Show people how close you are.

Giving Kit puts an appeal on any Squarespace page. It shows what you’ve raised as a bar or a thermometer, offers gift levels with their own Give buttons, and has a calculator that works out what a regular gift adds up to and what it really costs after tax. You paste it in once and change a few numbers, which takes about ten minutes.

What you need

• A Squarespace plan that runs JavaScript, which means Core, Plus or Advanced on the current plans, or Business, Commerce Basic or Commerce Advanced on older ones. The Basic and Personal plans don’t run custom scripts, so Giving Kit can’t work there.
• Somewhere people can actually give, such as a Squarespace donation page, Givealittle, PayPal, Stripe, Pushpay or your bank details on a page of your own. Giving Kit doesn’t take money itself. Its Give buttons send people to your giving page, with the amount they chose in the link if your page can use it.
• Squarespace 7.0 or 7.1. Both work.

Install

1. Open the page for your appeal in the Squarespace editor, add a block where you want it and choose Code. Leave the mode on HTML and switch “Display source” off.
2. Open paste-into-code-block.html from this download in any text editor (TextEdit or Notepad are fine), copy everything and paste it into the Code block.
3. The first line of what you pasted is a <div> with your settings on it. Change data-goal to your target and data-raised to what you’ve raised so far, both as plain numbers. Set data-currency to your currency’s three-letter code (NZD, AUD, GBP, USD and so on) and data-give-url to the address of your giving page.
4. On Squarespace 7.1, drag the Code block’s handles so it spans the full width of the section. On 7.0 it fills the column it sits in.
5. Save, then look at the live page in a private window. Squarespace doesn’t run scripts inside the editor, so you’ll see an empty block while you’re editing.

The paste shows the whole appeal. If you only want one part, change data-giving-kit="appeal" to progress, calculator or tiers. You can use as many Giving Kit blocks on a page as you like, for example a thermometer near the top and a calculator further down.

Setting up your appeal

Everything simple lives on the <div> line as an attribute. Lists, such as milestones and gift levels, go in the small settings block just inside the <div>, written between <script type="application/json"> and </script>. Here’s a complete appeal you can copy and change:

<div data-giving-kit="appeal" data-goal="180000" data-raised="112450" data-donors="214"
     data-deadline="2026-12-19" data-currency="NZD" data-tax="nz"
     data-give-url="/give?amount={amount}&frequency={frequency}">
<script type="application/json">
{
  "milestones": [
    { "at": 60000, "label": "Scaffolding and strip-out" },
    { "at": 120000, "label": "New iron and spouting" },
    { "at": 180000, "label": "Insulated and finished" }
  ],
  "presets": [20, 50, 100, 250],
  "tiers": [
    { "amount": 25, "frequency": "weekly", "title": "Spouting and flashings", "text": "Keeps the rain heading for the drains." },
    { "amount": 50, "frequency": "weekly", "title": "A square metre a fortnight", "badge": "Most chosen" },
    { "amount": 500, "frequency": "one-off", "title": "The kitchen end" }
  ],
  "impact": [
    { "each": 95, "one": "square metre of new roof", "other": "square metres of new roof" }
  ]
}
</script>
</div>

The settings block has to be valid JSON, so keep the double quotes and the commas between items. If a word processor turns your quotes curly, or you leave a comma before a closing bracket, Giving Kit tidies it and still works, and the setup check tells you it did.

Progress

Update data-raised whenever gifts come in (and data-donors, if you show it). The bar says “62% of $180,000”, counts up once when someone first scrolls to it, and shows how many days are left if you set data-deadline. On the deadline day it says “Last day to give”, and after that “Appeal closed”. When the total passes the goal, the bar fills and a “Goal reached” badge appears. Add data-style="thermometer" for a thermometer instead of a bar. It suits a narrow column beside your own text.

Milestones are amounts with a short label. Their marks fill in as the total passes them, and their labels sit under the bar when there’s room, or in a tidy list on phones.

Live numbers from a Google Sheet

If your treasurer keeps the total in a Google Sheet, Giving Kit can read it on every visit, so nobody has to edit the website. Make a tab with two columns, a name and a number, like this:

raised,112450
goal,180000
donors,214

Only those three names are read (it also understands “total raised”, “target” and “number of donors”), and a header row such as “Field, Value” is ignored. Dollar signs and commas in the numbers are fine. You can also put the three names across one row with the numbers in the row underneath. Then, in Google Sheets, choose File, Share, Publish to web, pick that tab, choose “Comma-separated values (.csv)” and copy the link it gives you. Add it to the <div> as data-sheet="…".

I’ll be honest about how far I’ve tested this. I built the reader against sample files in exactly that shape, and the demo reads one, but I couldn’t publish a real Google Sheet while making Giving Kit. So please open the setup check (below) after you add the link. It says whether the sheet was read and which numbers came from it. If the sheet can’t be reached, Giving Kit quietly uses the numbers on the <div> instead, so keep those roughly up to date as a fallback. Google can take about five minutes to update a published sheet, so a change won’t show instantly.

The Give buttons

data-give-url is where every Give button goes. If your giving page can take the amount in its address, use these placeholders and Giving Kit fills them in:

If your giving page uses other words for how often (some say once or month), map them in the settings block with "frequencyValues": { "one-off": "once", "monthly": "month" }. If it can’t take an amount at all, just use its plain address and every button goes there.

Tax

Set data-tax to the rules your donors give under. Tax depends on each person’s circumstances, so the calculator words everything carefully and I’d still suggest your treasurer checks it suits you.

• nz: New Zealand’s donation tax credit. Donors get a third back on gifts of $5 or more to approved donee organisations, up to their taxable income. Giving Kit works it out per year and rounds down to the dollar, so it never promises more than IRD would pay. It shows the credit, the real cost, and a line such as “That’s about $33 a week after your tax credit.”
• uk-giftaid: Gift Aid adds 25% to what the charity receives, for donors who pay UK income tax and make a declaration.
• au: Australian gifts of $2 or more to a deductible gift recipient are tax deductible. Donors can choose their tax rate to see an estimate, which is labelled “Estimate” and uses 2026–27 resident rates with the 2% Medicare levy. You can replace the rates with "auRates": [[17, "17% ($18,201–$45,000)"], …] in the settings block when they change.
• none (the default) shows no tax figures.

Gift levels and impact

Each gift level needs an amount, and can have a frequency (one-off if you leave it out), a title, a sentence of text and a badge. A badge such as “Most chosen” also highlights that card. Give a level its own "url" if it should go somewhere else, such as a sponsorship form. With NZ tax on, each card also says what the gift costs after the credit.

Impact items turn the calculator’s total into something people can picture. Give the cost of one thing and how to say one and many of it. With { "each": 95, "one": "square metre of new roof", "other": "square metres of new roof" }, a $5,200 pledge shows “54 square metres of new roof”. Up to three are shown.

Linking straight to a pledge

An email or newsletter can open the calculator already filled in. Add ?give= to the page address with the amount, how often and the years, for example yoursite.org/roof?give=50-weekly-3y or ?give=250-one-off. The first calculator on the page picks it up.

Run the setup check

Add ?give=check to the end of the page address, for example yoursite.org/roof?give=check. A panel appears above each Giving Kit block listing what it found: the goal and total, the deadline, where the currency came from, an example of where the Give buttons go, the tax rules, the amounts and gift levels, and whether a Google Sheet was read. Underneath is a plain list of anything that needs fixing, such as a missing goal, a total higher than the goal, a giving link with a placeholder it doesn’t know, or a currency code it can’t find. Visitors never see this panel unless they type that address themselves.

Options

These go on the <div> line. You only need the ones you want to change.

In the settings block you can use milestones, presets, tiers, impact, frequencyValues and auRates, as shown above.

Changing the wording

Every label can be changed, which is handy for other languages or your own tone. Put this in the Code block above the rest of the paste and change only the lines you want:

<script>
window.GivingKitStrings = {
  raised: 'given so far',
  reached: 'We did it',
  realCost: 'What it costs you',
  chooseGift: 'Pick a gift',
  give: 'Give {amount} now'
};
</script>

Words in curly brackets, such as {amount}, are filled in by Giving Kit, so keep them. If you’d like the full list of labels, email me and I’ll send it.

Troubleshooting

The block is empty while I’m editing

That’s normal. Squarespace doesn’t run scripts in the editor. Check the live page in a private window.

The Give buttons are missing

They hide when there’s no usable giving link. Add data-give-url, and make sure it’s an ordinary address starting with / or https://. The setup check names the problem.

The numbers from my Google Sheet don’t show

Open the page with ?give=check on the end. It says what happened, which is usually that the sheet was shared rather than published as CSV, or the rows are named differently. Published sheets can also take a few minutes to catch up after you change them.

The bar or buttons are a strange colour

Giving Kit uses your site’s button colour so it looks at home. If a section styles its buttons to match the background, Giving Kit notices and uses your text colour instead. To choose a colour yourself, add data-accent="#1f5560" with your own colour.

The milestone labels are in a list instead of under the bar

That’s on purpose. They sit under their marks when there’s room for all of them to be read, and switch to a list when the block is narrow or two milestones are close together.

Are the tax figures right for everyone?

They follow the published rules, round down wherever there’s a choice, and say “up to” or “estimate” where it matters. They can’t know someone’s income, so the small print under the calculator says so. If your organisation isn’t an approved donee (or equivalent), leave data-tax off.

Squarespace 7.0 with Ajax loading

Some 7.0 templates load pages without a full refresh. Giving Kit listens for that, but if it only appears after a reload, turn off Ajax loading under Design, Site Styles.

Updates and help

Updates for the 1.x versions are free. When one comes out you’ll get an email with the new files, and you replace the old paste with the new one. Your settings live on the <div> line and in the settings block, so keep those.

If you get stuck, email kris@singhstudio.co.nz with your page address and what you’re seeing. A screenshot of the ?give=check panel helps a lot.