Elements is a fundraising UI library created by Fundraise Up. You can use components from the Elements library to create calls to action on your website or in other channels.

Types of components

There are five types of Element:

• 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, Top Locations, Recent Donations, Top Fundraisers
• Overlays: Reminder, Message Bar, Social Proof, Popup

Getting started

If you have access to your website’s code or content management system (CMS), you can experiment with adding any type of Elements component to your website. But if you do not have access to the site’s code or CMS, you can still experiment with some types of components as long as the Fundraise Up installation code has already been added to your website.

Below are the Elements that we recommend adding to your website first.

Overlay components

Required HTML proficiency: Novice

Overlay-style components and Sticky Button are the easiest components to implement because they can be activated on your website from the Fundraise Up Dashboard without modifying page content.

By default, we enable two components in your Fundraise Up account: Reminder and Social Proof. Both Reminder and Social Proof are Overlay-style components, which means that they are displayed at the highest visual layer (z-index) of your website.

The other components we strongly recommend activating on your website are Sticky Button and Popup.

Link components

Required HTML proficiency: Novice

Link-style components include Donate Link, QR Code, and P2P Link. These types of components can be used in environments where the Fundraise Up installation code is not present.

For example, Donate Link components generate trackable URLs that can be included in email campaigns, social media posts, or digital ads. Similarly, the QR Code component can be used to generate a QR code as an image file. The image can then be incorporated into digital and print media. When scanned, the QR code will direct donors to a checkout on your website.

Example URL:

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

Buttons

Required HTML proficiency: Intermediate

Button-style components like Donate Button, are added to your website using a code snippet that is generated within the Fundraise Up Dashboard.

Example code snippet:

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

Adding a Donate Button and other types of components to your website requires a basic knowledge of HTML and CSS, as the code snippets need to be added to the code of your website.

If you have an existing donation button on your website, we recommend replacing it with a Donate Button component from the Elements library. We describe this process in more detail in step 10.

Continue to Step 8: Settings →