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, such as buttons, inputs, and sliders, that can be easily implemented on your organization’s website.
Using Elements on your website engages donors as they browse your site content, and increases conversion. For Elements such as Recent Donations and Goal Meter, donations usually appear after around 30 seconds (though this can take up to 1 minute), allowing donors to monitor your campaign’s progress in near-real-time.
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.
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, Top Elements
- Overlays: Reminder, Message Bar, Social Proof, Popup
To create any of these elements, go to the Elements tab in your Fundraise Up Dashboard and click New Element.
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. 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 thereafter.
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 component.
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 channels, like direct mail packages.
An example: 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.
Elements components 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.
There are five common configuration areas for Elements components:
- Behavior: These settings dictate which Campaign the component is associated with, and how the selected Campaign’s Checkout should appear when it’s launched from a component. You can use Match checkout settings in these instances if you want to keep the same settings as in that Campaign’s Checkout. 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 components to match the appearance of your existing website.
- Custom fields: If custom fields have been added to a selected Campaign’s Checkout (by going to Campaigns → campaign name → Settings → Custom fields), 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.
You can track the conversion of each Element you create in the Statistics column in the Elements tab. 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/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.
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, which 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 the flexibility and control over site content.
Our Elements are fully localizable, allowing your organization to create Elements in your donors’ preferred languages. You can also fully customize the texts and labels shown in each language. Explore our Localization guide to learn more.
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 Checkout 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 Checkout with any payment method(s) enabled. However, your chosen Frequency and Default Amount will not be displayed if the donor 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 Checkout where money-based is enabled as the payment method, and stock/crypto are not enabled.||P2P Button│P2P Link│Top Fundraisers|
|Compatible with default money-based||These Elements can link to a Campaign Checkout 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|