This badge displays the live progress of a Fundsurfer campaign as an SVG image that you can embed on any website.

Here's an example:

The badge fetches the latest public campaign data from Fundsurfer and renders a small progress widget showing:

• amount raised
• campaign target
• percentage funded

Replace YOUR_CAMPAIGN_ID with your Fundsurfer campaign ID:

<img
  src="https://your-valtown-url/widget/YOUR_CAMPAIGN_ID"
  alt="Fundsurfer campaign progress"
/>

Example:

<img
  src="https://your-valtown-url/widget/4801"
  alt="Fundsurfer campaign progress"
/>

If your Fundsurfer JSON URL looks like this:

https://www.fundsurfer.com/api/project/4801/json

then your campaign ID is:

4801

Paste this anywhere in your HTML where you want the badge to appear:

<img
  src="https://your-valtown-url/widget/YOUR_CAMPAIGN_ID"
  alt="Fundsurfer campaign progress"
  width="300"
/>

<a
  href="https://www.fundsurfer.com/crowdfund/your-campaign-slug"
  target="_blank"
  rel="noopener noreferrer"
>
  <img
    src="https://your-valtown-url/widget/YOUR_CAMPAIGN_ID"
    alt="Fundsurfer campaign progress"
    width="300"
  />
</a>

• Use the colour or color URL parameter to change the progress bar colour
• Eg ?colour=#3986d8

• The badge is served as SVG, so it stays sharp on all screen sizes.
• The displayed totals are pulled from the live Fundsurfer campaign data.
• If the campaign cannot be loaded, the badge will show an error state instead.

Before publishing, replace:

• https://your-valtown-url/ with your actual Val Town URL
• YOUR_CAMPAIGN_ID with your real Fundsurfer campaign ID