Button Group

Display a set of buttons with customizable donation amounts.

The Button Group component is useful for designs where you want to display multiple buttons to represent various donation amounts. Depending on the size of the container where it is placed, the buttons displayed for Button Group will either be laid-out in a single row or in a series of rows and columns.

Code snippet

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

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
  • Buttons: You can configure up to nine buttons to be displayed in Button Group. Each button can be assigned a donation amount value. When a button is selected, it will launch Checkout and pre-fill the donation amount input with the assigned donation amount value.
    • Allow donor to change selected donation amount: When selected, this option enables a donor to modify the donation amount input in Checkout that was preset by a Button Group button.

Title

Set a custom title that is displayed above the array of buttons in Button Group.

  • Text: The text to be used for the title label. There is not character limit, but we recommend including short, tagline-like text. If no text is included, the label container will be collapsed.
  • Color: Sets the color of the title text. The color can be set using HEX, RGB, or HSL codes. We recommend maintaining a WCAG-compliant contrast between the title text and its surroundings.

Buttons

These settings control the appearance of the the buttons displayed within Button Group.

Button size: The size of each button. Range: 30px-60px.

Label color: The color of the text displayed for each button within Button Group. We recommend maintaining a WCAG-compliant contrast between the label and its button.

Button color: The background color for each button within Button Group. 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-30px. Setting a lower border radius value will give each button a squared appearance. A higher border radius value will give each 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 Button Group has been placed.

Show shadow: When selected, a predefined drop shadow will be applied to each button.

Custom fields

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

Localization

These settings control how Button Group is translated.

Default language

When Localization is enabled, a dropdown is shown in the settings for Button Group. 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 title text label into. You can enable translations for any supported language.

 

In this article