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.

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.
   

   Elements tab in Dashboard

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.
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).

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

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.

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 →