Fundraising Widget Integration Screencast
January 5th, 2010 by Robert Dyson
Below is the transcript from our Fundraising Widget Integration Screencast.
Hi, I’m Robert Dyson, a developer here at WeTheCitizens. I’d like to take a few minutes to show you how to integrate a fundraising widget into a website, be it your homepage or an external site. To set up a widget you’ll need to have a Fundraising Action Kit set up, which we went over in our last screencast. Check it out if you need a hand setting up your Fundraising Kit.
Let’s say your organization is conducting a fundraising drive, and you want all donations made on your website to be recorded in Wildfire… and you want your Wildfire supporters to receive Personal Impact when they make their donations. Integrating a fundraising widget allows you to do this.
Before beginning, you’ll need someone with basic HTML-editing skills in order to integrate the fundraising widget into your website. He or she will also need a basic text editor (I’m using a free code editor for the Mac called TextWrangler, but you can use a program of your choice, whether it’s Dreamweaver, Textmate, or even Notepad). Open the page that you want to embed your fundraising widget into. In this example, we’re going to call the embed page ‘donate.html’, and we’ll be integrating it into the landing page of one of our demo sites, Arcticause.
The first step is to include the Wildfire Service javascript in your web page. You can find the URL of this script by going to HQ > Admin > External Integration > Widgets/APIs. Under Javascript Widgets/APIs, you’ll find your unique Wildfire Service URL. Copy this URL and include it in the head of your webpage as you would any other Javascript URL, like so.
<script type=”text/javascript” src=”*your wildfire-service.js url here*”></script>
Now, we need to insert the donation form into the page. First, we’ll need the ID of the fundraising kit you created. This can be found by going to HQ > Mobilization > Action Kits and clicking on the fundraising kit you want to create a donation form for. Copy the Kit ID. Back in the webpage we just created, set up a new widget tag, like so:
<wf:fundraising-form kitId=””></wf:fundraising-form>
You can find more information about widget tags, including Fundraising Widget tags, on our Support Wiki.
Paste the kit ID you just copied from HQ, and we’re done! Save the file, upload it to your webserver, and take a look. This fundraising form is now fully functional – donations can be made, they will be tracked in Wildfire, and impact will be awarded to supporters. You can have a designer style the widget as you wish, and add content above and below the form. Once you’re happy with the way your page looks, you can link to it from anywhere. Here we have a donation page on Arcticause using the Fundraising Widget. I’ll submit my donation, and observe that my action was recorded in HQ.
For more details on integrating widgets and if you have any questions or suggestions about this or any other feature, check out our support documentation at wildfiresupport.com and our Uservoice page page. Thanks for watching.
