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, or a team's sign up form
- 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
What is the website button?
A short piece of code that puts a campaign, raffle or team challenge on your own website. You choose a style on the fundraiser's page in your DONATE portal, copy the code and paste it into your site. It costs nothing extra: donations carry the same fees as on your campaign page.
What visitors see
- A button that opens the donation form: a Donate button on your page. A click opens the form in a pop-up, and the checkout runs inside it, from DONATE, so supporters never leave your website.
- The donation form, on the page: the whole form sits in your page, where you paste the code.
- A link button: a plain button that opens the fundraiser's DONATE page in a new tab. It uses no script, so it works where a website does not allow scripts.
- The money goes to your organisation whichever one you use.
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.
Why add it to my website?
Because supporters can give where they already are, on your own website, through the same DONATE checkout as your campaign page, with nothing for you to host or keep up to date.
What it does for you
- With a pop-up or the form on the page, supporters give without leaving your website.
- The checkout is DONATE's, so card and payment details never touch your website.
- DONATE writes the code, and your choices show in the preview before you copy it.
- A link button needs no script, so it works on websites that do not allow them.
Which fundraisers can I add?
Campaigns, raffles and team challenges. A campaign can be a pop-up, a form on the page or a link button. A raffle is a link button that opens its own DONATE page in a new tab. A team challenge is a link to its team page, and if people can join it, a Sign up button or form.
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: an Enter the raffle button. Supporters choose their tickets on the raffle's page, confirm they are 16 or over, accept the terms and pay. The ticket checkout always runs on DONATE's page, never inside your website.
- A team challenge: a Support our team button that opens the team's page, where people can sponsor the team or ask to join it.
- A team challenge people can join for free can also show its sign up form: a Sign up button that opens it in a pop-up, or the form on the page.
- A team challenge with entries can instead have a Sign up button that opens its registration page.
- Auctions, votes and tickets do not have a website button. Use their link or QR code, or link to them from your website.
Where the card is
- Campaigns: open the campaign and its Setup tab, and click Website in the side menu. Click More to open the card.
- Raffles: open the raffle and its Setup tab. The card is at the bottom, below Delete this raffle. Click More to open it.
- Team challenges: open the challenge and its Setup tab, and click Website in the side menu. Click More to open the card.
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.
What do I need before I start?
The website button switched on for your organisation, a fundraiser that is live, and a website that lets you add your own HTML code. DONATE switches the button on for each organisation: until then, the card has a Request access button. Click it and we will be in touch.
Getting it switched on
- 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.
A fundraiser that can take money
- 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.
- A team challenge's button only takes donations while the challenge is live and the campaign it raises for is switched on.
- Add the code to your website once the fundraiser is live.
A website that takes HTML
- A campaign's pop-up or form needs a website that lets you add HTML code that runs scripts. Some website plans do not allow that. Check your plan, or ask your website provider.
- A link button works in any website that accepts HTML.
Ask us to switch it on
Before it is switched on, the card explains what it does and has a Request access button.
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.
How do I add it to my site?
Open the fundraiser in your portal, choose a style on its Add to your website card, click Copy code, and paste the code where the button or form should appear on your website. The preview is the real button or form, and the code changes as you go.
The card
- Show (campaigns only): a button that opens the donation form, the donation form on the page, or a link to the campaign page.
- Button text: the words on your button, up to 40 characters. Leave it blank for Donate, Enter the raffle, Support our team, or Sign up for a team's sign up form or registration page.
- Button colour: pick a colour or type its code, such as #7A1F2B.
- Shape: Pill, Rounded or Square.
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.
- Click Copy code. If it does not work in your browser, select the code and copy it by hand. How to add it opens this guide.
- Each fundraiser has its own code. To add a second one, copy its code too. Each campaign's pop-up or form code has its own name for the place it draws in, so paste each one only once on a page.
Where to paste it
- 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
- 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.
The card on your campaign
Show, Button text, Button colour and Shape, then the preview and the code to copy.
The card on your raffle
The preview shows the Enter the raffle button, and the card says what happens when supporters click it.
The card on your team challenge
The card, opened with More, shows A link to the team page, with a Support our team button in the preview.
How do I change how it looks?
Change the button text, colour and shape on the card, then copy the code again and replace the old code on your site. For a campaign, the Website button tab under Integrations has every style: text and form colours, a font, where the form opens and more. The campaign card links to it: More styles on the Integrations page.
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
- 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. 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.
- 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.
Only live campaigns
- The Integrations tab lists live campaigns only. Raffles and team challenges are styled on their own pages.
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.
Or a plain link
A link to the campaign page (no script) gives a button that opens the campaign's page. The code is a single link.
Copy your code
Click Copy code. The button changes to Copied and a message says Code copied.
How do I check it works?
Open your published page on a computer and on a phone, and check the button shows, the form or page opens and your amounts are right. The preview and your website take real payments, so stop at the payment step, or try a campaign's checkout in its Preview before it goes live.
Before a campaign goes live
- 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.
What happens when it closes or ends?
The form on your website stops taking donations and says why. A link button still opens the fundraiser's page. Take the code off your website, or replace it with the code for your next fundraiser.
What the form says
- 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.
- Once you switch Live off, the form says Campaign not found.
Raffles
- Once a raffle with one draw is drawn, its page says Raffle drawn and sells no more tickets.
Can my AI assistant give me the code?
Yes, if you have connected Claude or another AI assistant to DONATE. Ask it, 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, and you paste it in yourself.
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.
How do our developers get the code?
From the DONATE Account Data API, with a key that has the causes:read scope. It gives the same code as your portal and is read-only: it never installs anything. The API is switched on for each organisation on request: email hello@nationalfundingscheme.org.
Endpoints
- GET /v1/campaigns/{id}/website-button: a campaign.
- GET /v1/raffles/{id}/website-button: a raffle.
- GET /v1/challenges/{id}/website-button: a team challenge.
- Optional style: mode, buttonText, buttonColor, buttonTextColor and shape. Mode is popup, inline or link for a campaign; link for a raffle; for a team challenge, link, or popup and inline (its sign up form) when people can join it for free, or signup (its registration page) when it has entries.
- 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
What does it cost?
Nothing extra. A donation through a campaign's button is a donation to your campaign, with the same fees as on your campaign page, and DONATE shows the fee and the net amount on every donation in your portal.
Fees
- Charities, and companies raising for charities: 4.5 per cent plus 22p on a donation without Gift Aid. When the supporter adds Gift Aid there is no percentage fee: you keep the whole donation less 22p, plus 60 per cent of the Gift Aid, and our fee is the other 40 per cent.
- For charities: DONATE claims the Gift Aid and pays it to you with your payout. Do not claim Gift Aid on these payments yourself as well. For a company, the Gift Aid on its campaigns goes on to its charities.
- Other organisations: 5 per cent plus 22p; when the supporter adds Gift Aid, DONATE claims it and keeps all of it as the fee instead of the 5 per cent.
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 (at most £12 a month), and a transfer charge of £7.50 plus 0.5 per cent of the payout for charities and companies raising for charities, or 1.5 per cent for other organisations (at least £3 either way).
Settings reference
Website button settings
| Setting | What it does | Default |
|---|---|---|
| Show | Campaigns: a button that opens the donation form, the donation form on the page, or a link to the campaign page. Team challenges people can join: a link to the team page, plus a Sign up button that opens the sign up form and the sign up form on the page (free to join), or a Sign up button to the registration page (with entries). | A button that opens the donation form; a link for a team challenge |
| Button text | The words on the button. Up to 40 characters. | Donate, Enter the raffle, Support our team, or Sign up |
| Button colour | The button's colour. | #19BCBA (DONATE teal) |
| Shape | Pill, Rounded or Square. Button shape on the Integrations tab. | Pill |
| Campaign | Integrations tab only. The live campaign the button is for. | Your first live campaign |
| Text colour | Integrations tab only. The colour of the button's words. | #ffffff (white) |
| Form opens | Integrations tab, pop-up only. Centre, over the middle of the page, or Left or Right, under the button. | Centre |
| Start with | Integrations tab, form on the page only. The form straight away, or A donate button that opens it. | The form |
| Form colour | Integrations tab, pop-up or form only. Buttons and the selected amount inside the form. | #19BCBA (DONATE teal) |
| Font | Integrations tab, pop-up or form only. A font name for the form. Blank uses DONATE's font. | Blank |
| Suggested amount | Integrations tab, pop-up or form only. Preselects this amount. Donors can still change it. | Donor chooses |
| Start on monthly giving | Integrations tab, pop-up or form only. Use it only for a campaign that accepts monthly gifts. | Off |
Questions
- 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.
- Does it work with WordPress, Wix or Squarespace?
- Yes. Where to paste it in each is in How do I add it to my site? On Wix, use the form on the page or a link button.