How To Add A Donate Button To Your Website [Step-By-Step Guide]
A donate button on your website can make it easy to grab visitors' and potential donors' attention and encourage them to quickly give to your organization. In this article, you'll learn how to easily embed your Donorbox donation button on your website. Plus, we'll walk you through three fantastic donation button examples and some frequently asked questions.
It’s simple: your nonprofit needs donations to keep doing your mission-driven work.
With this in mind, it makes sense to invest time and thought into your nonprofit’s website, donation page, and donate button. Your donate button is the main call to action on your website – and it’s important to make it stand out.
Optimizing your donate button, your website, your landing pages, and your donation page will lead to an increase in online donations. In essence, your donate button should act as an invitation for your website visitors to support your nonprofit.
In this article, we’ll cover the best practices for a donate button, tips to make your button better, and steps to add one to your website. Plus, we have three great examples of successful donation buttons and some FAQs.
What is a Donate Button?
A donate button – also known as a donation button – is simply a button on a nonprofit’s website or on any other online fundraising platform that leads donors to a donation page or pop-up donation form. This allows them to quickly and easily make a contribution to the organization.
Donate buttons can be used on a nonprofit’s website as well as on platforms such as YouTube, Twitch, and Facebook. Adding donate buttons to these platforms is a great way to encourage giving from people who are already engaged with your content and who may feel more compelled to donate as a result.
Donorbox makes it easy for nonprofits to add a donate button to their websites. You can simply copy and paste the code into your website editor to start using the button.
You can access two embeddable donate buttons, including –
A donate button linked to your secure donation page. When the donor clicks on the donate button, they will be taken to your donation page hosted on Donorbox.
A donate button for a pop-up donation form. With this, a click on the donate button will make your donation form pop up on the same webpage your support is currently visiting.
With the secure donation page, you don’t need to install any additional SSL on your website. However, if you want to use a pop-up modal form, make sure that your website is SSL-secured.
Here’s an example of what a pop-up donation form looks like using Donorbox.
A button that stays in the same place as your website visitors browse is a constant and effective reminder to give – and it can pay off big time. Organizations that choose to use a Sticky Donate Button can bring in up to50% more donations.
Donorbox’s Sticky Donate Button is easy to add to your website and it has a subtle animation to draw your donors’ eyes right to it. We’ll show you how to create one for either your donation page or your pop-up donation form in the steps below!
From the Launchpad, click the “Donate Button” tab.
On the left side of this page, you can customize the look and settings of the donate button that will link your donors to your donation page.
You can set the default recurring donation interval, choose the pre-filled default donation amount, and change the size/color of your button. You can also choose to hide the logo if you want a simpler button.
You’ll notice the code in the CSS Button box change as you set your preferences.
You can also turn your button into a Sticky Donate Button that anchors to the side of the screen and stays in the same place as your website visitors browse. Simply toggle this option on and choose which side of the screen you’d like your button to anchor to. You’ll get to see a preview of your button right from the launchpad.
When your button looks how you want it, simply copy the code. Note that you must paste the code for your Sticky Donate Button into the header of your website in order for it to appear on every page. Constant access to your donate button will bring in more donations!
Note: You’ll also find the copy for PNG donate buttons on this page. These buttons can be used in email campaigns and other places where you can’t use the CSS code.
Head over to your website editor. Find or create the page on which you wish to add your donate button.
Access the code or text editor for the page and paste your donate button embed code into the appropriate box. If you’re installing a Sticky Donate Button, remember to paste the code into your website’s header so your button will appear on every page.
Type 2: How to add the donate button for a pop-up donation form
In addition to the secure donation page, Donorbox offers the pop-up form as another option for the donation button integration.
This means that instead of redirecting your donors to a separate donation page, a donation form pops up on the same screen when someone presses your donate button. This is a more dynamic option that keeps them on the page they’re browsing – instead of taking them to a different website.
Note: You will need to install SSL on your website in order to use our pop-up modal form, in order to ensure the security of your donors.
Go to your Campaign Launchpad, as outlined in Step 1 above. From the Launchpad, click “Pop-up Donation Form.”
On the left side of this page, you can customize the look and settings of the donate button that will bring up your pop-up donation form. Pro and Premium users can also choose to add a content panel to your pop-up donation form. This panel includes images and text from your donation page and creates a more compelling giving experience for your supporters!
Here, you can set the default recurring donation interval, choose the pre-filled default donation amount, and change the size/color of your button. You can also choose to hide the logo if you want a simpler button. You’ll notice the code in the CSS Button box at the bottom of the screen change as you set your preferences.
You can also turn your button into a Sticky Donate Button that anchors to the side of the screen and stays in the same place as your website visitors browse. It has a subtle animation to draw attention, serving as an impactful reminder to give. Simply toggle this option on and choose which side of the screen you’d like your button to anchor to. You’ll get to see a preview of your button right from the launchpad.
When your button looks how you want it, simply copy the code. Note that you must paste the code for your Sticky Donate Button into the header of your website for it to appear on every page. Constant access to your donate button will bring in more donations!
Note: If you wish to use your own button or link to embed your pop-up donation form, you will find the information you need to do that on the right side of this page.
Go to your website editor and find the page where you wish to add your pop-up donation form and go to the code or text editor. Paste your donation button code. Remember, if you’re installing a Sticky Donate Button you must paste the embed code into the header of your website so your button will appear on every page.
Publish the page, and you’re all set!
Note: If you make any changes to your button from the Launchpad, you will need to re-copy and paste the new code to make the updates on your website.
Clicking on the donate button will make your secure pop-up donation form appear, like this one:
Use colors familiar to your donors, such as those in your logo or other marketing materials. Consistent branding builds trust with your donors.
Also, ensure that your donation button color contrasts with the rest of the site to make it stand out.
2. Pre-filled donation amounts
When donors decide to donate, the big question is not “should I give?”… it’s “how much should I give?”
Pre-filled donation amounts help your donors make that decision and also speed up the process. Choose the right donation amount according to your audience.
A great way to set suggested donations is to recommend amounts that are slightly higher than your previous average donation. For example, if last year’s average donation was $25, suggest donations of $10, $30, and $50. People who want to donate $25 would be more likely to increase their donation to $30 rather than reduce their donation all the way down to $10.
You can also highlight the default donation amount so that it stands out from the rest. Also, consider giving them an option to donate a custom amount.
3. Donation call to action
All successful nonprofit fundraising campaigns have a call to action (CTA). A call to action is exactly what the name sounds like – words or phrases that drive visitors to take a specific action on your site. Your call to action is when you actually ask somebody to do something – in this case, donate.
An effective CTA should be short and concise and must communicate the urgency of the cause to compel your donors to donate. Based on your specific cause, here are some examples of effective CTAs:
Join the fight!
Give to <nonprofit/cause>
Impact the lives of <blank> today
Make a donation
Help <blank> in need!
Save the <blank> now!
Support <blank> now!
Transform lives today!
Complete your gift
Advocate for our cause
Make a difference in <year>
Quick Tips for a Better Donate Button on Your Website
Your donate button should stand out from the rest of your website immediately.
Keep the call to action short and simple.
Use color. Colorful, high-contrast donate buttons are more eye-catching and perform better.
Include a short, compelling message right above the donate button. This can be helpful in convincing donors who are still on the fence.
Incorporate your donate button in everything from your blog to your emails.
3 Best Nonprofit Donate Button Examples
1. The HALO Trust
The HALO Trust’s donate button is one of the best examples for nonprofits.
First, the button is big and placed on the top right corner with a color that contrasts with the rest of the website, which makes it stand out among other elements on the homepage.
Second, the button is sticky and remains right there as the user scrolls down the page.
The button takes users to a secure, branded donation page with compelling images. Prefilled donation amounts and the option to choose a recurring donation make the whole experience easier for donors.
2. CODE for America
We love the way ‘Donate’ at the top right corner stands out amidst every other important element on the screen. Even though the button isn’t that big, the red color contrasts with the CODE for America website and is sure to grab the eye of donors.
The CTA or message right above the donation form is simple and easy for people to understand their mission.
The donation form is easy to use, gives ample options for making donations with prefilled amounts, and allows monthly and annual recurring donations as well.
3. St John of Jerusalem Eye Hospital Group
St. John of Jerusalem has an excellent donation button. It’s big and placed at the top navigation bar alongside the logo and hospital name. Its high contrast, bright color, and ample white space ensure donors can’t miss it.
The top navigation bar contracts as the user scrolls down, still keeping the focus on the menu options as well as the donate button.
We love the CTA. It’s short, to the point, and creates an impact in the hearts of the users.
The donate button navigates the users to a secure donation page with clear and easy-to-understand options for making single/recurring donations.
Under each amount, the information as to how it can make a difference is what makes it even better. Donors love to know what their smallest donation can do to change the world.
From this page, each donate button redirects donors to the appropriate donation form.
Frequently Asked Questions (FAQs)
1. Where should I place the donate button?
Studies show that the human eye tends to read websites in an “F” or “Z” pattern. The top left corner is best for logos and the upper right corner is a great location for placing your call to action. The bottom right-hand corner is another good location to place your donate button. Make sure that the donate button is present not only on your website but on every other platform as well.
2. What should my donate button say?
Your donate button may simply say “donate” or “donate now,” or you can include other messages as well such as “give,” “help change lives,” “help us,” “support our work,” “click here to donate,” “give a gift now,” and other such call-to-actions. Remember to keep the message short and simple. Refer to the section on the best practices for more examples of call-to-action messages.
3. Should I pre-fill the amount near the donation button?
Sometimes, donors might be confused as to how much to donate. You can pre-fill the donation amount of your choice near the donation button to eliminate confusion, expedite the checkout process, and encourage your donors to donate more than the minimum.
4. What is the ideal size for a donate button?
The more people who see your donate button, the more people will click on it. Hence, bigger buttons do better. Make your donation button big enough so it is impossible to miss.
5. Can I embed Image donation buttons instead of generic ones?
Use PNG image donation buttons to add a donate button to email campaigns, as well as on GitHub pages.