Using Fundraise Up on Wix

Wix sites offer some limitations, as their editor does not allow the addition of raw HTML. Nevertheless, our full checkout experience can still be used to great effect!

 


Adding your Fundraise Up Installation Code to your Wix site

For any of the Fundraise Up widgets or direct links to work correctly, you first need to embed a line of Javascript code in the <head> section of your website. Doing so connects your website to Fundraise up.

Note: Due to how WIX is built, it is not possible to use Apple Pay. Additionally, it is only possible add HTML directly to WIX through advanced screens.

Please go to Installation page of your Fundraise Up Settings area.

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){if(!w[n]){var l='call,catch,on,once,set,then,track'
.split(','),i,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=!0;j.src='https://cdn.fundraiseup.com/widget/'+a;
t.parentNode.insertBefore(j,t);o.s=Date.now();o.v=4;o.h=w.location.href;o.l=[];
for(i=0;i<7;i++)o[l[i]]=o(l[i]);w[n]=o}
})(window,document,'script','FundraiseUp','YOUR_KEY');</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.

On Wix, you have to take the following steps in order to update your <head> section:

  1. Go to your Wix site's Dashboard
  2. Click on Settings in the left-hand panel.
  3. Scroll down, and in the section labeled Advanced, click Custom Code.
  4. Click on the Add Custom Code button.
  5. Paste Fundraise Up JavaScript code snippet into the box titled ‘Paste the code snippet here’.

    Screen Shot 2021-03-08 at 10.38.36 AM
  6. Select your Domain, and give the Custom Code a name (i.e. Fundraise Up).
  7. In the section titled Add Code to Pages select Load code on each new page from the dropdown within the All pages selection.
    Screen Shot 2021-03-08 at 10.39.24 AM
  8. For the Place Code in option, please select Head.
  9. Then click the Apply button.

Now that you have your website connected to Fundraise Up, let's look at how you can direct donors to your donor checkout experience on your website.

 


Sending visitors to make donations

Some of our Elements are global, like the Sticky Button - they're just drawn on the page by the Installation Code, so they'll work without editing the page further. You can make them appear by making them in the Elements tab of your Fundraise Up Dashboard!

Beyond global elements like the Sticky Button, you will likely need to use direct links when sending visitors to your Fundraise Up Campaign's checkout, as Wix has limitations on what raw HTML it'll allow you to insert.

Thanks to the Text Link Element, you can still get many of the benefits of Elements (statistics tracking, configurability on the fly, etc) by having your Wix buttons point to each Text Link's URL.

Make a new Text Link Element and get its URL

  • First make sure you've set your Website URL in the Organization page of your Settings area.
  • Then, go to the Elements tab and make a Text Link Element, with "Open Campaign" set to the Campaign you want that link to open.
  • Click Create Element
  • Click Copy next to the provided URL

Add the link to your website

  1. Go to your Wix Dashboard, and click Manage & Edit site > Edit site
  2. Select button, text or image and add the link.
  3. Choose Web Address and enter the Text Link's URL which you obtained from Fundraise Up.
  4. Where it says 'How does it open,' please select Current Window.

    5
  5. Then click Done.

Wix has the concept of arranging things on the page, which allows you to set some things on a page over one another.

If you're adding a new button to Wix, just make sure the new button is set to be above everything it's on, by right clicking the button in the Wix editor, going down to Arrange, and choosing Bring to Front.

If that option is greyed out, that Button is already at the front!