Using Elements to drive Campaigns

Once you have Campaigns, you'll be able to use Elements to gather contributions and increase engagement. 

Every Campaign can be shown and engaged with using Elements, which offer you a variety of tools to surface and drive your campaigns. We offer intuitive in-app guidance to help you optimize each Element for your needs.


Adding and Updating Elements

The below instructions apply to our new Elements features - if you need assistance replacing your existing Elements with ones created from the new Elements tab, please review our Swapping new Elements into place article. 

Make a new Element from the Elements tab

To make or manage a new Element, click the Elements tab in your Fundraise Up dashboard's top menu. 

Once there, you'll see a button in the header labeled New Element, a list of all the new Elements you've made, and a button to show you Archived Elements if you need to review ones you've turned off. 

When you click New Element, it'll pop up a dropdown with optional search, so you can either scroll to the type of Element you want to make from the list, or search for it by name to filter down the available options.

Every Element gives you options for behavior, styling, and more, so take a second to set it up the way you want, and then click Create Element.

Making changes to existing Elements

Once an Element has been created, it'll appear in the list of Elements on the Elements tab. Clicking the row for that Element will take you to its edit page, where you can make changes and hit Save Changes button to finalize them. The next time that Element is loaded, it'll show your changes!

Cloning Elements

If you need to make a new Element that's largely the same as an existing one, you can click the three-dot menu in that Element's row, and choose the Clone option. This will pop up a dialog where you can edit the name of the new Element, after which it'll let you click through to its edit pane to make further changes and copy any new code needed. 

Archiving and removing Elements

To stop an Element from showing up or functioning, go to the Element's edit page, and click the Archive Element button. Alternately, you can click the three-dot menu in that Element's row, and choose the Archive option.

If the Element was embedded via HTML code, and you want to clean up any trace of the archived Element, you may also want to go to the part of your website where you added the HTML code for that Element and remove it. 


Types of Elements

Elements, after creation, can either be used by:

  • embedding the provided HTML code into some part of your website
  • pasting the provided web address into some external communication
  • globally setting which pages it should appear on

Embeddable Elements

The most powerful way to drive donations to your campaigns is to put calls-to-action and showcases of your progress right where your donors already are: on your website!

You add these to your website by copy-pasting the HTML code we provide you into the area of the website where you'd like them to appear.

The following Elements will give you HTML code, ready to be put wherever you need it:

  • Prompts to make a donation:
    • Donate Button
    • Donation Form
    • Simple Form
    • Image Card
    • Impact Slider
    • Button Group
  • Prompts to start a P2P Fundraiser:
    • P2P Button Element
  • Showcases of your progress:
    • Goal Meter
    • Stat Counter
    • Top Fundraisers

    Once the HTML code for an Element is in place, the Fundraise Up installation code finds it in the page and styles it as you specified. 


    Embeddable Elements are subject to the CSS styling rules of wherever you insert their code.  

    Styling on your website can be applied two ways: inline, or by stylesheets. Adding styling inline to specific HTML tags is quicker, adding styling to your CSS stylesheet is more sustainable long-term. Here's an example to illustrate the difference:


    • HTML: <p style="text-align: center;">ELEMENT CODE GOES HERE</p>


    • HTML: <p class="funbutton">ELEMENT CODE GOES HERE</p>
    • CSS Stylesheet: p.funbutton { text-align: center; }

    Direct links

    Your donors don't just live on websites - they go on social media, read emails, and find information out in the world.

    When they find you in those places, you don't want to lose a second; instead of sending them to your homepage, use one of these links to send them directly to the donation form with an appropriate donation amount pre-populated.

    The following Elements will give you direct links, ready for your marketing efforts:

    • Text Link

    These can also be used on your main website - if a Text Link Element detects that you're launching it from a page on the same domain as the URL in its settings, it'll just open checkout right there instead of redirecting and then launching checkout!

    Global content

    Some Elements are modal - they are meant to be fixed "above" the page, appearing like notifications, calls to action, or informational displays.

    Our Installation Code, when it runs, draws these on any page they are allowed to appear, and control of that is in your hands. 

    The following Elements will show or not show automatically on pages running your installation code, as per the URL Control settings on the Element itself:

    • Sticky Button
    • Reminder

    URL Control

    When editing one of these Elements, you'll see a tab called URL Control - click that to be taken to be given two options:

    • Show on these URLs only: Allows you to specify which pages this element would appear on. Keep in mind if you enter URLs here the element will only show on those pages.
    • Never show on these URLs: Allows you to hide the element on specific pages where you may not want to distract the donor.


    Some browsers like to shorten web addresses by removing the "www." (aka the subdomain), but if you click in the address bar and copy from there, you should be able to get the full address that you'll need to use in either of these URL Control fields.


    For both URL Control options, you can use the asterisk as a wildcard to say, "every possible thing from here on, apply to". So, for example, if I want a Sticky Button to only show on my Foundation pages, I could put this in "Show on these URLs only":*

    In that example, that Sticky Button would show on any page that starts with

    Specific Page Formatting

    URL Control also expects a slash at the end of any specific page. For example, if you want the Sticky Button to never appear on your home page (, I would put this in "Never show on these URLs":