Improving Element embeds with CSS

When our Elements load, they go from taking up no space on your page to taking up however much space they are allotted. You can adjust your website to accommodate that for a smoother donor experience!

Making pop-in less disruptive

Websites work on the concept of nesting - a link appears within a paragraph which appears within a section and so on. Every tag can have a set width and height, as well as minimum and maximums of each. 

When our Elements are loaded at full size by our code, they go from taking up no space to some space, which sometimes pushes other things down the page or expands the container they appear in. 

The easiest way to make sure any Element plays nice is to wrap them in a tag that is already as big as the Element will be when it loads in.


How to wrap an Element

So, let's say you go to Elements and you get the HTML for a Donate Button, which gives you HTML code for a link (also known as an <a> tag):

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

In the Element creation screen, there should have been a slider that let you pick the size of the button, height-wise, in pixels, so let's say you chose 50 pixels.

You can use any HTML tag for this method, but I recommend using <div>, which is essentially a generic "block of space" tag, usually used for holding other tags inside it. That <div> should be set so that it is at least as tall as the Donate Button will be once it pops in. Here's an example:

<div style="min-height: 50px;"><a href="#XXXXXXXX" style="display: none"></a></div>

With the above HTML, you're saying:

  • Give me a <div> tag, and use inline CSS to say that it should be at least 45 pixels tall,
  • Inside that <div>, give me an <a> tag that works, and don't display it

So, once our Installation Code javascript finds this <a> tag and loads the Donate Button in at 50 pixels tall like you specified, instead of pushing everything under it 50 pixels down, it just fits perfectly inside the <div> which was already 50 pixels tall. 

Sometimes, you'll also want to append a min-width when a particular Element either has a minimum width, or when it has a width at which it looks best. For example, the Image Card Element has a minimum width of 350 pixels, so any <div> with an Image Card Element inside it should always be at least 350 pixels at all times.


Editing your CSS stylesheet to make this easier

In the above example, we used inline CSS, to say "this particular <div> should be at least 45 pixels tall", which is fine if used once or twice, but can get hard to centrally manage if you have buttons and forms and thermometers on every page!

Your website already has at least one CSS stylesheet for governing what all the HTML on the site actually looks like. As such, you can either add to that stylesheet, or make a new stylesheet just for Fundraise Up-related styling.

CSS allows you to say, "if any HTML tags have this class, apply these styling rules", so, if all of your Donate Buttons are set to be 50 pixels tall, you could say, "all divs with the fruDonateButton class should have a min-height of 50px." 

For the above example, you'd add the following to your CSS sheet:

div.fruDonateButton { min-height: 50px; }

And would make the following adjustment to the initial example of the wrapped Donate Button:

<div class="fruDonateButton"><a href="#XXXXXXXX" style="display: none"></a></div>

That way, if you ever adjusted all of your donate buttons to be 55 pixels tall instead, instead of finding and editing every <div>'s inline styling, you could make a one-line change to the above CSS to call out a min-height of 55px instead!


Some related questions

Why does pop-in happen with Fundraise Up HTML elements?

Adding our HTML-based Elements to your site is a 2 part process: first, your website loads all its HTML to get everything on the screen, and then your website loads our Installation Code javascript to make any of our Elements on your screen functional.

In order to make sure that no donors see the raw HTML version of a button, meter, or any other HTML-based Element, we set all such Elements to be invisible by default, and our Installation Code is what does the hard work of dressing them up and setting them to display. 

Is pop-in always a big deal? Do I need to do this for every Element?

Thankfully, pop-in is largely fine! Most web users have gotten used to interactive parts of websites loading in over time, and tend to wait for the page to load fully to start interacting with them. 

However, web users do tend to dislike the following:

  • when frequently-used parts of the page move, such as any menus in the header or sidebar, 
  • when the page changes substantially in where things are vertically on a page as they may have already started scrolling down to read more.