Step 7: Elements
In this step, you will learn about Elements and add a few components to your organization’s website.
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
Below are the Elements that we recommend adding to your website first.
Overlay Elements
Required HTML skills: novice
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
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/-/XWZBZUBB
An example of a Donate Link, which leads to a Checkout modal.
Required HTML skills: intermediate
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 →