> For the complete documentation index, see [llms.txt](https://docs.airdev.co/social-network-template/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/social-network-template/assets/reusables/popupsreusable.md).

# 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](/social-network-template/assets/reusables/signup-login.md).

![](https://3252195253-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La2JFb_HHpm-nbVNHOC%2F-LaHVnxKZVc1gSnlhIq5%2F-LaHW9VR3dscUt43PZug%2Fassets_-LYJWnUT3lUFQk1K9BCK_-L_o-KzLmcDA6wNXm22S_-L_o1oYx5k2H5fckfEr3_Screen%20Shot%202019-03-12%20at%203.34.40%20PM.png?alt=media\&token=257071e9-b19e-4739-b204-0222e2f6f7e9)

### 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”.

![](https://3252195253-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La2JFb_HHpm-nbVNHOC%2F-LaHVnxKZVc1gSnlhIq5%2F-LaHWCI3UODjZaHRDHXs%2Fassets_-LYJWnUT3lUFQk1K9BCK_-L_o1yMIk8NIb9w_TMx2_-L_o2Ez-v1AR0tpGuGa7_Screen%20Shot%202019-03-12%20at%203.36.22%20PM.png?alt=media\&token=d2beff02-6a7b-4951-8ca0-a29ee81e46eb)

* 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) 

{% hint style="warning" %}
This should be used sparingly in cases of very complicated and slow pages.
{% endhint %}

![](https://3252195253-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La2JFb_HHpm-nbVNHOC%2F-LaHVnxKZVc1gSnlhIq5%2F-LaHWFHcfDhJCUq6Eh6N%2Fassets_-LYJWnUT3lUFQk1K9BCK_-L_o2S36QFA4y05IN5ND_-L_o2dUZ2VrTavuVMCAz_Screen%20Shot%202019-03-12%20at%203.38.14%20PM.png?alt=media\&token=c6c0d5d4-c1f2-4b0e-ac19-cae87dd71b27)

* 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](/social-network-template/assets/reusables/header.md) 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