Create a Fundraising Tracker Plugin For Squarespace

Why Your Website Needs a Visual Fundraising Tracker

If your charity or organisation is raising funds, you’ve probably shared a fundraising target on your website. But if that target is just a line of text, you're missing a key opportunity to build momentum. A visual fundraising goal tracker adds real energy to a campaign and that’s exactly what the Fundraising Tracker plugin is designed to do.

This custom-built tool is ideal for anyone looking for fundraising goal tracker ideas that feel more engaging and motivating. Designed for use on Squarespace, it’s a simple way to turn your fundraising efforts into something donors can connect with instantly.

---

Step 1: Add the HTML Code

In your Squarespace page editor:

1. Add a "Code Block" to your page.

2. Paste the following HTML code into the block:

---

<div class="basic-fundraising-tracker"> <!-- Heart image --> <img src="https://cdn-icons-png.flaticon.com/512/833/833472.png" alt="Heart icon" class="tracker-heart-img" /> <!-- Fundraising text --> <div class="tracker-text"> <strong>$2,000</strong> raised of <strong>$10,000</strong> </div> <!-- Progress bar --> <div class="tracker-bar"> <div class="tracker-fill" style="width: 20%;"></div> </div> </div> Copy

Customising the HTML:

In this code you can change the currency amounts, and the percentage you’d like the tracker to show. See example in bold below:

---

<div class="basic-fundraising-tracker">

<!-- Heart image -->

<img src="https://cdn-icons-png.flaticon.com/512/833/833472.png" alt="Heart icon" class="tracker-heart-img" />

<!-- Fundraising text -->

<div class="tracker-text">

<strong>$2,000</strong> raised of <strong>$10,000</strong>

</div>

<!-- Progress bar -->

<div class="tracker-bar">

<div class="tracker-fill" style="width: 20%;"></div>

</div>

</div>

---

Step 3: Add the CSS Code

Style your progress bar to match your brand’s design:

1. Go to Pages > Scroll down to Custom Code > Custom CSS and paste this CSS:

/* =============================== ❤️ Fundraising Tracker Styles =============================== */ /* Container for the whole plugin */ .basic-fundraising-tracker { font-family: sans-serif; /* Change to your brand font if needed */ text-align: center; max-width: 400px; /* Adjust width if you want it wider/narrower */ margin: 2em auto; /* Adds spacing around the tracker */ } /* Heart icon above the tracker */ .tracker-heart-img { width: 60px; /* Change heart size */ margin-bottom: 10px; /* Space between heart and text */ } /* Text that displays the amount raised and goal */ .tracker-text { margin-bottom: 10px; /* Space below the text */ font-size: 1.1rem; /* Adjust font size */ font-weight: bold; color: #333; /* Change text colour to match your site */ } /* The background bar (empty part of the tracker) */ .tracker-bar { height: 24px; /* Thickness of the progress bar */ background: #eee; /* Bar background colour */ border-radius: 999px; /* Makes it rounded */ overflow: hidden; box-shadow: inset 0 0 5px rgba(0,0,0,0.1); /* Optional depth */ } /* The fill bar (progress amount) */ .tracker-fill { height: 100%; background-color: #E63946; /* Change this to your brand colour */ width: 0%; /* 💡 Set this in the HTML inline: e.g. style="width: 30%;" */ transition: width 1s ease-in-out; /* Smooth animation when loading */ } Copy

To update the CSS follow the notes within the code (grey text)

---

Upgrade to an animated fundraiser tracker

Squarespace Fundraising Tracker Plugin

$19.99

Buy Plugin

What Is the Fundraising Tracker Plugin?

The Fundraising Tracker is a Squarespace tracking plugin that displays an animated heart filling up as donations grow. It works well for charities, community projects, and purpose-driven brands that want to show real-time fundraising progress.

It’s easy to install, requires no coding skills, and is customisable to match your brand.

Why Use a Fundraising Goal Tracker?

Here’s why adding a tracker can improve your campaign results:

Visuals drive engagement

When people can see your progress, they feel more invested in helping you reach your goal. It creates a sense of momentum that’s hard to replicate with plain text.

Encourages transparency

Displaying your current total alongside your fundraising target builds trust with supporters. They know where their donation fits into the bigger picture.

Enhances campaign design

The animated heart adds movement and character to your fundraising page. If you’re currently searching for Squarespace fundraising thermometer options, this plugin offers a fresh, emotionally resonant alternative.

---

---

Bring your fundraising goals to life with the Fundraising Tracker, a beautifully animated heart-fill plugin designed exclusively for Squarespace. Whether you're a charity, community group, or purpose-led business, this plugin adds an engaging visual element to your campaign showing your progress as a rising liquid inside a heart.

Whether you're running a one-off campaign or long-term appeal, a Squarespace fundraising tracker can help you raise more by showing supporters exactly how close you are to your goal. The Fundraising Tracker offers a visual, accessible, and customisable way to do just that.

Try the free version or upgrade for more features either way, it's a powerful addition to your fundraising toolkit.

Ready to take your Squarespace website to the next level? Take a look at these awesome tricks to make your website stand out from the crowd!

---

Squarespace Fundraising Tracker Plugin