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.
Types of Elements
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, 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 Fundraisers 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 supporters to a Checkout modal on your website, or a Campaign Page.
1https://donate.ropsi.org/-/XWZBZUBBAn example of a Donate Link, which leads to a Checkout modal.
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 →