Sticky Button

Sticky Button is an overlay component, meaning that it is displayed outside of your website’s page layouts and positioned at the higher visual layer (z-index).

Similar to Donate Button, Sticky Button includes subtle animations to catch the attention of website visitors.

Sticky Button is attached to the edge of the browser viewport and remains in position as a website visitors scrolls the pages of your website.

Because Sticky Button does not have to be added to the contents of your web pages, it can be implemented with minimal effort. Once the Fundraise Up installation code has been added to your website, you can activate Sticky 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 Sticky Button’s component settings.

Appearance

These settings control the appearance of Sticky Button.

  • Alignment: This setting controls which edge of the viewport Sticky Button will be attached to. You can select from: Top, Left, Right, and Bottom.
  • Position: This setting controls the X or Y axis positioning of Sticky Button based on the selected alignment setting. Here are the selectable options:
    • Top-aligned/bottom-aligned: Left, Center, Right
    • Left-aligned/right-aligned: Top, Center, Bottom
  • Scroll offset: This setting determines the vertical scroll trigger point in pixels at which Sticky Button will be shown.
  • Label: The text to be used for the button label.
  • Button size: The size of Sticky Button. Range: 30px-80px.
  • Label color: The color of the text displayed for Sticky Button. We recommend maintaining a WCAG-compliant contrast between the label and its button.
  • Button color: The background color for Sticky Button. We recommend maintaining a WCAG-compliant contrast between the button background and button label.
  • Icon: The color to apply to the heart icon displayed within Sticky 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 Sticky Button has been placed.
  • Show shadow: When selected, a predefined drop shadow will be applied to the button.

Visibility

Sticky Button’s visibility controls let you define where the component should be shown based on web browser, URL, or a combination of both.

Browser type

  • Show on: This selector enables you to choose when Sticky Button should be shown based on the web browser used to visit your organization’s website. Here are the options you can select:
    • Desktop and mobile browsers: Sticky Button will be shown when a donor visits your website on a desktop browser or a mobile browser.
    • Desktop browsers only: Sticky Button will only be shown when your website is visited from a desktop browser.
    • Mobile browsers only: Sticky Button will only be shown when your website is visited from a mobile browser
You can create separate desktop and mobile versions of Sticky Button and use their visibility settings to show or hide each Sticky Button based on the web browser used to visit your website.

URL rules

Specific to overlay-style Elements, these settings let you define the pages where Sticky Button should be shown.

You can control the general display of Sticky Button using two textarea inputs:

  • Only show elements at these URLs: Any URL included in this text area will display Sticky Button
  • Never show element at these URLs: Any URL included in this text area will never display Sticky Button

In both cases, you can include up to 20 URLs formatted as described below:

Behavior Example Description
Target the root directory https://mycharity.org/ The component will be shown or hidden on the index page of the root directory.
Target all subdirectories https://mycharity.org/* The component will be hidden or shown on all pages below the root directory.
Target a specific directory https://mycharity.org/about/ The component will be shown or hidden only for the index file in the target directory.

The URL behaviors described above can be combined to create granular rules. For example, you should show/hide an overlay component for all pages in a subdirectory using this rule: https://mycharity.org/about/*

When URL controls are used, always provide the full URL you are targeting, including https://, and include the trailing slash at the end of the URL, even if you are targeting a page hosted in the root directory of your website.

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 Sticky Button is translated.

Default language

When Localization is enabled, a dropdown is shown in the settings for Sticky 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.

Enable/disable component

The display of overlay components like Sticky Button can be controlled from the component’s settings using the Element is enabled option. By default, the option is selected when you create a Sticky Button component. Deselecting the option will prevent Sticky Button from being shown on your website.

Related articles
Donate
Button

 

In this article