popupsreusable

Popups Reusable Overview

There are a few standard popups that we put into a reusable element so you can trigger them as needed rather than creating many copies.

The reusable element popupresuable contains the sign up / login popup, loader popup, and message popup. You can trigger custom workflows from the header (which contains the popupsreusable element) to show certain popups. Or if the page the you're building does not have a header, please add the popupsreusable element to the page so you can trigger custom workflows from that element.

Signup / login popup

There is a signup/login reusable element which is used across the app (login page, homepageblocks, popupsreusable). For more information, click here.

Message popup

With the message popup, you can display a simple message (e.g., “Your account is pending, and will become active once approved”) and make the user click “OK”.

• The message popup (no esc) contains a popup title text, body message, and a button.

• You can pass a string of text for the content of the popup by triggering a custom workflow from a reusable element (header or popupsreusable):

  • The custom workflow "show message popup (no esc)" is of type text

  • Simply pass a text string in this format:

    • This is a title{This is the body message}This is the close button text

      • Any text before { is the title of the popup

      • Any text between { } is the body text of the popup

      • Any text after } is the button text of the popup

Loader popup

With the loader popup, you can display a loading icon over the whole page for some time (to avoid a bad/choppy experience)

This should be used sparingly in cases of very complicated and slow pages.

• The loader popup contains the standard full page HTML loader popup

• You can trigger the loader popup by triggering a custom workflow called "show loader popup" from a reusable element (header or popupsreusable)

• On the page that you are displaying the loader popup, add the following workflow:

  • Do when condition is true and only when page loaded (entire) is "yes", trigger custom workflow "close loader popup" from reusable element