Step 7: Elements

In this step, you will learn about Elements and add a few components to your organization’s website.

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

To implement Elements on your website, you first need to add the Fundraise Up installation code, which is covered in step 2 of this onboarding guide.

Types of Elements

There are six 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. If you don’t 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 Elements

Required HTML skills: novice

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

By default, we enable two Elements in your Fundraise Up account: the Reminder and Social Proof. Both Reminder and Social Proof are overlay-style Elements, 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 the Sticky Button and the Popup.

Link Elements

Required HTML skills: novice

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

For example, Donate Links generate trackable URLs that can be included in email campaigns, social media posts, or digital ads. Similarly, the QR Code Element 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 modal on your website, or a Campaign Page.

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

An example of a Donate Link, which leads to a Checkout modal.

Buttons

Required HTML skills: intermediate

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

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

An example code snippet for a button element.

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. This process will be described in more detail in step 10.

Continue to Step 8: Settings →

In this article