Footprints Widget

Welcome to the Footprints Widget help section! Below is a simple example of a Footprints web widget which shows RefinedData’s total carbon savings to date.

Below you will find the code that generated this widget.

<object style="vertical-align:middle;" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="100%">
	<param name="movie" value="http://footprints.refineddata.com/widget/footprints_widget.swf" />
	<param name="quality" value="high" />
	<param name="FlashVars" value="accountID=MjA1NjY3OTQ3&colour=232323&currency=CAD&uom=metric&type=carbon&textcolour=FFFFFF&start_date=&departmentID=" />
	<param name="wmode" value="transparent" />
	<embed style="vertical-align:middle;" src="http://footprints.refineddata.com/widget/footprints_widget.swf" width="100%" height="100%" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" flashvars="accountID=MjA1NjY3OTQ3&colour=232323&currency=CAD&uom=metric&type=carbon&textcolour=FFFFFF&start_date=&departmentID=" wmode="transparent"></embed>
</object>

Of course this widget looks very plain, so if you would like to style your own widget just follow the simple steps below.

  1. To make a widget for your web site, simply login to your Footprints account at the Footprints manager (http://footprints.refineddata.com/manager/) and click on the new ‘Widget’ button at the top of the screen.
  2. Here you will see a preview of your widget using the default parameters displayed in the left section of the screen. You will see that you can change the following parameters:

    • Widget Type: Possible values are ‘Carbon’, ‘Cost’ or ‘Distance’ (which will show the total amount of the selected type)
    • Department: You can choose to have your widget display the total amount for all of your departments, or for any single one. This may be useful for your company’s intranet site where you would like to show how much cost savings your sales departments has saved vs. your IT department.
    • Start Date: You can make your widget only display the total amount from a certain date. This could be useful if you wanted several widgets on your web page, each to show the total savings for each month.
    • Currency: By default this will be your account’s default currency, but you may wish to display your widget’s total amount in a different currency.
    • Measurement Type: This will be your account’s default measurement type, but again you may wish to configure your widget to display it’s total amount in a different measurement type.
    • Background Color: This will be the background fill color of your widget. You can use the color picker to change this and see how it looks in the preview.
    • Font Color: This will be the font color of your widget. You can use the color picker to change this and see how it looks in the preview.
    • Width and Height: You can also change this to see how it looks in the preview section.
    • Main Text Size: You can adjust the font size of the savings figure by passing a parameter ‘textsize’ in the flash vars of your existing Footprints widget. Also the Footprints manager has been updated to give you a preview of this and will generate the code to set the font size.
    • Sub Text Size: You can adjust the font size of the unit or measure figure by passing a parameter ’subtextsize’ in the flash vars of your existing Footprints widget. Also the Footprints manager has been updated to give you a preview of this and will generate the code to set the font size.
  3. Once you have configured your widget, you can see the updated preview in the right of the screen. Click the ‘Update Live Data’ button above the preview to see the actual data that will be displayed using your settings.
  4. Next click the ‘Code View’ option at the top of the page. Here you will see some HTML code. Just select all of this text then copy and paste it into your web page.
  5. View your web page and feel good about how much money and carbon you have saved by using Adobe Connect!

Advanced Styling

You can also style your widget beyond the available settings found in the Footprints Manager by using HTML. Here are some examples:

Example 1:

Our Sales Department’s
Total Cost Savings for 2009

Here is the code which generated Example 1:

<div style="background: transparent url(/wp-content/themes/footprints/images/travel_widget_back.jpg) no-repeat scroll center center; width: 300px; height: 225px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: #ffffff; padding-top: 20px; font-size: 13px; font-weight: bold; font-family: Arial,Helvetica,sans-serif;">
  <p style="text-align:center;">Our Sales Department's<br/>
  Total Cost Savings for 2009</p>
  <div>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
      <param name="quality" value="high" />
      <param name="FlashVars" value="accountID=MjA1NjY3OTQ3&currency=USD&uom=imperial&type=cost&textcolour=FFFFFF&start_date=2009-01-01&departmentID=ODU=" />
      <param name="wmode" value="transparent" />
      <param name="src" value="http://footprints.refineddata.com/widget/footprints_widget.swf" />
      <embed type="application/x-shockwave-flash" width="100%" height="100" src="http://footprints.refineddata.com/widget/footprints_widget.swf" wmode="transparent" flashvars="accountID=MjA1NjY3OTQ3&currency=USD&uom=imperial&type=cost&textcolour=FFFFFF&start_date=2009-01-01&departmentID=ODU=" quality="high"></embed>
    </object>
  </div>
</div>

Explanation:

You will see that the code generated from the Footprints manager has been wrapped in a DIV tag which has some CSS styling. Also the ‘color’ property from the ‘FlashVars’ param has been removed from the code generated from the Footprints manager. Removing this ‘color’ property enables the flash widget to be fully transparent so you can see your background image.

Example 2:

Our Sales Department’s Total Travel Distance Savings for 2009

And here is the code to generate Example 2:

<div style="background: transparent url(/wp-content/themes/footprints/images/green_globe.jpg) no-repeat scroll center center; height: 300px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; padding-top: 20px; font-size: 13px; font-weight: bold; font-family: Arial,Helvetica,sans-serif;">
  <div style="margin-top:90px;">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
      <param name="quality" value="high" />
      <param name="FlashVars" value="accountID=MjA1NjY3OTQ3&currency=USD&uom=imperial&type=distance&textcolour=FFFFFF&start_date=2009-01-01&departmentID=ODU=" />
      <param name="wmode" value="transparent" />
      <param name="src" value="http://footprints.refineddata.com/widget/footprints_widget.swf" />
      <embed type="application/x-shockwave-flash" width="100%" height="100" src="http://footprints.refineddata.com/widget/footprints_widget.swf" wmode="transparent" flashvars="accountID=MjA1NjY3OTQ3&currency=USD&uom=imperial&type=distance&textcolour=FFFFFF&start_date=2009-01-01&departmentID=ODU=" quality="high"></embed>
    </object>
  </div>
</div>