NFS Logo

DONATE Website button

Add a Donate button to your website

Put a campaign, raffle or team challenge on your own website. Choose a style, copy a short piece of code from its page in your portal, and paste it into your site.

  • An Add to your website card on every campaign, raffle and team challenge
  • A Donate button that opens the form in a pop-up
  • Or the whole donation form, on your page
  • Or a plain link button, for sites that do not allow scripts
  • Raffle and team challenge buttons that open their DONATE page
  • Your own button text, colour and shape
  • A live preview before you copy the code
  • The same checkout as your campaign page
  • Works in any website that accepts HTML code
Updated

What it is and where to find it

The website button puts a campaign, raffle or team challenge on your own website. Each one's page in your DONATE portal has an Add to your website card: choose a style, check the preview, and copy the code. For more campaign styles, use the Website button tab under Integrations.

Where the card is

  • Campaigns: open the campaign and its Settings tab. The card is in the right-hand column.
  • Raffles: open the raffle and its Details tab. The card is under Promote your raffle.
  • Team challenges: open the challenge. The card is at the top of the right-hand column.

What each one gets

  • A campaign: a button that opens the donation form in a pop-up, the form on the page, or a plain link button.
  • A raffle or team challenge: a link button that opens its own DONATE page in a new tab.
  • Auctions, votes and tickets do not have a website button. Use their link or QR code, or link to them from your website.

Getting it switched on

  • DONATE switches the website button on for each organisation. Until then, the card says what it does and has a Request access button. Click it and we will be in touch.
  • If you already use something else under Integrations, such as the API, the card asks you to email us instead.
  • Once you have asked, the card shows the date you asked.
  • You can also email hello@nationalfundingscheme.org.

Ask us to switch it on

Before it is switched on, the card explains what it does and has a Request access button.

Add a campaign

On a campaign's Settings tab, choose what to show, style the button, and copy the code. The preview is the real button or form, and the code changes as you go.

Show

  • A button that opens the donation form: a Donate button on your page. A click opens the form in a pop-up.
  • The donation form, on the page: the whole form sits in your page, where you paste the code.
  • A link to the campaign page: a plain button that opens the campaign's DONATE page in a new tab. It uses no script, so it works where a website does not allow scripts.

The button

  • Button text: the words on your button. Leave it blank for Donate. Up to 40 characters.
  • Button colour: pick a colour or type its code, such as #7A1F2B.
  • Shape: Pill, Rounded or Square.
  • Want a text colour, a form colour, a font, a suggested amount or monthly giving to start? Click More styles on the Integrations page.

The card on your campaign

Show, Button text, Button colour and Shape, then the preview and the code to copy.

Add a raffle

A raffle goes on your website as a button that opens the raffle's own page on DONATE in a new tab. Supporters choose their tickets there, confirm they are 16 or over, accept the terms and pay. The ticket checkout always runs on DONATE's page, never inside your website.

The raffle's button

  • Button text: leave it blank for Enter the raffle, or type your own. Up to 40 characters.
  • Button colour and Shape: as for a campaign.
  • The button is a plain link with no script, so it works on any website that accepts HTML.

After the draw

  • Once a raffle with one draw is drawn, its page says Raffle drawn and sells no more tickets. Take the button off your website, or replace it with the code for your next raffle.

The card on your raffle

The preview shows the Enter the raffle button, and the card says what happens when supporters click it.

The raffle button on your website

The button sits on your page in the colour you chose. Here it is Rounded, in

The raffle opens in a tab

A click opens the raffle's page on DONATE in a new tab, where supporters choose their tickets and pay.

Add a team challenge

A team challenge goes on your website as a button that opens the team's page on DONATE in a new tab. There, people can sponsor the team or ask to join it.

The team's button

  • Button text: leave it blank for Support our team, or type your own. Up to 40 characters.
  • Button colour and Shape: as for a campaign.
  • The button only takes donations while the challenge is live and the campaign it raises for is switched on. The card tells you if either is off.

The card on your team challenge

The card sits at the top of the right-hand column, with a Support our team button in the preview.

More campaign styles on the Integrations page

The Website button tab under Integrations has every style for a campaign. Choose a live campaign, then how it shows on your website. Raffles and team challenges are set up on their own pages.

A button that opens the form

  • Button text: the words on your button, such as Give a toy. Up to 40 characters.
  • Button colour and Text colour: pick a colour or type its code, such as #7A1F2B.
  • Button shape: Pill, Rounded or Square.
  • Form opens: Centre opens the form over the middle of the page. Left and Right open it under the button.

The form, on the page

  • The donation form sits in your page, where you paste the code.
  • Start with: The form shows it straight away. A donate button shows a Donate button that opens the form in the same place.

For either of those

  • Form colour: the buttons and the selected amount inside the form.
  • Font: the name of a font for the form. Leave it blank to use DONATE's font.
  • Suggested amount: preselects this amount. Donors can still change it.
  • Start on monthly giving: use it only for a campaign that accepts monthly gifts.

A link to the campaign page (no script)

  • A plain button that opens the campaign's DONATE page in a new tab, with your Button text, colours and shape.
  • Use it where your website does not allow scripts, or where you would rather supporters give on the campaign page.

The Website button tab

Choose a campaign and how it should look on the left. The preview and the code are on the right.

Style your Donate button

Button text, colours, shape and where the form opens. The preview shows the real button.

Or put the form in

With The form, on the page, the preview shows the donation form as it will sit on your website.

Copy the code

Code for your website holds everything your choices make, on the card and on the Integrations tab alike. Click Copy code, and it is ready to paste into your site. How to add it opens this guide.

About the code

  • For a campaign's pop-up or form, it is a few lines of HTML. It loads a small script from easydonate.org, and the script draws your button or form where the code sits.
  • For a link button, it is a single link with its own style, and no script.
  • If Copy code does not work in your browser, select the code and copy it by hand.
  • Change a setting later? Copy the code again and replace the old code on your site.
  • Each fundraiser has its own code. To add a second one, copy its code too.

Copy your code

Click Copy code. The button changes to Copied and a message says Code copied.

Add it to your site

Paste the code where the button or form should appear. Any website that lets you add your own HTML code can take it. Most website builders have a block for this.

Your own HTML

  • Paste the code into the page's HTML where the button should go, then publish the page.

WordPress (block editor)

  • Add a Custom HTML block where the button should go, paste the code into it, then update the page.

Wix

  • Add an Embed HTML element, choose Code, paste the code, then publish.
  • Wix shows pasted code inside its own box on the page, so a pop-up can only open inside that box. On Wix, choose The form, on the page, or a link button, and make the box tall enough for what it shows.

Squarespace

  • Add a Code block where the button should go, paste the code, then save.

If the button does not show

  • Some website plans do not allow code that runs scripts. Check your plan, or ask your website provider.
  • Check that you pasted all of the code, from the first line to the last.
  • Some website builders only run the code on the published page, not in the editor. Publish, then check the live page.
  • Each campaign's pop-up or form code has its own name for the place it draws in. Paste each one only once on a page.

What supporters see

Supporters see your button or form as part of your page. With a campaign's pop-up or form, the checkout runs inside it, from DONATE, so they never leave your website. A link button opens the fundraiser's DONATE page in a new tab. The money goes to your organisation either way.

Giving through your website

  • The checkout is the same as on your campaign page, with your campaign's amounts and options. If the campaign has match funding, the form shows what each gift will be worth, as it does here.
  • With a pop-up, supporters can close it with the cross or by clicking outside it. When they reach the end of the form, it closes by itself.
  • The form on the page grows and shrinks to fit each step, so there is no box to scroll inside.
  • Donations through your website show with your campaign's other donations in your portal.

Your button, your page

The button sits on your page in the colour you chose, wherever you pasted the code.

The form opens over it

A click opens the donation form over your page. The cross closes it.

The form on a phone

With The form, on the page, the form sits in your page and fits a phone screen.

Test it

The preview on the card and on the Website button tab is the real button or form, so what you see there is what your website will show. Check it before you copy the code, then check your own page once it is published.

When it cannot take money yet

  • The card shows a note if the fundraiser cannot take money right now: not published yet, switched off, waiting for approval or declined, or a team challenge whose campaign is switched off. A campaign's form shows Campaign not found until it is live.
  • If you switch on Close donations for a campaign, the card says so for the pop-up or the form, and the form says the campaign is fully funded and takes no more donations.
  • A campaign that reaches its target with Stop taking donations at target on shows as fully funded in the form too. The card has no note for that.
  • To try a campaign's checkout before it goes live, use its Preview: it is the same checkout, and no payment is taken. The screen calls it Rehearsal mode.

Once the code is on your site

  • Open the page on a computer and on a phone. Check the button shows, the form or page opens and your amounts are right.
  • The preview and your website take real payments. Any gift made there to test it is a real payment.
  • Stop at the payment step if you only want to check how it looks.

A campaign not live yet

The card says the campaign has not been published yet, so its form shows Campaign not found until it is.

Ask your AI assistant

If you have connected Claude or another AI assistant to DONATE, ask it for the code: for example, give me the website button for our Christmas Raffle. It gets the same code as your portal, through the connector's get_website_button tool.

What it can and cannot do

  • It can give you the code for a campaign, raffle or team challenge, with the button text and colour you ask for, and for a campaign a pop-up, the form on the page or a link. For the shape, use the card.
  • It cannot put the code on your website. You paste it in yourself.
  • It tells you if the fundraiser cannot take money yet, or if the website button is not switched on for you.
  • The AI assistant connector is switched on for each organisation on request. See AI Assistants on our website.

For developers: the API

The DONATE Account Data API gives the same code to your own systems, with a key that has the causes:read scope. It is read-only: it never installs anything. The API is switched on for each organisation on request: email hello@nationalfundingscheme.org.

Endpoints

  • GET /v1/causes/{id}/website-button: a campaign or a raffle.
  • GET /v1/challenges/{id}/website-button: a team challenge.
  • Optional style: mode (popup, inline or link; link only for a raffle or team challenge), buttonText, buttonColor, buttonTextColor and shape.
  • While the website button is off, the answer has no code and says how to ask for it.
  • The API docs: https://api.easydonate.org/docs

Fees

There is no charge for the website button. A donation through a campaign's button is a donation to your campaign, with the same fees as on your campaign page. DONATE shows the fee and the net amount on every donation in your portal.

Fees for charities

  • Without Gift Aid: 4.5 per cent of the donation plus 22p.
  • With Gift Aid: 40 per cent of the Gift Aid plus 22p, and no percentage is taken from the donation itself.
  • Gift Aid: DONATE claims it and pays it to you with your payout. Do not claim Gift Aid on these payments yourself as well.
  • Organisations that are not charities pay 5 per cent plus 22p. Gift Aid is only claimed for charities.

Raffles and team challenges

  • A raffle's button opens its page, so tickets are bought there as payments, not donations, with no Gift Aid. Each carries the raffle fee of 4.5 per cent plus 22p for charities, or 5 per cent plus 22p for other organisations.
  • A team challenge's button opens the team's page. Sponsorship there is a donation, with the fees above.

Charges on each payout

  • Charges on each payout: a usage fee of £3 for each week (Monday to Sunday) in which your organisation receives £10 or more, and a transfer charge of 0.5 per cent of the payout (at least £3) plus £7.50. Organisations without charity rates pay 1.5 per cent plus £7.50.

Settings reference

Website button settings

SettingWhat it doesDefault
ShowCampaigns only. A button that opens the donation form, the donation form on the page, or a link to the campaign page.A button that opens the donation form
Button textThe words on the button. Up to 40 characters.Donate, Enter the raffle or Support our team
Button colourThe button's colour.#19BCBA (DONATE teal)
ShapePill, Rounded or Square. Button shape on the Integrations tab.Pill
CampaignIntegrations tab only. The live campaign the button is for.Your first live campaign
Text colourIntegrations tab only. The colour of the button's words.#ffffff (white)
Form opensIntegrations tab, pop-up only. Centre, over the middle of the page, or Left or Right, under the button.Centre
Start withIntegrations tab, form on the page only. The form straight away, or A donate button that opens it.The form
Form colourIntegrations tab, pop-up or form only. Buttons and the selected amount inside the form.#19BCBA (DONATE teal)
FontIntegrations tab, pop-up or form only. A font name for the form. Blank uses DONATE's font.Blank
Suggested amountIntegrations tab, pop-up or form only. Preselects this amount. Donors can still change it.Donor chooses
Start on monthly givingIntegrations tab, pop-up or form only. Use it only for a campaign that accepts monthly gifts.Off

Questions

Can I add a Donate button to my own website?
Yes, for your campaigns, raffles and team challenges. In your DONATE portal, open the fundraiser and find Add to your website, choose a style, click Copy code, and paste the code into your website.
How do I get the website button switched on?
DONATE switches it on for each organisation. Click Request access on the Add to your website card of any campaign, raffle or team challenge, or email hello@nationalfundingscheme.org, and we will be in touch.
Which fundraisers can I put on my website?
Campaigns, raffles and team challenges. A campaign can be a pop-up, a form on the page or a link button. A raffle or team challenge is a button that opens its own DONATE page in a new tab. For auctions, votes and tickets, use their link or QR code.
Can I change the colour?
Yes. Choose the button's colour and shape on the card. The Integrations tab also has a text colour and a form colour for a campaign. The preview shows each change. Copy the code again after a change and replace the old code on your site.
Can the form use my website's font?
Type the font's name in Font. The form is a separate page from DONATE, so it can only use a font the supporter's device already has, not a web font your website loads. Leave Font blank to use DONATE's font.
Will it slow my website down?
A campaign's pop-up or form loads one small script. The pop-up only loads the form when a supporter clicks it. The form on the page loads with your page. A link button loads nothing at all.
Is it secure?
Yes. The form runs from DONATE inside your page, so card and payment details go to DONATE and its payment providers, never to your website. Your website is only told the amount and any Gift Aid, never the donor's name or email address. The money goes to your organisation, whichever website shows the form.
Does it work with WordPress, Wix or Squarespace?
A campaign's pop-up or form works in any website that lets you add HTML code that runs scripts. A link button works in any website that accepts HTML. Use a Custom HTML block in WordPress, an Embed HTML element in Wix, or a Code block in Squarespace. Wix shows the code inside its own box, so use the form on the page or a link button there.
Does it cost anything extra?
No. There is no charge for the website button. Donations through it carry the same fees as donations on your campaign page, set out in Fees.
Can I test it without paying?
Not on the button itself. The preview and your website take real payments. Before a campaign goes live, use its Preview to try the same checkout with no payment taken.
What happens when my campaign ends?
Once you switch Live off, the form on your website says Campaign not found. If the campaign is shown as fully funded, the form says so and thanks supporters instead. A link button still opens the campaign's page. Take the code off your website, or replace it with the code for your next campaign.
Can I put more than one campaign on a page?
Yes. Copy each fundraiser's code. A campaign's pop-up or form code has its own name, so they work side by side on one page.
Can my AI assistant give me the code?
Yes, if you have connected Claude or another AI assistant to DONATE. Ask it for the website button for a campaign, raffle or team challenge. It gives you the code to paste. It cannot add it to your website for you.
Can our developers get the code from the API?
Yes. The DONATE Account Data API has GET /v1/causes/{id}/website-button for a campaign or raffle and GET /v1/challenges/{id}/website-button for a team challenge. See https://api.easydonate.org/docs