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.
![How To Add A Donate Button To Your Website [Step-By-Step Guide]](https://donorbox.org/nonprofit-blog/wp-content/uploads/2020/11/How-to-Add-a-Donate-Button-to-Your-Website.png)
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.
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 –
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 to 50% 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!
See it in action in this short video!
Before we start with the steps to install a donate button on your website, you must make sure your donation form is set up.
Keep in mind that your donation form should be as simple and well-designed as your donate button. The donor experience lasts from the very beginning of the donation process to the end!
The good news is it only takes about fifteen minutes to create your donation form and embed it in your website. Follow the simple steps outlined below to start using the Donorbox donate buttons –
That’s it! You can now copy the code of the donate button you need and add it to your website to start using it.
Watch our video tutorial to sign up easily on Donorbox and start fundraising in four simple steps –
This donate button will send donors to your donation page hosted on Donorbox. From there, they can complete their secure donation.
Go to your Donorbox Campaigns page and find the campaign that you want to embed. Click “Go to Launchpad”.
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, change the size/color of your button, and add custom text. 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.
Note: Donorbox donation forms and donate buttons can be easily embedded on various website builders such as Wix, WordPress, Squarespace, and Weebly.
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 take you to your secure donation page.
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.
Check out this blog on how to add a pop-up donation page to your website for more info.
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 and customize the text for your button to better match your branding. 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!
If you wish, you can enable a Giving Reminder to appear on the bottom right screen for anyone who interacts with your pop-up form and navigates away before completing their donation. Here’s how it looks on Save the Garfields, our feature showcase website:
To enable this, simply click the box next to “Enable Giving Reminder for incomplete donations.” You can see a preview of the feature by clicking the preview Sticky Donate Button, interacting with your form, and navigating away.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
Use PNG image donation buttons to add a donate button to email campaigns, as well as on GitHub pages.
Raviraj heads the sales and marketing team at Donorbox. His growth-hacking abilities have helped Donorbox boost fundraising efforts for thousands of nonprofit organizations.
Subscribe to our e-newsletter to receive the latest blogs, news, and more in your inbox.
Raj