BlueSwarm

Widget

Widget embedding

 

If a client would like to embed the donation widget on their website, they will have to add the following code fragment to the body tag of their HTML code. The embed code can be manually copied from the source code block below (remember to change CAMPAIGN-NAME to the actual campaign's sub-domain).

 

<!-- Start Donation Widget -->
<div id="donationWidget" style="height:1280px;width:870px;"></div>
<script type="text/javascript" src="https://CAMPAIGN-NAME.blue-swarm.com/widgets/donation_form/swfloader/swfobject.js"></script>
<script type="text/javascript" src="https://CAMPAIGN-NAME.blue-swarm.com/widgets/donation_form/swfloader/swfaddress.js"></script>
<script type="text/javascript">
var so = new SWFObject("https://CAMPAIGN-NAME.blue-swarm.com/widgets/donation_form/Form.swf","Form", "100%", "100%", "9.0.124");
so.addParam("allowScriptAccess", "always");
so.addParam("wmode", "transparent");
so.write("donationWidget");
</script>
<!-- End Donation Widget -->

 

 

FlashVars

There are a couple of pre-sets that can be passed into the widget via a flashvars object. The widget will parse these variables and use them inside the form if they are valid. Possible values are:

  • configUrl (name of the config file relative to the configuration directory, e.g. 'config2.xml')
  • contribution_type
  • fname
  • mname
  • lname
  • address1
  • address2
  • city
  • state
  • zip
  • email
  • fid
  • sc

 

All of these values are optional and can be used in any combination. Here is an example of how to define the flashvars object in JavaScript and use it in the widget:

 

<!-- Start Donation Widget -->
<div id="donationWidget" style="height:1280px;width:870px;"></div>
<script type="text/javascript" src=""https://CAMPAIGN-NAME.blue-swarm.com/widgets/donation_form/swfloader/swfobject.js"></script>
<script type="text/javascript" src=""https://CAMPAIGN-NAME.blue-swarm.com/widgets/donation_form/swfloader/swfaddress.js"></script>
<script type="text/javascript">
var so = new SWFObject("https://CAMPAIGN-NAME.blue-swarm.com/widgets/donation_form/Form.swf","Form", "100%", "100%", "9.0.124");
so.addParam("allowScriptAccess", "always");
so.addParam("wmode", "transparent");
var flashvars = {
contribution_type:'Individual',
fname:'David',
mname: '',
lname:'Keutgens',
address1:'70 Broadway',
address2:'',
city:'Westford',
state:'MA',
zip:'01886',
email:'david.keutgens@enilsson.com',
fid: 'MYFID001',
sc: 'MYSC001',
configUrl: 'config2.xml'
};
so.variables = flashvars;
so.write("donationWidget");
</script>
<!-- End Donation Widget -->

 

Flashvars can be utilized by using server-side language to modify the flashvars before passing them to the widget in order to automatically populate data from authenticated sessions, etc.

 

Size

 

If the campaign would like to adjust the height and width of the widget, this can be done in the "div" tag surrounding the widget embedding statement. The numeric values inside the style attribute can be set to the preferred values - the unit is pixels (px).

 

<!-- Start Donation Widget -->
<div id="donationWidget" style="height:1280px;width:870px;"></div>

 

Note: In older versions of the statement, the height and width also had to be changed inside the SWFObject constructor call. The third parameter specifies the width in pixels, the fourth one specifies the height. It's important that the values match the ones set in the style attribute of the "div" tag mentioned above.

 

var so = new SWFObject("https://CAMPAIGN-NAME.blue-swarm.com/widgets/donation_form/Form.swf","Form", "870", "1280", "9.0.124");

 

Color

Due to the following embed code, the widget will be rendered with a transparent background in all browsers:

 

so.addParam("wmode", "transparent");

 

This means that the widget will have the background colour or image that has been set in the embedding HTML. Changing the background color of the embedding HTML can be achieved via CSS. The simplest way to set it is inside the body or div tag that surrounds the widget:

 

<body style="background-color:#FFFFFF">
<!-- Start Donation Widget -->
...
<!-- End Donation Widget -->
</body>