P2P Button

Display a button that launches the P2P fundraiser onboarding screen.

The P2P Button component can be implemented on your website to provide visitors with an easy way to start or join a P2P fundraiser. When the button is selected, the P2P onboarding screen is launched.

Code snippet

When you create a P2P Button component, a code snippet will be generated for it. You place this code on your website using a CMS or code editor to render P2P Button.


Behavior

These settings control the configuration that Checkout launches with when the component is interacted with.

  • Open campaign: Dropdown selector to determine which Campaign the component should be connected to
  • Frequency: The donation mode that Checkout should launch with
    • Match Checkout settings: Launch Checkout using the default frequency option set for its Campaign
    • Default one time: Launch Checkout and preselect the one-time donation option
    • Default recurring: Launch Checkout and preselect the recurring donation option
  • Designation: The designation that should be preselected when Checkout is launched
    • Match Checkout settings: Launch Checkout using the default designation option set for its Campaign
    • [Other options]: If other designations are enabled for the connected Checkout, you can select the designation that should be preselected when Checkout is launched
  • Allow fundraiser to change designation: Enabling this options allows a donor to change the designation for their P2P fundraiser. By default, the option is not selected.
  • Default amount: The donation amount that will be prefilled in Checkout when it is launched.
    • Match Checkout setting: Launch Checkout using the default donation amount set for its Campaign
    • Customize: This option enables you to define a custom donation amount that will be prefilled in the donation amount input for Checkout when it is launched.
      • Allow donor to change selected donation amount: When selected, this option enables a donor to modify the donation amount input in Checkout.
  • Default goal: Presets the fundraising goal amount displayed on the P2P fundraiser onboarding screen. The amount can be modified by the supporter creating the fundraiser.
  • Allow to join teams: Enabling this feature displays the Join a team option in the P2P fundraiser onboarding screen. When the option is selected, supporters can search and join fundraisers created by other supporters.

Appearance

These settings control the appearance of P2P Button.

  • Label: The text to be used for the button label. There is a 30 character limit for the button label.
  • Button size: The size of each button. Range: 30px-80px.
  • Label color: The color of the text displayed for P2P Button. We recommend maintaining a WCAG-compliant contrast between the label and its button.
  • Button color: The background color for P2P Button. We recommend maintaining a WCAG-compliant contrast between the button background and button label.
  • Border size: The width of the button’s border. Range: 0px-4px. Setting a border width of 0px will hide the border.
  • Border radius: Sets the roundness of the button’s four corners. Range: 0px-44px. Setting a lower border radius value will give the button a squared appearance. A higher border radius value will give the button a pill-like appearance.
  • Border color: The color of the button’s border when the Border size setting is greater than 0px. We recommend maintaining a WCAG-compliant contrast between the border color, border background, and the background of the container where P2P Button has been placed.
  • Show shadow: When selected, a predefined drop shadow will be applied to the button.

Custom fields

When custom fields have been added to a selected campaign’s Checkout, they appear as a customization option for P2P Button. This enables you to set values that are specific to multiple components associated with the same Campaign.


Localization

These settings control how P2P Button is translated.

Default language

When Localization is enabled, a dropdown is shown in the settings for P2P Button. The selected language will be used as the default translation when Fundraise Up is unable to auto-detect a donor’s language preferences.

Label translations

When Localization is enabled, you can select the languages you want to translate the button label into. You can enable translations for any supported language.

Empowering text translations

When Localization is enabled, you can select the languages you want to translate the Empowering text textarea into. You can enable translations for any supported language.

 

In this article