CauseVox widgets are easy to integrate into your site. First, include this snippet of javascript before the closing </head> tag of your page.

<script type="text/javascript" src="//js.causevox.com/v2"></script>

<script type="text/javascript">

CV.setDomain("mycampaign.causevox.com");

</script>

Replace the setDomain value with the address of your campaign.

Our widgets work by adding classes to elements on your site. This allows you to style the elements anyway you see fit. For instance, adding the class cv-donate to a button or link element will trigger a donation lightbox when clicked.

<button class="cv-donate">Donate</button>

<a class="cv-donate" href=”#”>Donate</a>

Some widgets have optional data attributes you can add to enable additional options, like donating to a specific fundraising page. It would be used like this.

<button class="cv-donate" data-url=”campaign.causevox.com/fundraiser”>Donate</button>

Displaying the total funding progress of a current campaign would be used like this:

We have raised $<span class=”cv-funds-raised”></span>!!!

class - cv-funds-raised data

attributes data-url - overrides the url of the donation form to point to a specific campaign/fundraising page.   must be a url of a valid campaign or fundraising page. optional.
​
​description - Creates a donation lightbox when element is clicked. Donations are made to the campaign url specified in setDomain or can be overridden with the optional data attributes (to create a donation lightbox for a specific fundraiser’s page, for instance). 

usage - 

<button class="cv-donate">Donate</button>

<button class="cv-donate" data-url=”campaign.causevox.com/fundraiser”>Donate</button>
​

class - cv-funds-raised data
​
​attributes - data-divide - Divides the funds raised value by the data-divide value before rendering.Must be a valid integer. (optional)
​
​description - Replaces html of elements with the amount of funds raised.Use the optional divide attribute to divide the value by a certain value.
​
​usage -  

<button class="cv-donate">Donate</button>

<button class="cv-donate" data-url=”campaign.causevox.com/fundraiser”>Donate</button>
​

class - cv-funds-raised data
​
​attributes - data-divide - Divides the funds raised value by the data-divide value before rendering.Must be a valid integer. (optional)
​
​description - Replaces html of elements with the amount of funds raised.Use the optional divide attribute to divide the value by a certain value.
​
​usage -
<span class=”cv-funds-needed” data-divide=”5”></span>

Percent Progress

class - cv-percent-progress 

data attributes 

description - Replaces html of elements with the percent progress number. 

usage -  
​<span class=”cv-percent-progress”></span>
​

class - cv-percent-progress 

data attributes  

description - Replaces html of elements with the percent progress number. 

usage -  

For a campaign with 56% progress:

<div class=”cv-progress-bar”></div>

will insert the markup as follows:

<div class=”cv-progress-bar”>

   <div class=”progress”>

       <div class=”bar” style=”width: 56%”></div>

   </div>
​

class - cv-login 

data attributes  

description - Upon clicking creates a lightboxed login box for fundraisers. 

usage -
<a href=”#” class=”cv-login”>Login</a>