Using Fundraise Up on your Website

Add the Installation Code to your Website

In order for your Fundraise Up account to take donations from visitors to your website, you first need to embed a line of Javascript code in the <head> section of your website.

To get the Installation Code, go to the Installation page of your Settings. You can navigate to that page by logging in to your Fundraise Up account, clicking your account name in the top right, clicking Settings, then clicking Installation from the left hand menu.

There you will find a code snippet that looks something like this, where 'YOUR_KEY' is a combination of symbols specific to your account:

<!-- Fundraise Up -->
<script>(function(w,d,s,n,a){var o=function(n){return'function'==typeof n?
o.l.push([arguments])&&o:function(){return o.l.push([n,arguments])&&o;}},t
=d.getElementsByTagName(s)[0],j=d.createElement(s);j.async=true;j.src=
'https://cdn.fundraiseup.com/widget/'+a;t.parentNode.insertBefore(j,t);
o.s=Date.now();o.v=3;o.l=[];l='call,catch,on,once,set,then,track'
.split(',');for(i=0;i<7;i++)o[l[i]]=o(l[i]);w[n]=w[n] || o;
})(window,document,'script','FundraiseUp','YOUR KEY HERE');</script>
<!-- End Fundraise Up -->

Please embed that code snippet in the <head> section of your website. The <head> section of the website is the same section where you would typically add other utility code snippets such as Google Analytics tracking code, etc. 

If you are not sure how to access the <head> section of your website, please ask your development team, or reach out to us, and we will help you. Now that you have your website connected to Fundraise Up, let's look at how you embed donation buttons and more directly in your website's navigation and content.

Embed Elements and Links that open your Donation Campaigns

The first step is always to make sure you have at least one Campaign active - each Campaign acts as a checkout process, to allow donors to be offered certain donation options and chances to provide you more information. Here's a more in-depth explainer of how to make and manage Campaigns.

Once you've got at least one Campaign set as you'd like it, and you've connected a valid Stripe account to your Fundraise Up account, head over to the Elements tab and make some buttons! 

Our Elements article explains the process in more detail, but in summary:

  • some Elements will give you HTML code which you can add to any editing area on your website that accepts HTML code,
  • some Elements will give you a URL that will direct outside visitors to donation checkout on your website (and inside visitors directly to checkout on the page they're already on!)
  • and some Elements will automatically appear on some or all pages of your site as per their URL Control settings.

Test it out

Now that your website has your Installation Code in place and some Elements embedded, a visitor to your website can use your Fundraise Up account to make donations! 

To walk through this process, you can either:

  • click one of the Elements you embedded to be directed to make live donations,
  • or you can use the URL Parameter or Javascript methods to load checkout in test mode and make test donations.

It's worth noting that the above steps will work on websites or webpages other than your main website. We don't authorize your Fundraise Up account against a particular domain; as long as the Installation Code is running on a page, your Fundraise Up account's Elements and Campaigns will be viewable on that page.

For example, if you'd like to test this whole process of adding the Installation Code and Elements on a staging version of your website, a private page on your website, or even just a code sandbox like glitch.com, you can absolutely do so!