Elements

Elements reduce the technical work needed to add donation features to your website while giving you full control over how these features work.

Your marketing and fundraising teams can modify Elements through the Dashboard without help from web developers. The Dashboard serves as a control center for all your Elements. When you update campaign settings, every Element tied to that campaign changes automatically. This means you can modify the behavior of donation buttons and forms across your entire website from one place.

For example, if you placed the same Donate Link in 15 different locations, you don’t need to update each link separately when campaign details change. Instead, adjust the settings once in the Dashboard to update all instances of that Element. Changes appear within 1-2 minutes.

Go to the Elements tab in your Dashboard to view, add, or manage Elements.

Elements tab in Dashboard

Use the filters to narrow the list:

• Account – Visible only for main accounts, not subaccounts. Use this filter to find Elements used in specific subaccounts. To select multiple subaccounts, hover over a name and check the box.
• Campaign – Filter Elements by Campaign. Select multiple campaigns the same way as accounts.
• Type – Filter by Element type. See all options in the Elements catalog.

Most Elements integrate directly into your website’s pages. These website Elements display as part of your page content, like buttons in your navigation menu or forms on your donation pages.

Each Element requires configuration in the Dashboard, where you’ll also get the code snippet to add to your website.

To add an Element:

1. Open your Fundraise Up Dashboard.
2. Go to the Elements tab.
3. Click New element.
4. Choose the type of Element you want to create.
5. Select the campaign from the Open campaign dropdown menu. This step is required to link your Element to a campaign.
   The Reminder is the only Element that can’t be linked to a specific campaign. It always directs the supporter back to the campaign where they left their donation unfinished.
6. Configure the Element’s settings. For details, see to the “How to customize Elements” section of this article.
7. Click Create an element.
8. Copy the HTML code from the pop-up window.
   

   Pop-up window with ready to copy Element code

9. Add this HTML code as-is to your website where you want the Element to appear.

Here’s an example: this code snippet, when added to your website using a CMS or code editor, will render a Donate Button.

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

Sticky Button and all Overlay Elements (Message Bar, Popup, Reminder, and Social Proof) work differently. These appear over your website content instead of within it. For these Elements, you only need to set their display rules in the Dashboard — no code snippets are needed (skip steps 8 and 9 from the instruction above).

For Message Bar and Popup Elements, you can control when they appear using scheduling tools in the Behavior section:

• Show from date: The Element will start displaying at midnight in your organization’s time zone.
• Hide after date: The Element will stop displaying at 11:59 PM in your organization’s time zone.

Link Elements also don’t require adding HTML code to your website:

• Donate Link generates a URL for your campaign that you can share immediately.
• Fundraisers Link creates a URL to help supporters start fundraisers, which you can distribute as needed.
• QR Code provides a downloadable image that links to your campaign. You can use this as-is for emails, social media, or printed materials, or optionally copy the HTML code to embed it on your site. When embedded, the QR code becomes clickable and directs supporters to the checkout form.

This example URL is generated using the Donate Link Element. It can be used in email campaigns and other places where the Fundraise Up installation code has not been added:

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

There might be scenarios on your website where several non-embed Elements are active at the same time. To prevent visual conflicts and maintain a clean layout, the system automatically applies display rules and priority logic.

If your organization creates more than one Element of the same type — for example, two Sticky Buttons or two Social Proof Elements — only one of them will be displayed. The system uses the following rule:

• The most recently edited Element takes priority.

This means if you have two Social Proof Elements linked to the campaign, the one you modified most recently in the Dashboard will appear. The same rule applies to any other non-embed Element.

If you want a particular Element to take priority and display on your page, find that Element in the Dashboard, click it, and then click the Save changes button. No edits are needed — saving the Element will make it the most recently saved and therefore the one that is displayed.

When multiple types of non-embed Elements are active on the same page — for example, a Sticky Button and a Popup — the system follows a priority model based on how those Elements behave. This helps avoid overlap and layout issues.

The rules below describe how the system handles different combinations and what happens when Elements conflict or intersect on screen.

Elements are grouped into categories based on how they appear on your website:

• When Elements from different priority levels conflict

  The Element with the higher priority level displays, and the lower priority Element temporarily hides. For example, if a Popup (priority level 1) is active, all other Elements (levels 2-4) will pause or hide until the Popup closes.

• When a Popup is active

  Elements already visible on the page remain displayed, but no new Elements will appear until the Popup closes. After you close the Popup, Elements resume appearing normally.

• When Message Bar displays

  Other Elements automatically move up or down on the screen to avoid overlapping with the Message Bar. For example, if you have both a Message Bar and a Social Proof Element positioned at the bottom of the page, the Social Proof will move to avoid covering the Message Bar.

• When Elements from the same priority level conflict

  Within Floating Elements, Reminder has higher priority than Social Proof. Within Fixed Elements, Floating Button has higher priority than Sticky Button. If a Reminder and Social Proof Element would appear in the same screen position, only the Reminder displays.

On mobile devices, screen space is limited, so Elements positioned at the bottom of the screen are all considered overlapping. The same applies to top-positioned Elements. In these cases, the priority rules determine which Element displays while others temporarily hide.

If both the Campaign Page and the Checkout Modal are enabled for a campaign, Elements linked to that campaign will open in either of the two formats based on the following rules:

If you want an element to open specifically the Campaign Page, ensure that only the Campaign Page format is enabled for the campaign (do not enable the Checkout Modal).

This rule also applies to the Donate Link and QR Code: to have supporters open only the Campaign Page or only the Checkout Modal, your campaign must be configured with just one of these formats enabled.

When you create a new Element, you can configure its behavior, appearance, and other characteristics. To modify these configurations at any time, access the Element from the Elements tab. Changes in the Dashboard apply to all deployed Elements automatically. No code updates needed.

Most of the Elements offer five core configuration areas:

• Behavior: Control which campaign connects to your Element and how the checkout form appears when launched. Select Match campaign settings to maintain consistency with your campaign’s existing configuration. Available settings vary by Element type.
• Appearance: Customize sizing, colors, and borders to match your website design.
• Custom fields: If custom fields are added to the associated campaign, they appear as customization options for Elements. This lets you set specific field values for multiple Elements using the same campaign.
• URL control and Visibility: Determine which pages display your Elements. This setting applies only to Overlay Elements and the Sticky Button.
• Localization: Add translations for Element labels when you enable Localization in your main settings. Enabling additional languages creates input fields for custom labels in those languages.

Donate Button configuration screen

To explore specific options for any component, create a test version in the Elements tab in the Dashboard.

For Elements that support designations, you can select a specific designation to apply to all donations. To make it unchangeable by supporters, uncheck the Allow supporter to change designation checkbox when creating the Element in the Dashboard. This is useful when the Element is tied to a specific fundraising goal or program.

In addition to this built-in option, you can also define the designation directly in the Element’s embed code. This is helpful if you want to reuse the same Element across multiple pages and still track donations to different designations — without having to create multiple Elements in the Dashboard.

To do this, add a designationId parameter to the Element’s embed code:

1<a href="#XTGWFZFR?designationId=EPCXKYC4" style="display: none"></a>

To find the correct ID, go to the Designations tab in the Dashboard. All designation IDs start with an E and follow this format: EXXXXXXX.

When this code is embedded on your site, the checkout form will use the specified designation — even if the Element has a different designation set in the Dashboard.

If the designation ID passed in the embed code is invalid or missing, the Element will use default designation setting from the Dashboard.

Understanding which Elements work best for your audience can significantly impact your fundraising success. Testing different Elements helps you make informed decisions about your donation page design and supporter engagement strategy.

Compare how different Elements perform by placing multiple Elements on your page. This helps you:

• Identify which Elements generate more donations.
• Understand your supporters’ preferences.
• Optimize donation conversion rates.
• Make decisions about Element placement.

Understanding how your Elements perform helps optimize your fundraising strategy. By monitoring conversion metrics, you can identify which Elements resonate with your supporters and adjust your approach accordingly.

Monitor Element performance in the Statistics column of the Elements tab of your Dashboard. The conversion funnel shows three numbers:

1. Element views: Number of website visitors who saw the Element on their screen.
2. Checkout views: Number of visitors who interacted with the Element and viewed its associated Checkout Modal or Campaign Page.
3. Donations: Number of donations that originated from Element interactions. For Fundraisers, the metric shows the number of Fundraisers created instead of donations made.

Many organizations receive donations through multiple channels, including cash, checks, and other offline methods. To maintain accurate fundraising totals across all your Elements, you can include these offline donations in your tracking.

Stat Counter and Goal Meter Elements include an Add amount option. This lets you include donations made outside Fundraise Up in your total, such as cash donations received in person. You can also add offline donations in the Offline section of your campaign settings.

All Stat Counter and Goal Meter Elements linked to that campaign will include these offline amounts.

Email campaigns play a crucial role in fundraising, and you can enhance them with certain Fundraise Up Elements. Due to email platform limitations, only specific Elements work in emails. These Elements are explained below.

Direct supporters to your checkout or Fundraiser setup form:

1. Create a Donate Link or a Fundraisers Link in your Dashboard.
2. Copy the generated URL.
3. Use the URL in your email as:
   • Regular link.
   • Button link.
   • Linked image.

Add scannable codes to your email campaigns:

1. Create a QR Code Element in your Dashboard.
2. Download the QR code image.
3. Upload it to your email platform.
4. Add the image to your email template.

Different Elements have specific compatibility requirements with campaign payment methods. Here’s how they work:

This table shows Element compatibility based on campaign payment settings. Make sure your campaign’s payment methods match these requirements before creating Elements.

Start putting Elements to work for your fundraising by following these steps:

• Explore the Elements catalog to understand how each Element works and how it can support your campaign.
• Create your first Element by going to Elements > New element. If you’re new to Fundraise Up, start with a Donate Button — it's the most common way to begin collecting donations. If you already have a Donate Button, try adding a Goal Meter or Recent Donations to show your supporters the impact of their giving.
• Test your new Element thoroughly in the Dashboard. Make a test donation to ensure the checkout process works as expected and verify all settings are correct.
• Add the Element to your fundraising. For website Elements like the Donate Button or Goal Meter, work with your web team to place the code in a prominent location. For Elements like Donate Links, QR Codes, or any Overlay Elements, you can start using them right away.
• Review your Element’s performance after a few days in the Dashboard. Check the Statistics column on the Elements page to see how many supporters interact with it.

Need help adding Elements to your CMS? Use these platform-specific guides:

• Add Elements to Google Pages →
• Add Elements to HubSpot →
• Add Elements to Squarespace →