Fundraiser Widget

NOTICE:

This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.


rating: +10+x

Author:
ChaosMageXChaosMageX


With help from:
aismallardaismallard


With input from:
stormbreathstormbreath, WoedenazWoedenaz and CityToastCityToast


Introduction

Behold, the Fundraiser Widget, for all your digital panhandling needs!

This Component is meant to be a really fancy looking, super customizable link to your money fundraiser hosted on an external, third-party website. It comes with a Progress Bar to mark the amount of money you've raised so far towards your ultimate financial goal. From simple occasional donations and tips to a full-blown project or campaign, this Component seeks to provide a visually appealing way to link to it on your own WikiDot page(s).

ATTENTION: READ BEFORE USE


All use of this component must comply with the SCP Wiki's Donations Policy

Please read that policy carefully before using this component on your page, and don't be afraid to Ask the Staff to make sure your use of this component fully complies with the Donations Policy.

I initially designed this Component to be visually similar GoFundMe's own embed Widget for a fundraising campaign of mine that was running at the time I coded it. Instead of using GoFundMe's embed Widget, which contains social media trackers and other unwanted bloatware, 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 component should now be versatile and customizable enough to be used for any fundraiser on any third party website.


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.

Current amount of money raised ↦
Total amount of money desired ↦
Name of the Fundraiser ↦
Link to its website / main page ↦
Currency Symbol & Thousands Separator ↦
Image symbolizing the Fundraiser ↦
Link to its donation form page ↦
Name of the website hosting it ↦
Short description of its purpose ↦
 [[include component:fundraiser-widget amt= 
 |goal= 
 |title= 
 |main_url= 
 |curr_sym=$|num_sep=,
 |image_url= none
 |donate_url= none
 |logo_text= @@@@
 |description= @@@@
 ]]

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 Component, which define its purpose.

They are required to have unique values specific to your fundraiser.

Parameter Description
amt The amount currently raised towards the goal amount, which controls the Progress Bar and appears in the Progress Message.
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.

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 Component to function, but can be left with their default values, unless you want to override them.

Semi-Optional is simply my term for parameters that are still required to be included, but have been provided values in the Blank Template that don't need to be changed, unless you want or need to change them.

That's why this table includes a Default Value column.

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 image file of a picture that represents 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 give them unique values.

Parameter Description
shape

Use this parameter to adjust this Component's shape and structure.

Use a value of BHL to adjust the Widget's shape to more closely match that of the Black Highlighter Theme, which removes the rounded corners and exterior shadow, and adds a sliding hover overlay to the Donate Button (and the Title Button if title_button= true ).

See the Alternate Themes section for more details and examples.

theme

Use this parameter to change this Component'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 and examples.

title_button

Use a value of true to style this Component's Title to look like a button.

This is combined with the --fr-title-bg- and --fr-title-border- optional style variables, which are overridden by the Themes and you can override as well.

See the Alternate Themes section for more details and examples.

See the Your Own Theme section for specific details about the --fr-title-bg- and --fr-title-border- optional style variables, which you can also override and specify yourself, if you know how to use CSS.

hide_desc

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 Use a value of true to completely hide the Donate Button and the "Logo" next to it.
aux_class

An additional auxiliary class added to major elements of this Component, which allows you to further override the style and behavior of a specific instance of this Component.

Use white-spaces to add multiple classes.

This parameter is really only for people who know how to use CSS, and useful for when you have multiple instances of the widget on the same page, but need them to have a differing appearance beyond what's specified by the shape and theme parameters.

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 Description
title_icon_name

Use a value consisting of letters and numbers only to create a unique name with NO whitespaces or special characters, which will cause an icon to be placed to the left of the Title / Title Button text.

This icon's appearance depends on the values of the next two parameters.

title_icon_anim

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 / Title 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 Title text.

donate_icon_name

Use a value consisting of letters and numbers only to create a unique name with NO whitespaces or special characters, which will cause an icon to be placed to the left of the Donate Button text.

This icon's appearance depends on the values of the next two parameters.

donate_icon_anim

Similar to the title_icon_anim parameter, but applied to the icon in the Donate Button instead.

See the above description of the title_icon_anim parameter for instructions on how to use this parameter.

donate_icon_url

The link to the Donate Button Icon's image file, which will be shrunken down to about 20 × 20 pixels.

If this parameter is omitted or invalid, you'll just get a blank space to the left of the Donate Button text.


Examples

Below are examples showing how the Fundraiser Widget will appear with its default theme, based on the parameter values given.

Note: Some examples use the \ character at the end of some lines in the description parameter value. This is WikiDot's newline character, which allows you to write multiple lines of code that will be compiled into a single line/paragraph in the resulting page. This character is not necessary for the Component to function properly when given a multi-line value for any parameter, and I've merely used it some of the examples in order to make their code easier to read and copy.


Example 1:

Creates the full widget, which closely resembles GoFundMe's own embed Widget.

MedicalBills.png

$ 1, 0 0 0 raised of $ 10, 0 0 0 goal!

Please help me pay what my health insurance won't pay.


Example 2:

Creates a minimalist widget without an image, logo, or description, but with a custom currency symbol and number separator.

none

2. 0 0 0 raised of 1. 500 goal!



Example 3:

Creates a widget without an image, with a custom currency symbol, and with an altered shape that's similar to the Black Highlighter Theme.

none

£ 173 raised of £ 173, 0 0 0 goal!

Help fund my latest artist endeavor! I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.


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 Component.


Black Highlighter Theme:

Set theme to any of these values:

  • Black-Highlighter
  • BlackHighlighter
  • BHL

Result:

none

£ 500 raised of £ 17, 300 goal!

Help fund my latest artist endeavor! I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.

And if you're curious what happens if you set theme= BHL , but don't set shape= BHL , here's the code and result:

Result:

none

£ 963 raised of £ 17, 300 goal!

Help fund my latest artist endeavor! I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.


GoFundMe Theme:

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.

Set theme to any of these values:

  • GoFundMe
  • GFM

Result:

none

£ 1, 730 raised of £ 17, 300 goal!

Help fund my latest artist endeavor! I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.

With the BHL Theme shape adjustment enabled:

Result:

none

£ 2, 254 raised of £ 17, 300 goal!

Help fund my latest artist endeavor! I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.


IndieGoGo Theme:

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.

Set theme to any of these values:

  • IndieGoGo
  • IGG

Result:

none

3. 0 0 0 raised of 17. 300 goal!

Help fund my latest artistic endeavor! I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.

With the BHL Theme shape adjustment enabled:

Result:

none

4. 840 raised of 17. 300 goal!

Help fund my latest artistic endeavor! I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.


Kickstarter Theme:

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.

Set theme to any of these values:

  • KickStarter
  • KS

Result:

none

$ 6, 0 90 raised of $ 17, 300 goal!

Help fund my latest artistic endeavor! I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.

With the BHL Theme shape adjustment enabled:

Result:

none

$ 6, 666 raised of $ 17, 300 goal!

Help fund my latest artistic endeavor! I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.


Ko-Fi Theme:

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.

Set theme to any of these values:

  • Ko-Fi
  • KoFi

Result:

none


With the BHL Theme shape adjustment enabled:

Result:

none


With the Title not turned into a button, and the Progress Bar enabled, for those curious about the appearance:

Result:

none

$ 76 raised of $ 100 goal!


With the Black Highlighter Theme fully enabled:

Result:

none


With the Donate Button hidden:

Result:

none


With the Donate Button hidden and an additional wiggling icon:

Result:

none


With the BHL Theme style adjustment enabled, an animated icon on the Title button, and a static icon on the Donate Button:

Result:

none


With the Progress Bar enabled, and a wiggling icon on the Donate Button:

Result:

none

$ 120 raised of $ 500 goal!



Your Own Theme

Below are the CSS style variables used by this widget, which are overridden by the above Themes to give the widget a unique set of fonts and colors.

If you know how to use CSS modules in your page, and wish to create your own color scheme for this widget, you can override these variables within the :root { } rule of one of your page's CSS modules.

Simply copy the parts of the code below that you wish to change, and change the variable values appropriately.

You can also create multiple new themes for different instances, by putting the altered variables inside a selector block named .fr-widget.theme-fr- , followed by the name of your theme, instead of the :root selector block, and then set the theme parameter to your theme's name.

Example:

Create a latte theme with earth tones:

Result:

none

$ 10, 0 0 0 raised of $ 17, 300 goal!

Help fund my latest artistic endeavor! I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.

With the BHL Theme shape adjustment enabled:

Result:

none

$ 10, 101 raised of $ 17, 300 goal!

Help fund my latest artistic endeavor! I will sculpt a statue out of concrete and rebar, and then spray paint its exterior. It promises to entice and delight!
See the links on the fundraiser page to my online portfolios for proof of my skills.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License