Every donation page in RaiseDonors provides the ability to set a goal and display a progress bar. The progress bar works beautifully on every device—mobile, tablet, and desktop views. You are free to place the progress bar directly inside the RaiseDonors page—or you can even place it directly on your website.
The progress indicator will retrieve real-time updates from RaiseDonors and display live results of the donations raised towards this page.
How to configure
(1) When viewing Pages, you'll see that every Page has a button for "Embed Codes".
(2) When you click the "Embed Codes" button, you'll be presented with several options. You'll want to click "Progress Bars" to get the options.
(3) There are four options for progress bars:
- Percent toward goal
- Total number of donations
- Total number of donors
- Total number of recurring donors
(4) Next you can copy the embed code and paste it into the code view of the content of your donation page. You can even paste it into your website if you'd like. The progress bar will work anywhere!
Add Offline Gifts
Here's a pro tip! If you'd like to include donations received from sources outside of RaiseDonors, you can do that as well.
You will need to modify the embed code—but I promise you don't need a computer science degree to make this happen.
Let's say you'd like to to indicate that you've received $20,000 in offline gifts for this campaign. We've included a place in the code where you can add that number and it will be included in the overall progress bar total.
Here's what the actual embed code looks like:
The arrow in the image above indicates where you can add that additional amount. All you need to do is change that "0" with the additional amount you'd like to add to the total raised.
So in the story we've been telling about adding an additional $20,000 in offline gifts, you would update the progress bar by inserting "20000" in that space. (Notice that you don't include the comma in 20000.)
The progress bar will now show an additional $20,000 has been raised. 😎
One more option
If you'd like to customize the text beneath each item in the progress bar, you'll just need to add that text to the embed code. See the image below:
Which would update the progress bar to display like this: