Swapping new Elements into place

With the advent of the new Elements tab, your new buttons & forms will be more powerful + admin-friendly. Here's how to get your new Elements in and your prior ones out!

 

Our new Elements allow you to update any Element in real time without having to replace the Element’s code snippet on your website. Our prior Elements didn't; they declared what type and style of button or form or meter should show up. So, in order to make use of our new Elements, you'll want to find where you added the prior Elements, and replace them with new ones that'll give you more flexibility! To do so:


Find out how a prior Element was added

With modern web editors, there's a number of different ways to add content to your navigation, global areas like your header/sidebar/footer, or body pages such as a donate page or about page. 

So, when looking for how you added one of our Elements, it's often good to start by asking yourself whether it's in your top menu, in another global content area, or on a standalone body page. Once you know that, you'll likely know what editor was used!

In the editor itself, the way you'll truly know if one of our prior Elements is in place is if you find HTML code that looks like this:

<a href="#FUNTVGZDXMS&type=button&align=center&color=2077d4&size=45&amount=40&modifyAmount=no" style="display: none">$40 to give 4 books</a>

The key here is that our new Elements don't have a bunch of identifying info about what Element they're going to become when drawn on your website, because you can manage that centrally from your Fundraise Up dashboard.

So, if you see code like the above, specifically anything that includes "type=", that's from our prior Elements tool. 

 


Make a new Element from the Elements tab

Now that you know where the new HTML code should go, you have to get that code. We offer an Element creator that's friendly, quick, and more powerful.

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. For embeddable Elements, that'll take you to a page where you can copy the HTML code for the new Element. 

If you're replacing several similar Elements at once, you can click the three-dot menu in an existing Element's row, and choose the Clone option to speed things up!

In this case, it makes sense to make your new Element a little different visually from your prior one. That way, you can confirm the new Element was swapped into place correctly because it'll look different!

Sticky Buttons are a little different now - they were called by HTML code in the past version of Elements, but they are inserted globally on any pages they should appear in the updated version. To swap in a Sticky Button, you don't need to add new HTML code to insert the button, you just need to remove the prior HTML code that inserted it.

 


Replace the prior HTML with the new code

In your website editor area that you found, select the HTML code for our prior Element and delete it. Make sure to get the closing tag (the bit that looks like </a> at the end).

Then, paste in the HTML code you copied from the Fundraise Up Element you made, and save/publish your changes. 

We recommend, when confirming that any website change was made, to  either open your website in an incognito window or to open it after clearing your cache and cookies. Your browser caches info to save time on page reloads, but that can get you in trouble when you want to see changes you've made in real time!

Now that you've got your new Elements in place, if you ever need to make changes to them, you won't have to do the above steps. For future changes to our new Elements, you can:

  • go to the Elements tab,
  • click on the Element by name,
  • make your changes,
  • and click the Save Changes button at the bottom.
Your changes will be reflected as of the next time your page is loaded!