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 list of all available Elements with a search bar and filter buttons, so you can either scroll to the exact Element you want to make from the list, search for it by name to filter by type, or use the handy buttons to filter by category.

Clicking on a type of Element will open a new screen where you can set your new Element's behavior, styling, and more, so take a second to set it up the way you want, and then click Create Element. You'll be able to come back and edit it more if needed!

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 embeddable Elements to specific parts of your website by copy-pasting the HTML code we provide you into the editors for 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, that embed:

  • Prompts to make a donation:
    • Donate Button
    • Donation Form
    • Simple Form
    • Image Card
    • Impact Slider
    • Donation Levels
    • Button Group
    • QR Code
    • Top Fundraisers
      • Top Fundraisers now allows clicking on any person to give to their Fundraiser directly
  • Prompts to start a P2P Fundraiser:
    • P2P Button Element
  • Showcases of your progress:
    • Goal Meter
    • Stat Counter
    • Top Supporters
    • Top Fundraisers
    • Recent Donations

      Once the HTML for a specific Element is in place, every time someone visits a page with that HTML in place, the Fundraise Up installation code finds it in the page and styles it as you specified. 

      Any Elements that showcase progress (goal meter, stat counter, top fundraisers/supporters) now refresh within your webpages once a minute and when the visitor makes a donation. We were inspired by the layouts you'd put together for live and pre-recorded events using Elements, and wanted to make those even more dynamic to encourage event visitors to keep giving!


      Context

      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:

      Inline

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

      Stylesheet

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

      For more info on best practices, please refer to this walkthrough and explainer on Improving Element embeds with CSS. If you have further questions, our Success Engineers and Support team can offer further guidance.

       


      Direct links

      Your supporters don't just go to websites without a reason - they go on social media, read emails, and find their reasons 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 and making them hunt around for the right button, use one of these links to send them directly to your website with the form they need already open.

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

      • Donate Link
      • P2P Link

      These can also be used on your main website - if a Donate Link Element detects that you're using its link from a page on the same domain as the URL in its settings, it'll just open checkout on the page you're already on!

      Please be aware that link elements use redirects - any visitor not already on your domain who goes to the link URL is then passed through to the destination URL saved on that Element. As such, they may not be appropriate for use with any platform that prohibit redirects such as Google Ads.

       


      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
      • Social Proof
      • Message Bar


      URL Control/Visibility

      When editing the Reminder or Social Proof 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.

      On the Sticky Button and Message Bar Elements, the tab will be called Visibility - it will have the above options, and an additional option to limit which browsers (desktop vs mobile) can see your Element.

      At the moment, these have limited function on websites that are Single Page Applications; direct visits to URLs will result in appropriate behavior, but visitors that click around a Single Page Application website will retain the function of the URL they originally landed on until they actually refresh the page.

      A remedy to this may be coming by the end of 2021, so stay tuned!


      Domain

      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.

      Wildcards

      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":

      https://www.example.org/foundation/*

      In that example, that Sticky Button would show on any page that starts with https://www.example.org/foundation/


      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 (www.example.org), I would put this in "Never show on these URLs":

      https://www.example.org/