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 that 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).

This popup can be used to display a popup on the page. Note that you can trigger a workflow to show this element from the header reusable element. From a page, you can trigger either of the following actions via the header's custom workflows: show login popup or show signup popup .

When using this popup, users will be able to login and signup from any page that contains the header without having to be redirected to the login or index page. There are a couple of caveats to this, though:

1. If users sign up and need to verify their email, they'll be redirected to the "verify" page. However, if a user logs in to a page and that page needs verification (but the user hasn't verified his email yet) then the user will not be able to access that page.

For more information about the signup/login reusable, click here.

The below popups require some setup to be used in this reusable.

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