Per 
Introduction
Behold, the Fundraiser Widget, for all your digital panhandling needs!
I made this widget because I couldn't use GoFundMe's own embed Widget for my fundraising campaign, due to conflicts with site policy. Instead, I decided to create my own WikiDot Component that's visually inspired by the GoFundMe Widget and has similar functionality.
This is the result, which has gone far beyond making an imitation of the GoFundMe Widget. This widget should be versatile and customizable enough to be used for any fundraiser on any third party website. The only disadvantage is that you have to manually update the amount of money you've raised towards your goal, instead of being synchronized with whatever fundraising website you're using.
Parameters
The parameters are divided into three tiers, with Tier 1 being required parameters,
Tier 2 being semi-optional parameters, and Tier 3 being fully optional parameters.
1st Tier Parameters:
These parameters are the core parameters of the widget, which define its purpose.
They are required to have unique values specific to your fundraiser.
| Parameter | Description |
|---|---|
| goal |
The ultimate goal amount of money for your fundraiser, which controls the Progress Bar and appears in the Progress Message. If set to a negative number or zero, the Progress Bar and Progress Message will disappear. |
| amt | The amount currently raised towards the goal amount, which controls the Progress Bar and appears in the Progress Message. |
| title | The name of your fundraiser, which is used for the Title text that also acts as the main link to the 3rd party website that hosts your fundraiser. |
| main_url | The link to your fundraiser's main page on the 3rd party website hosting it. |
2nd Tier Parameters:
These parameters must be included for the Widget to function, but can be left with their default values, unless you want to override them.
I wanted to these parameters to be optional, but unfortunately they are required to be included, due to the limitations of WikiDot.
| Parameter | Default | Description |
|---|---|---|
| curr_sym | $ |
The currency symbol that's prepended to the amount raised and the goal amount in the Progress Message. Examples include the USD ( $ ), the GBP ( £ ), and the Euro ( € ). |
| num_sep | , |
The separator for thousands and millions on the amount raised and the goal amount in the Progress Message. Examples include the comma ( , ) and the period ( . ) for some. |
| image_url | none |
The link to an online "click bait" image file for your fundraiser. This image will also serve as a main_url link when clicked. If you don't have or want an image, use a value of none to make it disappear. |
| donate_url | none |
The link to your fundraiser's donation page on the 3rd party website hosting it, which the Donate Button will link to. If you don't have a direct donation link, use a value of none and the Donate Button will link to the main_url instead. |
| logo_text | @@@@ |
The name of the fundraising website that you're using, which appears next to the Donate Button.1 If you don't want a logo, use a value of @@@@ to make it blank. |
| description | @@@@ |
A short description of your fundraiser, which will be placed between the Progress Message and the Donate Button. If you don't want a description, use a value of @@@@ to make it blank. |
3rd Tier Parameters:
These parameters are truly optional, and can be completely omitted from the
[[include component:fundraiser-widget]]
statement on your page without any adverse effects, unless you want to override them.
| Parameter | Example | Description |
|---|---|---|
| BHL | true |
Use a value of true to adjust the Widget's appearance to more closely match that of the Black Highlighter Theme, by removing the rounded corners, changing the font and adding a sliding hover overlay to the Donate Button (and the Title Button if title_button= true). See the Alternate Themes section for more details. |
| theme | GoFundMe |
Use this parameter to change the Widget's color scheme from the default theme to one that matches the 3rd party website hosting your fundraiser, or to one that matches the BHL theme or to the BHL-derived theme you're using for the page that will contain this Widget. See the Alternate Themes section for more details. |
| title_button | true |
Use a value of true to style the Widget's Title to look like a button. This is combined with the --fr-title-bg- and --fr-title-border- optional style variables. |
| hide_desc | true |
Use a value of true to completely hide the description. Useful for hiding the whitespace between the Progress Message and Donate Button that's created by a blank @@@@ description. |
| hide_donate | true | Use a value of true to completely hide the Donate Button and the "Logo" next to it. |
| aux | myClass |
An additional auxiliary style class added to most elements of the widget, which allows you to further override the style and behavior of a specific instance of the widget. For instance, defining aux= myClass will give most elements the additional class aux-fr-myClass . This parameter is really only for people who know how to use CSS. |
These parameters pertain to the optional Title and Donate Button Icons.
This optional feature was inspired by the animated icon in the Ko-Fi Donate Button embed.
| Parameter | Example | Description |
|---|---|---|
| title_icon_show | true |
Use a value of true to place an icon to the left of the Title text. This icon's appearance depends on the values of the next two parameters. |
| title_icon_anim | none |
The animation applied to the icon, which must follow the syntax of the CSS3 animation: property, and use a defined CSS3 @keyframes Rule. Use a value of icon-wiggle 3s infinite to use this Widget's one pre-defined animation, which makes the icon grow slightly, shake twice, and then shrink back down every 3 seconds. |
| title_icon_url |
The link to the Title Icon's image file, which will be shrunken down to about 30 × 30 pixels. If this parameter is omitted or invalid, you'll just get a blank space to the left of the Title text. |
|
| donate_icon_show | true |
Use a value of true to place an icon to the left of the Donate Button text. This icon's appearance depends on the values of the next two parameters. |
| donate_icon_anim | none |
The animation applied to the icon, which must follow the syntax of the CSS3 animation: property, and use a defined CSS3 @keyframes Rule. Use a value of icon-wiggle 3s infinite to use this Widget's one pre-defined animation, which makes the icon grow slightly, shake twice, and then shrink back down every 3 seconds. |
| donate_icon_url |
The link to the Donate Button Icon's image file, which will be shrunken down to about 30 × 30 pixels. If this parameter is omitted or invalid, you'll just get a blank space to the left of the Donate Button text. |
Blank Template
Below is the most basic code needed to create the Fundraiser Widget on your page.
Simply copy-paste the code and provide values for the first four parameters.
[[include component:fundraiser-widget goal= |amt=
|title=
|main_url=
|curr_sym=$|num_sep=,
|image_url= none
|donate_url= none
|logo_text= @@@@
|description= @@@@
]]
Examples
Below are examples showing how the Fundraiser Widget will appear with its default theme, based on the parameter values given.
Example 1:
Creates the full widget, which closely resembles GoFundMe's own embed Widget.
Example 2:
Creates a minimalist widget without an image, logo, or description, but with a custom currency symbol and number separator.
Example 3:
Creates a widget without an image, and with an altered style that's similar to the Black Highlighter Theme.
Alternate Themes
Below are examples of alternate themes that can match the color schemes of various well-known 3rd Party Fundraiser Websites, or match the color scheme of the BHL theme or the BHL-derived theme you're using for the page that will contain this Widget.
Black Highlighter Theme:
Result:
And if you're curious what happens if you set theme= BHL , but don't set BHL= true , here's the code and result:
Result:
GoFundMe:
For GoFundMe, your main_url is your GoFundMe Fundraiser main page, and your donate_url is your main_url with /donate appended to the end of it.
Result:
With the Black Highlighter style adjustment enabled:
Result:
IndieGoGo:
For IndieGoGo, both your main_url is your IndieGoGo Project main page, and your donate_url is none , because IndieGoGo doesn't have a separate donation form page, at least to my knowledge, instead opting to put that form in a modal dialog.
Result:
With the Black Highlighter style adjustment enabled:
Result:
Kickstarter:
For Kickstarter, your main_url is your Kickstarter Project main page, and your donate_url is your main_url with /pledge/new?clicked_reward=false appended to the end of it.
Result:
With the Black Highlighter style adjustment enabled:
Result:
Ko-Fi:
For Ko-Fi, to get your donation link, first create your Ko-Fi Button elsewhere using their embed code.
Then right-click on it, choose "Copy link address" in the drop-down menu, and paste this link into the main_url parameter.
Keep the none value for the donate_url parameter.
Don't forget to set the goal parameter to zero to hide the progress bar, since Ko-Fi doesn't support monetary goals. However, I've created a progess bar color palette that matches the Ko-Fi color scheme, if you still want to set up a monetary goal. Just keep in mind that you'll have to track the progress towards that goal manually, on your own, in a ledger somewhere.
Result:
With the BHL style adjustment enabled:
Result:
With the Title not turned into a button, and the Progress Bar enabled, for those curious about the appearance:
Result:
With the Black Highlighter Theme fully enabled:
Result:
With the Donate Button hidden:
Result:
With the Donate Button hidden and an additional wiggling icon:
Result:
With the BHL style adjustment enabled, an animated icon on the Title button, and a static icon on the Donate Button.
Result:
