Peer-to-Peer Site provides fundraisers a fully branded website for your fundraising campaigns. Customize home, campaign, team, fundraiser, and custom pages with the widgets provided. Below we provide both written instruction and video instructions.
Video Instructions
Video 1: Campaigns and their Relationship to Peer-to-Peer Site
Video 2: Get Oriented with Peer-to-Peer Site
Video 3: Working the the Home Page on Peer-to-Peer Site
Video 4: Working with Widgets
Training Tip
Use Text Widget on Banner Image to make Text Scalable
Written Instructions
- Set up Peer-to-Peer Site
- Settings
Video Instructions
Video 1: Campaigns and their Relationship to Peer-to-Peer Site
This first video of our series on Peer-to-Peer Site discusses the relationship between Fundraising Campaigns and Peer-to-Peer Site, the steps to create a campaign with an emphasis on Peer-to-Peer features, and demonstrates selecting the default Peer-to-Peer payment form.
- Campaigns are the core of fundraising
- Peer-to-Peer Site allows you to design your pages to pull your Campaigns into the Site’s pages
- Setting up your Campaign with a focus on Peer-to-Peer fundraising
- New Campaign/Basic Information
- Campaign Description
- Image
- Site Template
- Payment & Comment Stream
- Selecting a Default Donation form for Peer-to-Peer fundraising
Video 2: Get Oriented with Peer-to-Peer Site
Video 2 of the Peer-to-Peer Site series. This video is an overview of how Peer-to-Peer Site works, a discussion of the types of pages, and options to design them.
- Types of pages: Home, Campaign, Fundraiser, Team, and Custom
- Custom Domain Option
- Default Pages
- Options to create new designs
Video 3: Working with the Home Page on Peer-to-Peer Site
Video 3 of the Peer-to-Peer Site Series. In this tutorial begin to customize the Peer-to-Peer Site. We cover:
- Home Page Customization
- Customize the Site’s Header and Footer
- Introduction to the Design Side Bar
- Definition of Dynamic Campaign
Video 4: Working with Widgets
Video 4 of the Peer-to-Peer Site Series. In this fourth video, we discuss working with widgets when customizing Peer-to-Peer Site pages. We cover:
- Publishing a home page design
- Update Peer-to-Peer Site Settings
- Pixabay Integration
- Process to add Widgets
- Types of Widgets
Training Tip
To have the text become scalable on the Banner image, use the Text widget to add Text to Banner Image.
Written Instructions
Set up Peer-to-Peer Site
1. Prepare a Campaign.
Video: Campaigns relationship with Peer-to-Peer Site
Peer-to-Peer Site pulls information from Campaigns. So a Campaign with a Payment Form is needed before you create a Peer-to-Peer Site.
For full instructions on Campaigns and Payment forms, see this article: CONNECT: Campaigns & Payment Forms
Minimum Campaign Details with Peer-to-Peer Site.
Go to Campaigns & Forms > Campaign Details. Refer to image below.
c. Image
d. Site Template - Site Template does not need to be modified yet. By default it will be set to "Based on Site Settings." If you create a new Site design, then this is the place in the Campaign for you to modify it.
Select Payment Form for Peer-to-Peer.
Choose the donation form your patrons will use when they donate via the Campaign. Fundraiser, and Teams pages. You may create a donation form in Form Builder or use an existing form. If a payment form isn't selected, the Default Form will be used.
To navigate to Payment forms go to Campaigns & Forms > select a Campaign Name > Payment Forms.
New Payment Form
When you create a new Payment Form and Save it, you will have the option to make the form "Default." Click the checkbox before you click Save button.
Existing Payment Form
For an existing Payment Form, choose the edit icon (pencil image).
Then click "Update" in Settings button to get to the Save screen.
Click in Checkbox to make the form "is Default," then click Update button.
2. In Peer-to-Peer Site.
Peer-to-Peer Site is a collection of templates that when connected to a Campaign will dynamically pull in the campaign information. Templates can be assigned to one or many campaigns.
The template designs you may create are listed below. You may create individual designs by using the “CREATE NEW DESIGN” button or hover over the template thumbnail and select “VIEW TEMPLATE”. To create the five templates listed below, hover over the template and select “DOWNLOAD TEMPLATE”
NOTE: The Organization Home Design Template specified in Peer-to-Peer Site > Settings is the primary design page for the entire Peer-to-Peer Site. The Home Page is where you set up the Header and Footer for other page designs. If you select colors and fonts for your Home Page, you have the option to use those same colors and fonts for the other page designs. Consider it the Parent Page for your additional template pages. It's a good practice to customize and save this page first.
Option 1: Default Template: Inspire
Established Peer-to-Peer campaigns that began before the launch of CONNECT 3.0 will be transferred to the Inspire template so there will be no interruption to fundraising campaigns. The Inspire Template has minimal widgets so it is the quickest to launch without making changes.
Best practice: If you wish to edit the Default Inspire Template it's recommended that you make a copy of it first with a new name then use the copy to make edits. This is so you still have the original template design intact in case you wish to revert back to that design at some point. Then you can redesign the new template without fear of making changes.
Option 2: Download a Template Family or Template Design
If you hover over a Template Family image, you have the choice to VIEW TEMPLATE or DOWNLOAD TEMPLATE. You can Download the Template Family and name it to save to Custom Designs.
Or if you choose to View Template, within the VIEW TEMPLATE use the arrows on the right and left to navigate through the designs. Here you may download the template family, choose to DOWNLOAD TEMPLATE or an individual design, or choose DOWNLOAD TO CUSTOM DESIGN.
Option 3: Create a New Template Design
If you wish to have a blank template, then you may click CREATE NEW DESIGN button.
You will be prompted to choose a Design Type for your template. Note that your Peer-to-Peer Sites Header and Footer will come from the Home Template.
And click CONTINUE to be directed to the Builder to customize the design.
Manage your designs
Naturally, you need to modify your designs after they've been created, so how do you edit or delete them?
Builder
Once you click the Design Name or choose to edit from the Action menu, the design "Builder" opens in a separate tab. We recommend that you keep only one Builder tab open at a time to avoid conflicting changes.
"Responsive Design" Basics
The Site Builder is designed to build a "responsive" site - that is, the site page can be resized to fit the width of nearly any display - mobile, tablet, or desktop.
Responsive Design has stumping implications. For instance, you can't rely on setting a fixed "width" to your elements, because that may not work on the viewer's display, so the elements are working more as percentages of the screen.
Images:
The images you use "fill the space" of the width of the element. The image width is also informing the height - the ratio between width and height is locked so you don't squish or stretch the image. If the image is bigger than you intended, you may need to resize the image or its "canvas" to get the effect you want. If the image is too tall, you can't change the width:height ratio, so you may need to crop your image. Center images in your design by controlling the padding in your widget settings.
Spacing:
Design Side Bar
The design side bar on the right side of a design opened in Builder controls the settings for that particular design.
The fonts available are Google Fonts. You can find a specific font by typing in the first 3 characters of the font name, Limiting fonts to a primary and secondary choice ensures your design is consistent throughout and is design best practice. While the Design Bar sets the font for the page, you may choose whether to use the primary or secondary font in the widget settings.
Alter social media links for the Campaign design under Campaign Details > Social Networks > Your Social Network Links
Custom Colors
Alter the colors using the provided selector slider and palette pad or by pasting a specific hex color code (example: #ef1a0a).
Changing the color selection may not affect the existing widgets in your template design, but does affect new widgets you add. The Design Bar sets the colors for the design, but you may customize colors more specifically in each individual widget's settings. The color chosen in the widget takes precedence over the Custom Colors for the design.
Action Buttons
Header
The top of your Site design is a special section that may show your logo (or not), a menu for your site with tabs and/or buttons, and a donation button. The header displays on all your Site pages - providing consistent appearance and navigation for your site.
Edit your header on designs with the Type "Home" Page.
The header may also be set to stick to the top when scrolling.
Cover Block
The second section of your template design is a wide image used as a "cover photo" or "banner". This is a section just like any section you design in your main content: you can add columns and widgets, but a "cover block" has become a standard in web design. Add an image to the background of your Cover Block in Section settings.
Recommended background image size: 1080 or 1920 pixels wide at 72 dpi (dots per inch)
Refer to Responsive Design Basics for additional guidelines on using images.
Sections
Sections represent each "row" in your design. Find a particular section by hovering over the right side of your design as you move down the page. The section menu appears on the "top right" as you roll over each section. Sections contain columns, columns contain widgets.
The Section menu allows you to add additional sections (below the current section), add columns, manage settings, move the section above or below existing sections, or delete the section.
Columns
Once you have added a column in the section menu, you find the column in the section by hovering over it, revealing the column menu. The column menu shows in the "top left" of a column.
Use the column menu to add widgets, manage column settings, move the column from one side of the section to the other, or delete the column.
Footer
There's actually no "footer" section in your design, but, like the Cover block, you will see a pre-configured "footer" in your template, as they are common in web design.. It is a section like any other section where you add columns and widgets.
Working with Widgets
Add widgets to your custom design by hovering over a column, clicking the "+" in the column menu that appears at the top of a column, and then choosing the desired widget from the popup menu.
Widgets are listed in alphabetical order.
The widget appears in your column, using its default settings.
To alter the widget's settings, hover over the widget until you see its borders outlined in light green, click in the widget's bordered area, then click the gear icon in the widget menu that appears at the bottom left corner of the widget.
Widget settings vary depending on the widget. Common settings include styling aspects like alignment, border color, widget margins and paddings, and more specific aspects like labels, related Campaign/Team/Fundraiser.
You can always change the color of the widget background; however, be aware that what you are seeing could be the background color of the widget, the column, or the section.
Move widgets by hovering over the "❖" icon in its widget menu until the cursor changes to a "Move" cursor, then click and drag the widget to another column on your design.
Remove a widget by clicking the "⛒" symbol in its widget menu.
About "Dynamic Campaign"
For example, when your widget setting is set to "Dynamic Campaign", and a site visitor to your Home page clicks on the "Fall Camp" Campaign in the Campaign Carousel, they will land on a page where the Dynamic Campaign will be "Fall Camp". Likewise, if the site visitor goes to a Team page, the Dynamic Campaign is whatever Campaign that Team is related to.
Available Widgets
Design Content
Button
Use the Button widget to create links to other pages, based on the following choices:
Examples:
Image
Add or change images to your Site. You may upload images from your computer or use Pixabay.com to search for royalty free images.
Integrate with Pixabay
The first time you want to look up an image from Pixabay, you will need to set up CONNECT's integration with Pixabay, which involves setting up a Pixabay account and acquiring an API key.
Related Article: CONNECT: Third Party Integration #Pixabay
News
Creates a news feed based on the News & Announcements posts from CONNECT.
Organization Description
Displays a text block with the text from CONNECT's Peer-to-Peer Site > Settings > Organization Description.
Separator
Adds a horizonal line to your design. The line is the width of its current column, so you may need to add another section in order to extend the line the full width of the design.
Text
Adds a text block to your design. The widget includes an HTML editor to format your text, or add links, images, or tables.
Title
Adds and format a title to your page as the Campaign, Organization, or as custom text.Video
Embeds a video block in your design. You may opt to add a YouTube URL, or a pledgeTV channel.
Campaign-Related
Campaign Carousel
Displays your active Campaigns in a carousel that can be navigated by the arrows to the right and left of the carousel. To hide an active Campaign from the carousel, change its Director Listing to "Hide" in Campaigns & Forms > Campaign > Basic Information
There are two Campaign Carousels, one that includes the description, and one that does not.
Campaign Detail
Adds the text from CONNECT Campaign at Campaign Details > Peer-to-Peer Site Settings > Description > Detail
Campaign Image
Adds the image specified in the CONNECT Campaign's > Campaign Details > Peer to Peer Site Settings > Image
Campaign Progress Bar
Adds a meter to indicate the amount raised compared to the Campaign's Target. You must specify a Target in the CONNECT Campaign's Campaign Details > Basic Information in order to use the progress meter. Choose to show the percentage raised on the bar, the amount that has been raised, and the amount left to goal.
Campaign Stats
Displays the current Campaign total, the number of donors, and the number of comments.
Available as a larger widget or a smaller one.
Campaign Stats: Large
Campaign Stats: Small
Donation Widget
Add a basic payment form using the CONNECT campaign payment settings or select "Donate" to display the form created in the CONNECT Form Builder as an overlay.
Leaderboard Members
Based on the Campaign, this widget displays the Fundraiser's avatar, Fndraiser's name, total amount raised, and number of donors.
Teams
Team Members
Displays the avatar, name, and total raised for each member of the team.
Team Profile/Stats
Displays the Team’s avatar, team name, progress bar, amount raised, and amount left to raise.
Team Ranking
Lists the fundraising teams for the Campaign. Each team listing includes the Team’s avatar, team name, amount raised, and number of team members.
Team Story
Allows the Team captain to add more content to Team page, such as images and updates
Fundraiser
Fundraisers
Lists the fundraisers for a campaign. with their profile image, fundraiser name, and total raised.
Fundraiser Profile/Stats
Displays the fundraiser’s Profile image, name, progress meter, total raised, and amount left to reach the goal.
Available as a larger widget or a smaller widget.
Fundraiser Story
Allows the fundraiser to add more content to the Fundraiser's page, such as images and updates.
Payment & Comment Carousel
Set for a Campaign, a Fundraiser, or a Team. The Carousel includes an avatar with the first initial of the donor’s name, donors first name with first letter of last name, amount donated, and the date of the transaction.
Payment & Comment Stream
Displays a list of donors for the CONNECT campaign. Information included is the donor’s first name with last initial, the amount donated, and the date of the transaction.
Social Media
Facebook Feed
Display a Facebook feed based on either the social media settings for the Campaign, or set up a custom feed using the name of the Facebook page.
Twitter Feed
This widget gives you two options to display Twitter feed on your Peer-to-Peer Sites Template. You may select for the feed to come from the Social Media Share settings in the Campaign or set up a Custom Feed using the Twitter page address.
Settings
Site Home Information
The Peer-to-Peer Settings area controls all the aspects of your Peer-to-Peer Site as a whole.
Organization Home Design URL
The URL for your Peer-to-Peer Site. For CONNECT Core, this will be "https://connect.clickandpledge.com/Organization/"" with your account number. For CONNECT Plus, you can customize your domain
Organization Home Design Template
Select the design to use as your organization's home. The design must be published and be the Home type.
Organization Description
Enter a description to appear on your designs if they include the Organization Description widget. Use the HTML editor to format your description, as you will not be able to modify this in the widget settings.
Default Site Designs
Choose the design for your Campaign, Fundraiser, and Team page structures from your published designs.
Search Engine Tags & Scripts
This section affects your listing for search engines like Chrome, Firefox, and Bing. Search engines use 'bots' or 'crawlers' to keep their listings up-to-date, and this section allows you to set some of the values those bots collect.
When a browser loads a page, the page may include code to report statistics to Google, including a specific ID for your website. This ID tells Google which Analytics/GTM account records those stats.
Google Analytics is an online service traditionally offered by Google to provide very basic analytics - how many visitors came to a page on your site? what web page did they come from? how long did they stay? Primarily this data is only affected when a site visitor moves from one URL to a different URL.
Google Tag Manager (GTM) is newer Google tool, and it is designed to be far more robust. It allows you to create "tags" in the content of your site. Tags act as 'triggers' to mark when site visitors take a specific action on any individual page - did they play the video on the page? Did they scroll to the bottom where some specific content is available? GTM then works with Analytics to provide a bigger picture on how visitors use your site. Setting up GTM is involved and generally requires special knowledge to implement.
Conversion Tracking refers to getting statistics for very specific actions taken by a site visitor - typically, did the visitor complete a transaction or make a donation on your site? Conversion tracking requires using GTM. If you are looking into conversion tracking, we recommend you work with a Partner familiar with GTM to implement your solution. They can provide you the ID value you need to enter.
Choose the ID's platform (Analytics or GTM) and enter the ID in the field provided.
HINT: Google Analytics IDs start with "UA", Google Tag Manager IDs start with "GTM".
Social Network Links
|
|
Social Network Links sets the landing pages for the social media flyout on the left side of your designs. |
Social Share Message
Social Share Message appears in News and Announcement articles
Create the Message Title, Message Body, Share Link, and Share Image for the social post your site visitor adds to their feed when they share your organization's Home Page.
You may need to resize your image width to the minimum 600px to get the desired effect when cropping. Facebook's recommended size is 1200 px wide by 630 px high.
If you would like to craft messages for your individual Campaign pages, enter those under Campaigns & Forms > Campaign Name > Campaign Details > Primary Campaign Settings > Social Share Message.
Facebook caches information used for sharing. If Facebook shares do not display your most recent changes, ask Facebook bots to 'scrape' your site to get the updated information. Enter the Organization Home URL in the Facebook Batch Invalidator and click 'Debug'.
- Primary Campaign Settings
- Peer-to-Peer Site Settings
- Home Page – Information about your Organization (who you are, what you do, call for volunteers, etc.)
- Campaign Page – Information on the fundraising Campaign.
- Fundraiser Page – template set by organization for fundraisers.
- Teams Page – template set by organization for teams.
- Blank Page – Any additional information you would like to add for you Peer-to-Peer campaign.
- Margin is extra spacing outside the element's border
- Padding is extra spacing inside the element's border
- Match Home Page Font & Color Selection
- Primary Font
- Secondary Font
- Preview Campaign
- Hide Share buttons
- Choose a color theme
-
Main Color:
- Donation Widget - Amount buttons
- Button Widget - Background color
- Button Widget - Border color
-
Secondary Color
- Donation Widget - Background color
- Campaign Stats (both) - List Settings > Background color
-
Complementary Color
- Donation Widget - Submit Button Background color
-
Contrast Color
- Donation Widget - Buttons Label color
- Button Widget - Label color
-
Text Color
- Text Widget
- All other text in design
- Save Draft - saves the current settings for your design
- Discard Changes - should your changes get out of hand, use "Discard Changes" to revert to the previously saved design
- Publish - make your changes LIVE for your design
- Preview - review a preview of your design
- Exit - closes the Builder tab. You may also just close the tab in your browser.
- Design Content
- Campaign-Related
- Simple Link - Enter a URL as the landing page when the site visitor clicks the button.
- Go To Page - Direct the site visitor to one of the other pages you've created for your Peer-to-Peer Site. Select from:
- Home
- Campaign
- Fundraiser - requires selection of the relevant Campaign and Fundraiser's page
- Team - requires selection of the relevant Campaign and Team's page
- Custom
- Become a Fundraiser - Specify the Campaign the site visitor joins when clicking the button.
- Join a Team - Site visitor selects a team to join
- Donation - Opens the Campaign donation form as an overlay for patrons to contribute to the campaign, team, or fundraiser
- Fundraiser Login - Opens the Login screen for the Fundraiser's profile
- Open in New Window checkbox - Opens the button link as a new page in the browser.
-
Title - Sets the title for the search result returned by a search engine (#1 above).
-
Keywords - Provide the search engine some idea of the information available on your site
-
Description - Sets the summary displayed for your listing in a search result (#2 above)
-
Select Google Platform
-
Message Title and Shared Link affect the top of the social post (#1 above), Message Title is limited to 100 characters, but may be truncated based on the limits of the social media site. Shared Link also affects the link when a site visitor clicks on the image.
-
Message Body affects the paragraph in the post (#2 above). Due to variations in character limits between social media sites, this message could be truncated.
-
Internal Notes is only for your reference, and is not displayed elsewhere. Example Use: Add notes to internal staff regarding why the post was worded a specific way or a particular image was used.
-
and, of course, Shared Image impacts the image that is shared.