What is a campaign widget? How are they used? This article will teach you not only what widgets are but how just about anyone can use them!
(Trust us, if some of our non-development colleagues can work with them, you can too!)
- What the h-e-c-k is a smart widget?
- Types of widgets
- Creating & managing widgets
- Installing smart widgets
- Restrictions and tips
Part 1: What the h-e-c-k is a “Smart Widget?” #
The ConnectionPoint suite of platforms supports a rich collection of “smart widgets.” A widget is an icon that links to your campaign (or a group of campaigns) and displays specific information about your campaign(s). We provide snippets of code that can be added to web pages to show campaign content or collections of campaigns in multiple locations.
Our campaigns all have simple widget capabilities; however, organizations can customize widgets to fit the varying needs of their campaigns and websites. The best part is that you do NOT have to be a professional programmer to create these.
“Smart” widgets are automatically updated with up-to-the-minute results from the campaigns. You can select the content to display based on defined tags or various criteria such as “featured,” “trending,” “new,” “finishing,” etc. This allows your site to be automatically updated every time a campaign is launched.
Widgets that present a collection of campaigns can optionally include a search function. With this, viewers can find a specific campaign within the collection based on text fragments such as the name of their friend or team or even keywords within the campaign content.
Part 2: Types of Widgets #
Several different widget types/styles can be used to display campaign content or to provide access to creating or managing campaigns.
Single Campaign Widget
A single campaign widget shows the most basic information about a campaign (title, description, photo,
the amount raised, etc.) in a small “badge format.” There are many different size badges available.
- 300×250 web banner ad size
- 300×450 blog post size
- 220×440 side column size
- A generic “tall” format with variable width from 180-400 pixels
- A generic “wide” format with a variable width from 340-600 pixels
Providing widgets of these sizes makes it easy to fit the campaign information into standard web pages on different websites.
300×250 web banner ad size
300×450 blog post size
Carousel Widget – a carousel of selected campaigns
These can be in either slider or fader format and have a variety of sizing and effects options. The primary use of this smart widget is to highlight “featured” campaigns on a partner’s web site. Shown below are side-by-side (2 column) 300×250 and 300×450 representations. Navigation controls below the badges can be optionally hidden.
Grid Widget – a searchable grid of campaigns
The grid can have various geometries (height, width, badge size/type) and can be sorted by results, time, or randomly. Shown below is a grid with “tall badges.”
Leaderboard Widget – a searchable leaderboard of campaigns
The leaderboard is sorted by amount raised and can either show results from within a single campaign
e.g. showing the fundraising results of campaign promoters (and/or campaign managers) or can be
based on comparing whole campaigns against each other, e.g. showing the results of different teams
competing with each other.
Part 3: Creating and managing widgets #
You can find the custom widget option in your Organization Profile.
STEP 1 – Click ‘Widget’ in the sidebar menu of your organization profile.
STEP 2 – Click ‘Create a widget.’
STEP 3 – Customize your widget.
There are MANY different options here, but we aren’t going to go over each one because there is also in-platform guidance to help you out. But we’ll help here in some key areas!
Choose your widget type first, then customize the features. There are Basic and Advanced features (advanced isn’t available for all widget types). Make sure you explore options in each.
When creating a new widget, besides selecting the type of widget you must set a unique key name for it.
This key is used within the custom script that loads the widget to identify it. The short description is not
shown publicly and is useful to help you remember why you created the widget and perhaps where you
have deployed it. Choose the name carefully as it cannot be changed once it is set.
You may be asked for the campaign ID, depending on the widget type. This is a mix of letters and numbers in your campaign URL after the “.com/”. For example, in www.crowdfundr.com/8f22j, the campaign ID is 8f22j.
NOTE: If you’ve customized the URL, you’ll need to go to your campaign’s ‘About’ section to find the ID (see below).
NOTE²: You’ll notice a reference code after the campaign ID in the URL. This begins with a question mark (‘?’), then ‘ref=’ and a string of letters and numbers. This is your reference code, it is NOT part of your campaign ID. It’s actually linked to your User Profile!
You can also find this by looking in the ‘About’ section of your campaign’s sidebar menu:
To make life easier, you can ‘tag’ campaigns to group them for different purposes, including grouping widgets for carousels or grids. You can apply as many discrete word “tags” to a campaign as you like.
Examples of tag uses include:
- Categorization – grouping campaigns by category for financial reporting or marketing purposes (e.g. all cancer-related healthcare campaigns)
- Localization – grouping campaigns by location or referring entity (e.g. all campaigns within the named region within a specific state or province)
- Featured – identifying campaigns for additional promotion on a website or email blast.
At the bottom of the ‘Basics’ page is a preview to ensure everything looks as you’d like.
Remember – our platforms are suited for exploration. We encourage you to get comfortable with the different settings available. If you’re curious about what a certain setting does, change it and find out! You can always edit your widget or start a completely new one if you believe you’ve messed up (Which we doubt. You’re awesome!).
STEP 4 – SAVE!!
STEP 5 – Click ‘Get code’ in your new widget’s line.
After you save, you’ll be taken back to the main widget menu, where you can grab your code:
Part 4: Installing smart widgets #
Once you’ve clicked ‘Get code’, you’ll see options to click a Loader script and a Widget script.
Copy & paste both the Loader code and the Widget code into the source code for your website.
Widget code – This is the code for the widget itself. This snippet needs to be placed where you want the widget to appear on the page.
Part 5: Restrictions & Tips #
- This link might help IF you have some advanced HTML knowledge:
Our engineering team is phenomenal. They did build our platforms, after all! And they are always happy to answer questions if you’re stuck. Just message us at email@example.com with your widget questions, and we’ll get you the answers you need.