The world's premier fundraising technology is now available as a widget with a 0% fee.

Install Widget Anywhere

Basic Installation - Quickest installation of the standard *spotfund button

Advanced Installation - Easy installation with additional button customization

Wix Installation - Plug and play installation for Wix-hosted websites

Wordpress Installation - Plug and play installation for WordPress websites

SquareSpace Installation - Coming soon

Basic Installation

Use this for the default *spotfund donation button or to tie the widget to an existing element on your site.

 

1. Identify the *spotfund Story ID you would like to link to by going to spotfund.com and pulling it from the end of the URL bar of that story.

 

2. Add the following Javascript code to your site, between the <body></body> tags. Change ENTER_STORY_ID_HERE to your story ID from Step 1 above.

                
<div class="spotfund__wrapper"></div>
<script>
  (function(i,s,o,g,r,a,m){
      i['SpotfundObject']=r;
      i[r]=i[r] || function() { (i[r].q=i[r].q||[]).push(arguments)};
      a=s.createElement(o), m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g;
      m.parentNode.insertBefore(a,m);
    })(window,document,'script','https://spotfund-widget.s3.amazonaws.com/code/absolute/v1.0/spotfundWidget.js','sf');
      sf('ENTER_STORY_ID_HERE');
</script>

 

3. If you want to add a permanent, floating *spotfund donate button on the page, add the following code anywhere on your site, between the <body></body> tags.

                
<button class="spotfund__button" style="background-color: Transparent;border: none;bottom: 30px;position: absolute;position: fixed;right: 30px;z-index: 9999;"><img src="https://spotfund-widget.s3.amazonaws.com/code/button/spotfund_donate_button.png" alt="Donate Now" width="200px"></button>

 

4. If you want to place the donation button anywhere else on your site, simply add the following code.

                
<button style="border: 0px;padding: 0px;background: transparent;"><img src="https://spotfund-widget.s3.amazonaws.com/code/button/spotfund_donate_button.png" alt="Donate Now" width="200px" class="spotfund__button"></button>

 

-->

 

5. If you want to add the widget action to any existing element on your site, simply apply the following class to it.

                
class="spotfund__button"

Return to top

Advanced Installation

Use this if you would like to customize the look, feel and behavior of the donation button.

 

1. Identify the *spotfund Story ID you would like to link to by going to spotfund.com and pulling it from the end of the URL bar of that story.

 

2. Add the following Javascript code to your site, between the <body></body> tags. Change ENTER_STORY_ID_HERE to your story ID from Step 1 above.

                
<div class="spotfund__wrapper"></div>
<script>
  (function(i,s,o,g,r,a,m){
      i['SpotfundObject']=r;
      i[r]=i[r] || function() { (i[r].q=i[r].q||[]).push(arguments)};
      a=s.createElement(o), m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g;
      m.parentNode.insertBefore(a,m);
    })(window,document,'script','https://spotfund-widget.s3.amazonaws.com/code/absolute/v1.0/spotfundWidget.js','sf');
      sf('ENTER_STORY_ID_HERE');
</script>

 

3. If you want to add a permanent, floating DONATE NOW button on the page, add the following code anywhere on your site, between the <body></body> tags.

                
<button class="spotfund__button spotfund_button_format">Donate Now</button>

 

And place the following CSS code between the <head></head> tags, changing the styles as you want.

                
<style type="text/css">

	button.spotfund_button_format:hover {
		background-color:#43d1f4; /* on hover - button background color */
		border: 1px solid #43d1f4; /* on hover - button border color and size */
		color: #ffffff; /* on hover - button text color */
	}

	button.spotfund_button_format {
		background-color:#43d1f4; /* button background color */
		border-radius: 50px; /* button curvature */
		border: 1px solid #43d1f4; /* button border color and size */
		bottom: 30px;  /* button floating fixed placement from bottom of page -- use "top" to pin it to top of page */
		right: 30px; /* button floating fixed placement from right of page -- use "left" to pin it to left of page */
		color: #ffffff; /* button text color */
		font-family: sans-serif; /* button text font */
		font-size:0.8rem; /* sbutton text size */
		padding: 15px; /* button internal text padding */
		position: absolute; /* required */
		position: fixed; /* required */
		text-transform: uppercase; /* to make the button text capitalized - remove if you don't want this */
		z-index: 9999; /* required */
		-webkit-transition-duration: 0.2s; /* adds a transition timing on hover - Safari */
		transition-duration: 0.2s; /* adds a transition timing on hover - all other browsers */
	}
	
</style>

 

4. If you want to place the donation button anywhere else on your site, simply add the following code.

                
<button style="border: 0px;padding: 0px;background: transparent;"><img src="https://spotfund-widget.s3.amazonaws.com/code/button/spotfund_donate_button.png" alt="Donate Now" width="200px" class="spotfund__button"></button>

 

5. If you want to add the widget action to any existing element on your site, simply apply the following class to it.

                
class="spotfund__button"

Return to top

Wix Installation

Use this to add a permanent, floating DONATE button on your Wix-hosted website.

Requires a PAID Wix plan

 

1. Identify the *spotfund Story ID you would like to link to by going to spotfund.com and pulling it from the end of the URL bar of that story.

 

2. Add the required Javascript code to your Wix site as follows:

From your Dashboard, click Settings > Advanced Settings > Tracking & Analytics > New Tool > Custom

From the resulting Custom Code Edit Tool, paste the following code, changing ENTER_STORY_ID_HERE to your story ID from Step 1 above...

                
<div class="spotfund__wrapper"></div>
<script>
  (function(i,s,o,g,r,a,m){
      i['SpotfundObject']=r;
      i[r]=i[r] || function() { (i[r].q=i[r].q||[]).push(arguments)};
      a=s.createElement(o), m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g;
      m.parentNode.insertBefore(a,m);
    })(window,document,'script','https://spotfund-widget.s3.amazonaws.com/code/absolute/v1.0/spotfundWidget.js','sf');
      sf('ENTER_STORY_ID_HERE');
</script>

<button class="spotfund__button" style="background-color: Transparent;border:none;bottom: 30px;position: absolute;position: fixed;right: 30px;z-index: 9999;"><img src="https://spotfund-widget.s3.amazonaws.com/code/button/spotfund_donate_button.png" alt="Donate Now" width="200px"></button>

...into the "Paste the code snippet here:" [1] box.

In the "Name" box [2], name your code "Donate Button".

In the "Add Code to Pages:" selector [3], select "All pages" and "Load code on each new page".

In the "Place Code in:" selector [4], select "Body - end".

Click "Apply" to save your changes.

 

3. Publish your site to see your new donate budget on your live site.

Return to top

WordPress Installation

Use this to add *spotfund donation widget capabilities to your WordPress site.

 

1. Identify the *spotfund Story ID you would like to link to by going to spotfund.com and pulling it from the end of the URL bar of that story.

 

2. Add the WordPress plugin "Head and Footer Scripts Inserter" if not already enabled:

From your Dashboard, go to Plugins > Add New [1] > Search "Head and Footer Scripts Inserter" [2] > Locate correct plugin > Click "Install Now" [3] > Click "Activate"

 

3. Add the required Javascript code to your Wordpress site as follows:

From your Dashboard, go to Settings > Scripts Inserter [1] > Footer Section [2]

Paste the following code, changing ENTER_STORY_ID_HERE to your story ID from Step 1 above...

                
<div class="spotfund__wrapper"></div>
<script>
  (function(i,s,o,g,r,a,m){
      i['SpotfundObject']=r;
      i[r]=i[r] || function() { (i[r].q=i[r].q||[]).push(arguments)};
      a=s.createElement(o), m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g;
      m.parentNode.insertBefore(a,m);
    })(window,document,'script','https://spotfund-widget.s3.amazonaws.com/code/absolute/v1.0/spotfundWidget.js','sf');
      sf('ENTER_STORY_ID_HERE');
</script>

...into the "The HTML code from this field will be printed at the beginning of the FOOTER section." [3] box.

 

4. If you want to add a permanent, floating *spotfund donate button on the page, add the following code into the "The HTML code from this field will be printed at the end of the FOOTER section." [4] box.

                
<button class="spotfund__button" style="background-color: Transparent;border: none;bottom: 30px;position: absolute;position: fixed;right: 30px;z-index: 9999;"><img src="https://spotfund-widget.s3.amazonaws.com/code/button/spotfund_donate_button.png" alt="Donate Now" width="200px"></button>

 

5. If you want to place the donation button anywhere else on your site, simply add the following code to any page.

                
<button style="border: 0px;padding: 0px;background: transparent;"><img src="https://spotfund-widget.s3.amazonaws.com/code/button/spotfund_donate_button.png" alt="Donate Now" width="200px" class="spotfund__button"></button>

 

 

6. If you want to add the widget action to any existing element on your site, simply apply the following class to it.

                
class="spotfund__button"

Return to top

Have any questions? We're here to help. Email us at widget@spotfund.com.