Skip to main content

Organizations: Customizing and embedding campaign widgets

Organizations can customize campaign widgets (or groups of widgets) to promote campaigns on outside websites.

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

Screenshot of 300x250 web banner ad size. The campaign cover image (in this stock photo, a woman runner crossing the finish line with her arms raised and a large smile on her face). The campaign title appears in an overlay on the bottom, with two buttons under it: a black 'Learn more' and an orange 'Contribute' button.

300×450 blog post size

Screenshot of 300x450 blog post size. The campaign cover photo (same picture as in above example) is the top third, the middle contains the campaign title, the organization, and a brief snippet dictated by the 'social media summary', the goal progress bar. On the bottom are two buttons side by side: 'View' and 'Contribute"

Wide badge

Screenshot of Wide badge. The cover photo (same as above) is the left half, and the right half has the campaign title, organization, description as dictated by social media summary on the top two-thirds. And the bottom third is a black overlay with amount raised and days running.

Carousel Widget – a carousel of selected campaigns

These can be in either a 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 website. Shown below are side-by-side (2 columns) 300×250 and 300×450 representations. Navigation controls below the badges can be optionally hidden.

Screenshot of 300x250 campaign widgets side by side as would appear in a carousel. Under the two widgets is a navigation bar: a left arrow on the far left, a right arrow on the far right, and in the middle 5 circles: 2 white, 1 blue, two white. This indicates you can scroll through the carousel in the real widgets.
Screenshot of 300x450 campaign widgets side by side as would appear in a carousel. Under the two widgets is a navigation bar: a left arrow on the far left, a right arrow on the far right, and in the middle 5 circles: 2 white, 1 blue, two white. This indicates you can scroll through the carousel in the real widgets.

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

Screenshot of a 'grid' widget. There are two rows, each row with three tall widgets. Above the first row reads: Left side: Showing 6 of 92. Show mine (clickable). Right side: search bar.

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.

Screenshot of a leaderboard widget. It reads 'Find campaigns' on the top. A search bar is below that and to the right. Under is a list of campaigns under two columns: 'Position' and 'Total raised'. In this demo, there are 10 rows of campaigns listed by highest amount raised. The rows contain a thumbnail image, campaign title, beginning of social media summary, and their amount raised. below the rows it says: Left: Showing 10 of 104. Show more (clickable) Right: Show me (clickable)

Part 3: Creating and managing widgets #

STEP 1 – Click ‘Widget’ in the navigation menu of your organization profile (Under ‘Engage’).

STEP 2 – Click ‘Create a widget.’

STEP 3 – Customize your widget.

There are MANY different options here, and 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. 

Screenshot of part of the 'Create Widget' page. Highlighted are the tabs at the top of this page, from left to right: Basics, Advanced, Embed code.

Widget Key

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.

Campaign ID

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, and 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:

Tagging

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.

Preview

At the bottom of the ‘Basics’ page is a preview to ensure everything looks as you’d like.

Screenshot of a preview example. This will look different depending on what widget you customized. In this case, four 300x250 widgets are in a row. Above them reads "Showing 8 of 8" (the whole screen is not depicted) and a search bar. "Get the code" is to the top right of this preview.

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!!

screenshot of the save button that will appear to the top right of this menu setting

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:

Screenshot of the campaign 'Widget' menu in organization profile. There is one widget created in the list. The line item reads: Expand icon, Homepage (title), Description, type, and actions. Under Actions, the options are: Get code, Edit, Clone, Delete.

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. 

Loader script – This is the Javascript needed to enable the widget. This snippet can be placed anywhere on the page but works best in the Header or Footer.

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 #

  • If you use WordPress.com or a similar Content Management System to host or build your website (Weebly, Wix, Squarespace, etc.), these widgets may not work for you. WordPress and other Content Management Systems tend to strip Javascript from the source code before loading the page for a visitor.
    • This link might help IF you have some advanced HTML knowledge:

http://codex.wordpress.org/Using_Javascript 

  • Most email clients and newsletter services are not able to run javascript, and the loader code for campaign widgets is written in javascript. This means that you will probably not be able to embed a campaign widget in an email or newsletter.

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 cs@connectionpoint.com with your widget questions, and we’ll get you the answers you need.