How to add the Fundraise Up installation code to a Wix website
Wix is a cloud-based web development platform that enables users to create stunning websites without needing any coding knowledge. Below, we guide you through adding the Fundraise Up installation code to your Wix website.
Steps
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.
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.
1<!-- Fundraise Up -->
2<script>(function(w,d,s,n,a){if(!w[n]){var l='call,catch,on,once,set,then,track'
3.split(','),i,o=function(n){return'function'==typeof n?o.l.push([arguments])&&o
4:function(){return o.l.push([n,arguments])&&o}},t=d.getElementsByTagName(s)[0],
5j=d.createElement(s);j.async=!0;j.src='https://cdn.fundraiseup.com/widget/'+a;
6t.parentNode.insertBefore(j,t);o.s=Date.now();o.v=4;o.h=w.location.href;o.l=[];
7for(i=0;i<7;i++)o[l[i]]=o(l[i]);w[n]=o}
8})(window,document,'script','FundraiseUp','YOUR_KEY');</script>
9<!-- 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:
- Go to your Wix site's Dashboard
- Click on Settings in the left-hand panel.
- Scroll down, and in the section labeled Advanced, click Custom Code.
- Click on the Add Custom Code button.
- Paste Fundraise Up JavaScript code snippet into the box titled ‘Paste the code snippet here’.
- Select your Domain, and give the Custom Code a name (i.e. Fundraise Up).
- In the section titled Add Code to Pages select Load code on each new page from the dropdown within the All pages selection.
- For the Place Code in option, please select Head.
- 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. Unfortunately, it is not possible to use all Elements in Wix, as only global elements are available. This limitation is important to keep in mind when using our platform for your Wix website design.
Thanks to the Donate 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 Donate Link's URL.
Make a new Donate Link Element and get its URL
- First, in your Fundraise Up Dashboard, make sure you've set your Website URL in the Organization page of your Settings area.
- Then, go to the Elements tab, click New Element and make a Donate 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
- Go to your Wix Dashboard, and click Manage & Edit site > Edit site
- Select button, text or image and add the link.
- Choose Web Address and enter the Donate Link's URL which you obtained from Fundraise Up.
- Where it says 'How does it open,' please select Current Window.
- 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!