Donate Button

Use Donate Button to replace the donation call to action button in your website’s header navigation and in other content areas across your website. Donate Button includes a heart icon and subtle animations that catch the attention of website visitors and direct them toward the opportunity to donate.

Code snippet

When you create a Donate 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 Donate 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
    • 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 that was preset in a Donate Button’s component settings.

Appearance

These settings control the appearance of Donate Button.

  • Label: 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.
  • Button size: The size of each button. Range: 30px-80px.
  • Label color: The color of the text displayed for Donate Button. We recommend maintaining a WCAG-compliant contrast between the label and its button.
  • Button color: The background color for Donate Button. We recommend maintaining a WCAG-compliant contrast between the button background and button label.
  • Icon color: The color to apply to the heart icon displayed within Donate 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-40px. 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 Donate 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 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 Donate Button is translated.

Default language

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

Related articles
Elements
Sticky
Button

 

In this article