Installing & Customizing your KIMBIA Status widget
KIMBIA's new status widget allows you to display the fundraising status of an entire KIMBIA Campaign, or a specific form on any web page. It is much more than a de-facto thermometer. It can be styled to match the look and feel of your website and customized to reflect the data you wish to display.
If your Campaigns or forms are using KIMBIA's Everybody features, the status widget can be targeted to an individual advocates status by simply installing it on an HTML page that already displays the personalized donation form for an advocate.
This post covers:
- Installing the snippet to display a Campaign's status
- Installing the snippet to display an Advocate's status
- Modifying the snippet to display the status of a single form
- Modifying the snippet to account for offline transactions
- Customizing your Status widget with CSS
- Optional Parameters
Installing the snippet to display a Campaign's status
Simply paste the following code into the HTML page you wish to display the status widget:
<script src="https://widgets.kimbia.com/widgets/executor/statusBar?campaign=[campaign_prefix].kimbia.com"></script>
This standard snippet will display the Campaign's status by default. Make sure you replace [campaign_prefix] with the actual prefix of your campaign listed in the 'Hosted Page' address on the Campaign Details page shown below:
Installing the snippet to display an Advocate's status
Follow the same steps as above, but make sure to paste the snippet onto a page that will already be displaying a personalized fundraising form. This page will already contain the Advocate's unique ID in the URL. The widget will automatically display the amount raised by the advocate and the amount remaining if any.If your campaign is using fundraising forms that have a pre-defined goal, we strongly recommend adding the
&goal= parameter (see Optional Parameters below) to your snippet to display the goal you have set for an individual advocate.
Modifying the snippet to display the status of a single form
Easy. Use the?channel= parameter (see Optional Parameters below) in your snippet and add the portion of 'Hosted Page' address of your form on the Fundraiser Details page shown below:
Modifying the snippet to account for offline transactions
We realize that not all donations are made online, nor are all refunds. However, its imperative that when you're reporting the status of a fundraiser you accurately reflect the total amount raised. No problem. Using the&alterTotal= parameter (see Optional Parameters below), you can adjust the total displayed up or down to account for offline transactions.
Customizing your Status widget with CSS
We think our status widget looks fabulous out-of-the-box. But, if gilding the lilly is your thing, please be our guests. Using the custom CSS template below, you can easily adjust the default look and feel to match your existing HTML.As always, customizing the CSS is optional. If you do choose to create a custom CSS file:
1) you're responsible for hosting this file on your website
2) only include the style attributes from the following template that you wish to override. Placing null value attributes in your declarations will cause your styling to break in unexpected ways!
KIMBIA Status Widget Custom CSS template
The following image gives provides a visualization of the HTML elements available for styling and how the markup relates to the rendered widget:
Optional Parameters
| PARAMETER | FORMAT | NOTES |
|---|---|---|
?channel= |
text | This will display a single form's fundraising status. (ex. '?channel=[CAMPAIGN_PREFIX].kimbia.com/[FORM_SUFFIX]') This should be used in place of the '?campaign=' parameter in the standard snippet |
&alterTotal= |
integer | May be a positive or negative value. This value will be either added or subtracted from the total fundraising amount in the KIMBIA system for the campaign or form whose progress is being displayed. (ex. '&alterTotal=300' or '&alterTotal=-200') |
&barColor= |
hex color | Color will be applied to: · the bar color · border & text color of the 'amount raised to date' block · background color of the 'days remaining' block (ex. '&barColor=9210d5') Do not include the # sign. |
&goal= |
integer | This will override the goal set in the Fundraiser Details. (ex. '&goal=2000') Positive integers only. |
