Elements
UI kit specifically developed for digital fundraising.
A UI kit developed specifically for digital fundraising.
Found an error? Missing topic? Difficult to understand? Let us know
What is Elements?
Elements is a fundraising-specific UI kit developed by Givetly. It includes over 20 components like buttons, inputs, and sliders that can be easily implemented on your organization’s website. By using Elements, you engage supporters as they browse your site, increasing conversion rates. Donations typically appear on Elements like Recent Donations and Goal Meter in about 30 seconds, allowing supporters to view campaign progress nearly in real-time.
Elements are created and managed from the Elements tab in the Givetly Dashboard and are associated with your campaigns.
Types of Components
Here are the six types of Elements:
- 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, Recent Donations, Top Fundraisers, Top Locations
- Overlays: Reminder, Message Bar, Social Proof, Popup
To create these components, navigate to the Elements section in the Dashboard and click New Element.
Opening Behavior
Elements connected to a campaign may open either the Campaign Page or Checkout modal as per these guidelines:
| Element | Opens |
|---|---|
| Donate Button, Donation Form, Sticky Button, Image Card, Message Bar, Popup, Impact Slider… | Checkout modal |
| Donate Link, QR Code | Campaign Page (see exceptions) |
| Any Element that’s opening a Fundraiser | Checkout modal |
Installation
We recommend using Elements after the Givetly installation code has been added to your website. Overlay components like Reminder and Popup can be used without extra setup, appearing on specific URLs at the highest visual layer of your site.
Once an Element’s code snippet is on your website, changes in the Dashboard are reflected without modifying the snippet.
No-code Elements
Some Elements do not require Givetly’s installation code:
- Donate Link
- Fundraisers Link
- QR Code
Create these in the dashboard for tracked links usable in campaigns or as a downloadable PNG for offline channels.
Customization
Customize Elements in the Elements tab of the Givetly Dashboard. Adjust behavior, appearance, and other characteristics.
Edits made in the Dashboard apply to all deployed Elements, no code snippet updates required.
Conversion Tracking
Track conversion for each Element in the Statistics column:
- Component views: Number of visitors viewing the component
- Checkout views: Visitors interacting with the component and viewing the Checkout modal or Campaign Page
- Donations: Visitors who donated after interacting with the Element
Real-time Updates
Element changes in the Dashboard automatically update on your website, reducing dependence on web developers.
Adding Offline Donations
Add offline donations in the Stat Counter or Goal Meter, or in the Offline section of your campaign settings.
Localization
Elements can be localized, allowing customization of text in supporters’ preferred languages. Check our Localization guide for more info.
Checkout Compatibility
Element compatibility depends on campaign payment method settings:
| Category | Compatibility |
|---|---|
| Fully compatible | Any payment methods |
| Fully compatible with exceptions | Any payment methods, but stock/crypto omits chosen Frequency and Default amount |
| Compatible with money-based | Only money-based payment; no stock/crypto |
| Compatible with default money-based | Money-based default with stock/crypto as alternative payment methods |