Elements

A UI kit developed specifically for digital fundraising.

Elements is a fundraising-specific UI kit developed by Fundraise Up. It consists of more than 20 components like buttons, inputs, and sliders, that can be easily implemented on your organization’s website.

Using Elements components on your website helps engage donors as they browse your site content and increases conversion.

Elements components are created and managed from the Elements view in the Fundraise Up Dashboard. Each component is associated with a Campaign.

Installation

As a best practice, use Elements when the Fundraise Up installation code has been added to your website. Overlay components, such as Reminder and Popup, can then be used without additional configuration. Other components are added to your website using code snippets, which need to be added to your website using a content management system (CMS) or code editor. Once a component’s code snippet has been placed on your website, you can make changes to the component’s appearance and behavior from the Dashboard. No modifications to the code snippet are required.

Example:

1<a href="#XTGWFZFR" style="display: none"></a>

A code snippet that when added to your website using a CMS or code editor, will render a Donate Button component.

Types of components

There are six categories of Elements components:

  • Buttons: Donate Button, Sticky Button, Image Card, Button Group, P2P Button
  • Data: Goal Meter, Stat Counter, Donor Map
  • Forms: Donation Form, Simple Form, Impact Slider, Donation Levels
  • Links: Donate Link, QR Code, P2P Link
  • Lists: Top Supporters, Recent Donations, Top Fundraisers
  • Overlays: Reminder, Message Bar, Social Proof, Popup.

Most components are added to your website using code snippets, however, overlay-style components are implemented without code snippets and can be used on any webpage where the Fundraise Up installation code has been added. This is because overlay-style components are not placed within the layout of your website, but are instead overlayed above page contents at the highest visual layer (z-index) of your site.

No-code options

Some Elements components do not require the Fundraise Up installation code to render and can be implemented outside of your website.

The following are no-code components:

  • Donate Link
  • P2P Link
  • QR Code

When created in the Fundraise Up Dashboard, Donate Link and P2P Link components generate tracked links. These links can be used for email campaigns, social media posts, and assets in other channels. The QR Code component enables you to generate a downloadable PNG image file of the generated code that can be added to offline channel assets like direct mail packages.

Example:

1https://donate.ropsi.org/-/XWZBZUBB

This URL is generated using the Donate Link Elements component. It can be used in email campaigns and other places where the Fundraise Up installation code has not been added.

Customization

Elements components are customized from the Elements view within the Fundraise Up Dashboard.

When a new component is created, you have the ability to configure its behavior, appearance, and other characteristics. This configured can be modified at any time by accessing the component from the Elements view.

There are five common configuration areas for Elements components:

  • Behavior: These settings dictate which Campaign the component is associated with and the options that should be used when the selected Campaign’s Checkout is launched from the component. The availability of behavior-related settings is based on the type of component selected.
  • Appearance: These settings provide controls for appearance customizations such as sizing, color, borders, and shadows. Configuring appearance settings helps you customize components to match the appearance of your existing 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.
  • URL control/Visibility: Specific to overlay-style Elements, these settings let you define the pages where components like Reminder, Social Proof, and Message Bar should appear.
    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.

  • Localization: The labels for many Elements components can be localized. When the Localization feature is enabled, a Localization item will be displayed. Selecting it displays the translations you can enable for the component. When a language is selected, an input is displayed for adding a translated label.

Customization options vary for each component. The view the specific options for a component, select the component from the Elements view in the Fundraise Up Dashboard.

Conversion tracking

Each Elements component includes the ability to track its conversion. There are three conversion funnel metrics that are gauged:

  • Component views: the number of website visitors who viewed the component (the component was visible in the viewport)
  • Checkout/form views: The number of website visitors who interacted with the component and then viewed its associated Checkout or form.
  • Donations: The number of website visitors whose donation originated from interacting with the component.
    When viewing conversion statistics for Fundraisers, the number of Fundraisers created is counted in place of number of donations made.

Conversion statistics for each Elements component is visible in the Elements view of the Dashboard.

Real-time updates

One of the benefits of using Elements on your website is that the components you implement can be updated from the Fundraise Up Dashboard.

When changes to a component are made in the Fundraise Up Dashboard, the changes are automatically propagated to your website in real time.

This functionality reduces the dependency on your organization’s web developers to make changes to appearance and behavior properties for components, and increases the flexibility and control that marketing and fundraising teams have over the calls-to-action that they create to generate donations on your organization’s website.

When changes are made to an Elements component in the Dashboard, it may take a few minutes for the changes to propagate across the Internet.

Localization

Many Elements components are integrated with Fundraise Up’s localization tools, enabling your organization to create donor experiences that are fully-translated into your donors’ preferred languages. Read to the guides for each component and explore Localization to learn more.

Checkout compatibility

Some Elements components can only be used when compatible payment methods are enabled for associated Campaigns and their Checkouts.

Compatible when any payment option is configured for Checkout

These components can launch Checkout regardless of the payment methods offered, but some components’ settings may be hidden for certain payment methods.

Fully-compatible components

The following components can launch Checkout regardless of the payment methods configuration in Checkout.

  • Goal Meter
  • Stat Counter
  • Top Supporters
  • Social Proof
  • Recent Donations
  • Donor Map

Components with exceptions

The following components can launch Checkout, but when Crypto or Stock payment methods are enabled for the Checkout, the Default amount and Frequency properties will not be displayed in the component’s settings view.

  • Donate Link
  • Donate Button
  • Sticky Button
  • Message Bar
  • QR Code

Compatible when Standard currency is the only payment method configured for Checkout

When the payment method option for a Campaign’s Checkout is set to Standard currency and crypto and stock payment methods are not selected, the following Elements components can be used to launch Checkout:

  • P2P Button
  • P2P Link
  • Top Fundraisers

Compatible when Standard currency is the default payment option configured for Checkout

When the Default Checkout payment method is set to Standard currency, the following Elements components can be used to launch Checkout:

  • Donation Form
  • Simple Form
  • Image Card
  • Impact Slider
  • Donation Levels
  • Button Group
  • Donate Link
Related articles
Top
Fundraisers

 

In this article