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, including buttons, inputs, and sliders, that can be easily implemented on your organization’s website.

Using Elements on your website engages supporters as they browse your site content, and increases conversion. For Elements such as Recent Donations and Goal Meter, donations usually appear on the Element after around 30 seconds (though this can take up to 1 minute), allowing supporters to monitor your campaign’s progress in near-real-time and see their contribution reflected.

Elements are created and managed from the Elements tab in the Fundraise Up Dashboard. Each Element you create is associated with one of your campaigns.

Found a mistake? Is there a missing topic? Hard to read? Let us know

Types of components

 
Link copied

There are six types of Element:

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

To create any of these elements, go to the Elements tab in the Dashboard and click New Element.

Opening behavior

 
Link copied

If both the Campaign Page and the Checkout modal are enabled for a campaign, Elements connected to that campaign may open either of the two formats, as per the following rules:

Element Opens
• Donate Button • Donation Form • Sticky Button • Image Card • Message Bar • Popup • Impact Slider • Top Fundraisers • Donation Levels • Message Bar • Simple Form • Button Group • Recent Donations • Top Supporters • Top Locations Checkout modal
• Donate Link • QR Code Campaign Page (see exceptions)
Any Element that’s opening a Fundraiser Checkout modal

Installation

 
Link copied

As a best practice, we recommend that you use Elements once the Fundraise Up installation code has already been added to your website.

Overlay components, such as Reminder and Popup, as well as the Sticky Button can then be used without additional configuration. This is because overlay-style components are not placed within the layout of your website, but are instead overlayed over page contents at the highest visual layer (z-index) of your site. When creating the Element, simply enter the URLs where you want the Element to appear (or not appear).

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.

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

An example: here’s a code snippet that, when added to your website using a CMS or code editor, will render a Donate Button.

Once an Element’s code snippet has been placed on your website, you can make changes to that Element’s appearance and behavior from the Dashboard. No modifications to the code snippet are required, and the Element will automatically update to reflect any changes you make.

No-code Elements

 
Link copied

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
  • Fundraisers Link
  • QR Code

When created in the Fundraise Up Dashboard, Donate Link and Fundraisers 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 channels, like direct mail packages.

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

This example 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

 
Link copied

Elements are customized from the Elements tab within the Fundraise Up Dashboard.

When a new component is created, you can configure its behavior, appearance, and other characteristics. These configurations can be modified at any time by accessing that component from the Elements tab.

Any edits you make in the Dashboard will apply automatically to all the Elements you have deployed. There is no need to update the code snippet.

There are five common configuration areas for Elements:

  • Behavior: these settings dictate which campaign the component is associated with, and how the selected campaign’s Checkout form should appear when it’s launched from an Element. You can use Match checkout settings in these instances if you want to keep the same settings as in that campaign. The exact set of behavior-related settings depends on the specific Element you’re creating/editing.
  • Appearance: these settings provide controls for appearance customizations such as sizing, colors and borders. Configuring appearance settings helps you customize Elements to match the appearance of your existing website.
  • Custom fields: if custom fields have been added to the associated campaign, 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 the overlay Elements and the Sticky Button, these settings let you choose on which exact pages Elements should appear. Find more detailed configuration instructions in the Overlays section.
  • Localization: the labels for all Elements components can be localized. When Localization is enabled in your main settings, a Localization option will be displayed, which shows the translations you can enable for that component. When a second language is enabled, an input will appear that allows you to add customized labels in other languages.

Customization options vary for each component. To view the specific options available for a certain component, create a test version of that component in the Elements tab in the Fundraise Up Dashboard.

Conversion tracking

 
Link copied

You can track the conversion of each Element you create in the Statistics column in the Elements tab view. There are three conversion funnel metrics:

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

Real-time updates

 
Link copied

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. This can take up to a few minutes.

This reduces dependency on your organization’s web developers to make changes to the appearance and behavior of your Elements, and gives marketing and fundraising teams increased flexibility and control over site content.

Adding offline donations

 
Link copied

When creating and editing a Stat Counter or Goal Meter, you will see the option to Add amount. This allows you to add donations that were not made through Fundraise Up towards your total — cash donations made in person, for example. You can also add your offline donations in the Offline section of your campaign settings. Any Stat Counter or Goal Meter Elements linked to that campaign will then also include the donations you added in Offline.

Localization

 
Link copied

Our Elements are fully localizable, allowing your organization to create Elements in your supporters’ preferred languages. You can also fully customize the texts and labels shown in each language. Explore our Localization guide to learn more.

Checkout compatibility

 
Link copied

Some Elements can only be used when particular payment methods are enabled for the campaign associated with that Element:

Fully compatible These Elements can link to a campaign with any payment method(s) enabled. Goal Meter│Stat Counter│Top Locations│Top Supporters│Social Proof│Recent Donations│Donor Map
Fully compatible with exceptions These Elements can link to a campaign with any payment method(s) enabled. However, your chosen Frequency and Default amount will not be displayed if the supporter chooses stock or crypto as their payment method. Donate Link│Donate Button│Sticky Button│Message Bar│QR Code
Compatible with money-based These Elements can only link to a campaign where money-based is enabled as the only payment method, and stock/crypto are not enabled. Fundraisers Button│Fundraisers Link│Top Fundraisers
Compatible with default money-based These Elements can link to a campaign where money-based is the default payment method. Stock and crypto can be enabled as alternative payment methods. Donation Form│Simple Form│Image Card│Impact Slider│Donation Levels│Button Group│Donate Link

 

In this article