Widgets are all of the components you can use to build out and customize your campaign/event pages.
They can be found in the Campaign Builder toolbox in the Widgets tab.
Widget placement is as easy as dragging and dropping the widget from one location to another in your content area or from the Widgets area of your toolbox into your content area. You may delete a widget by clicking the trash can icon located in the upper-right corner, or edit it by clicking the gear icon.
As you familiarize yourself with the widgets and their capabilities below, please keep in mind that all of these widgets can be used multiple times on the peer-to-peer site. The flexibility for the widgets to have a multitude of configuration options allows you to use several instances of each widget when needed.
Contents:
- Layout Container
- Custom Content
- Page Title
- Button
- Social Sharing
- Video
- X Feed
- Facebook Page
- Thermometer
- Sponsors
- Leaderboard
- Activity Feed
- Image Gallery
- Newest Participants
- Supporters
- Page-Specific Widgets
Layout Container
This widget can be used to add layouts to the page, creating various sizes of widgets and breaking up the flow of content.
When you place a Layout Container widget, you'll be prompted to Select A Layout to determine the number and size of columns.
Custom Content
This widget can be used for adding a block of formatted text to any of your site pages. The widget provides a full HTML editor so you can style the text however you'd like. You may also add hyperlinks and custom HTML, if applicable.
Edit mode:
When you click on the Gear icon, you have the ability to give the widget a title and add custom text in the Content area.
Live view:
Page Title
The Page Title widget can be used for headings/titles within your peer-to-peer site to draw attention to things. The formatting of the text is bigger and bolder than the default text in the Custom Content widget.
Edit mode:
When you click on the gear icon you'll see a place for a Page Title, a Sub Title, title Alignment, and a choice of Standard or Alternate in the Style drop-down. The page title text is large and bold and will take on the primary color in your Theme Settings. The subtitle text is a bit smaller; the text is gray and falls below the title.
Live view - Standard:
Live view - Alternate:
Button
The Button widget can be used to create a button that links to either a campaign page or an external page via a Custom URL.
Edit mode:
When you click the gear icon, you have the ability to customize your button.
The Widget Title area is optional and not always needed in the button widget. It will appear at the top of the Button Text and you can select the alignment, center, left, or right, in the Widget Title Alignment Field.
The Button Text is the text that's displayed on the button itself. Next, you can choose Site Page or Custom URL in the Links To drop-down. Site Page will give you an additional drop-down that lists any of your applicable site pages (including pages you've added). Custom URL will give you a box to enter an external URL.
If you add the Button widget to the Classification Fundraising Page, you also have the option to set the button to link directly to registration for that classification.
Next, you'll choose from Standard or Alternate for your Button Style.
Live view - Standard:
Live view - Alternate:
Social Sharing
The Social Sharing widget allows you to display Share on Facebook and Share on X buttons on your peer-to-peer site pages to encourage the use of social media.
Edit mode:
When you click the gear icon you have the ability to add a Widget Title and Description if you'd like - these are both optional fields for adding more information if you wish.
You have the option to choose from Standard or Alternate in the Display Style drop-down. If you don't add a title or description, the Standard and Alternate styling will appear very similar, but the Alternate styling will have a grey background.
Next, you'll see checkboxes for enabling or disabling the Facebook and X sharing buttons. You may also change the default text on the buttons, if you'd like, in the Button Text area.
You can also add content that will appear when someone shares your campaign on X in the Post Content area.
Live view - Standard:
Live view - Standard (with Description text):
Live view - Alternate (with Description text):
Video
The Video widget allows you to add a video hosted by YouTube, Vimeo, or Facebook to your site pages. It even works with YouTube Live and Facebook Live video streams.
Edit mode:
When you click the gear icon you'll see a place to add a Widget Title (optional), choose a Video Service, and add the Video URL. It's that simple!
Live view:
X Feed
The X Feed widget allows you to enter a X handle that will auto-update a X feed showing posts from that handle on your site pages. If desired, you can set a limit on how large the feed will appear.
Edit mode:
When you click the gear icon you'll have the ability to enter a Widget Title, adjust the Widget Title Alignment, and enter the X Handle you'd like to display live posts for.
Live view:
Not only can people view your posts from your site pages if they're not following you on X, but they can also choose to follow you by clicking on the Follow button at the top right of the widget.
Facebook Page
This widget will allow you to display an area that directs people to your Facebook page, allows them to like you on Facebook, and, if applicable, shows recent posts from your account.
Edit mode:
When you click the gear icon, you'll see all of your options for how this Facebook area will display.
First you'll enter a Widget Title and the Facebook Page URL you'd like the widget to pull information from.
You can also adjust the Height of the widget in pixels and decide whether to Show Faces, Hide Cover Photo, and Show Posts.
Live view:
Thermometer
This widget allows you to show campaign, team, or individual totals and percentage of your goal raised via a thermometer. You can choose what you'd like displayed related to your goal according to the settings shown below.
Thermometers added to or edited on all pages except for the team, classification, or personal pages will reflect campaign-wide numbers. Thermometers added to or edited on team pages can point to the team or campaign thermometers. Thermometers added to or edited on personal pages can point to the team, personal, or campaign thermometers. Those on classification pages can point to the campaign or the classification. You choose where the thermometers point in the widget settings on those pages.
Edit mode - Campaign Thermometer:
When you click the gear icon, you'll have the ability to add a Widget Title if you wish. In the Style drop-down, you can choose from a traditional thermometer display, or a more simple progress bar. Next, choose whether you'd like the thermometer piece of the widget to have a Vertical or Horizontal Layout. You can also change the Fill Color of your thermometer.
You’ll also see some options for what information you'd like displayed on your thermometer:
- Display Achieved Amount will show the dollar amount raised on your form during the time period you entered for your goal (if you entered one)
- Display Goal Amount will display the total dollar amount of your goal
- Display Goal Completion Percentage will display the % of your goal that's been raised
- Display Thermometer Countdown will show a timer counting down to the end date you entered for your goal (if you entered one)
The thermometer widget can also include Donate and Register buttons if you wish. You choose whether or not they are displayed via the checkboxes. If you have those boxes checked, you'll determine the Button Text and Button Style via the additional options. Your options for button style are Standard and Outlined.
Thermometer:
Simple:
You can embed just the thermometer on relevant websites or in blog entries, too! You can do so by visiting your public-facing peer-to-peer site and hovering over the thermometer. Click the <> icon in the upper-right corner.
You'll be presented with the dimensions of your thermometer, as well as the code you'll need to embed it! Just copy and paste the code where you'd like to embed the thermometer.
Sponsors
This widget can function as a slideshow that rotates sponsor logos based on your settings or can be used to build a more dynamic sponsors page.
Edit mode - Slideshow:
When you click on the gear icon you'll see a spot for the optional Widget Title. Next, you'll see the Display Type - your options here are Slideshow or Grid. If you have sponsor categories, you can choose to display just one of the categories or all of the categories depending on you selection here.
For the slideshow option only, you have an area for Sponsors Per Slide and an area to enter a Slide Delay. We'll look at the grid settings in a moment. The sponsors per slide area lets you set the number of sponsor logos you'd like to display per rotation. The slide delay area will determine how long each rotation will display before rotating.
Live view - Slideshow:
With the above settings we looked at in edit mode, you'll note that your sponsors widget will have one logo rotating every 3 seconds.
Edit mode - Grid:
When you click the gear icon and choose Grid in the Display Type dropdown, you'll see a different set of options. First, you'll see the ability to choose how many columns you'd like to display in your widget. You can choose one through four. Next, you can choose how much information you'd like to display about your sponsors by using the checkboxes below the Columns drop-down. You can opt to display Logo, Name, URL, and/or Description for each sponsor.
This display option is great for sponsor pages where you can show varying levels of information for different categories of sponsorships.
Live view - Grid:
Leaderboard
This widget allows you to show rankings for top Individuals, Teams, Donors, and Classifications.
Edit mode:
When you click the gear icon you'll see a place for the Widget Title and check boxes for the different categories you'd like to show within your leaderboard. If you choose multiple categories, they'll show all in one widget and you'll be able to switch between them via a drop-down menu at the top of the widget.
Next, you'll be able to choose the number of spots you'd like to display in your leaderboard. The default is 5, but if you'd like to display more rankings you may show up to 20.
Live view:
Activity Feed
This widget allows you to show a live feed of activities happening within your campaign such as: registrations, donations, participants joining teams, earning badges, etc.
Edit mode:
When you click the gear icon you'll be able to configure the Widget Title along with the number of activities to display at a time.
Live view:
Image Gallery
This widget will allow you to display just ONE image/video, a gallery of images/videos, or an image/video slideshow, depending on how it's configured. It can be added to any of the peer-to-peer site pages including the team and personal fundraising pages so your participants can upload their own photos to personalize their fundraising pages.
Edit mode:
In the Settings tab you can add a Widget Title to your image gallery and adjust the Widget Title Alignment. Next, determine if you'd like it to show as a Gallery or as a Slideshow. In the gallery configuration, viewers can click through thumbnail images/videos at their leisure. In the slideshow configuration, the images/videos will rotate based on the Slide Delay and Transition Speed settings.
The Slide Delay setting will determine how long each slide is displayed before rotating and the Transition Speed determines how long that rotation takes.
In the Gallery configuration, there are no additional settings.
You will upload your images or videos for either Display Type back in the Slides tab by clicking the +Add Slide button on the top right.
First, you'll choose your Slide Type from the drop-down. Your options include Image, YouTube Video, or Vimeo Video. When you choose Image, you'll see an Upload Image button that allows you to browse your computer for the desired photo. If you choose either of the video options, you'll see a field to type in your Video URL.
Once you choose an image or video for your slide, you have the option to enter a Title and Description if desired. Once you're happy with your first slide, click the Done button.
Once you save your first slide, you'll see the ability to edit it via the edit pencil at the top right, to rearrange it via the three bars at the top left (applicable when there are multiple slides), and the ability to add another slide (image/video) via the button at the top right.
Live view - Gallery:
You'll notice in the gallery view you have thumbnails of all images you've uploaded at the bottom of the display image.
Live view - Slideshow:
In the slideshow view, you'll see just one image at a time. Any images/videos uploaded will rotate automatically based on your settings.
Newest Participants
This widget will display the avatars of your recent campaign participants. These avatars will be clickable back to their personal fundraising pages.
Edit mode:
When you click on the gear icon, you'll have the ability to add a Widget Title, along with configure how many of your most recent participants you'd like to display in the widget. You can display up to 20 of your most recent participants.
Supporters
When placed on the Home Page, this widget will display a list of anyone who has made a donation to any entity. By default, the supporters widget will display as a scrolling list. The Number to Show drop-down selection controls how many supporters are displayed at one time. Selecting a number here does not remove the scroll function.
Edit mode:
Live Mode:
The Supporters widget works similarly on team pages and individual fundraising participant pages. However, instead of showing all campaign donations, the widget will only display donations made to the team and team members when added to the team page and only show donations made to the fundraising participant on an individual fundraising participant's page.
Page-Specific Widgets
There are a few widgets that are specific to certain pages within Campaign Builder. Let's have a look at those.
Please note: The pages and widgets described below are specific to the ongoing peer-to-peer Donations Beta. If you're looking for page-specific widgets for a standard (non-Beta) peer-to-peer form, check out this article.
Participant Fundraising Page Widgets
The My Badges widget displays all badges a participant has earned.
The Facebook Comments widget displays an area in which visitors to the Participant Fundraising Page can leave Facebook comments for the participant.
The Supporters tab will list anyone who has donated to the participant's goal.
The Team Members widget will display a participant's team members, if applicable.
Team Fundraising Page Widgets
The Team Badges widget will display all team badges earned.
The Facebook Comments widget is identical to the one described in the Participant Fundraising Page section.
The Supporters widget will list anyone who has made a donation to the team's fundraising goal.
The Team Members widget will list all members of the team.
The Classification Map widget will display the location of the classification to which the team belongs, if applicable (for example, a classification may be a race that takes place in a certain city).
The Recruitment Goal widget displays the progress made toward the team member recruitment goal. This widget will only display if a team captain has gone in to their fundraising dashboard and set a goal.
Classification Fundraising Page Widgets
The Classification Fundraising Page contains the Facebook Comments widget, just as the previously described pages do.
It also contains the Classification Teams widget, which shows each team associated with a classification.
The Classification Map widget works in the same way as on the Team Fundraising Page.
The Recruitment Goal Widget displays the progress toward the classification recruitment goal set by an admin in the Classification editing area of the control panel.
If you add the Button widget to the Classification Fundraising Page, you also have the option to set the button to link directly to registration for that classification.
Donation Form and Registration Widgets
Each step of the donation form and registration can include the Heading, Text, Spacing, and Custom Content widgets.
The Heading widget creates a text heading for a registration page.
Similarly, the Text widget creates body text for the page.
The Spacing widget allows you to specify a height in pixels and then creates a horizontal break of that height across the page.
Each step of the donation form can also include the Thermometer widget.
The Confirmation step of the donation form can also include the Social Sharing widget, which is included by default.
Store Widgets
The Breadcrumbs widget keeps track of the current step as participants are moving through the purchase process. They can click a step in the widget to move back to it.
The Print Page widget gives shoppers the option to print their receipt.
