Popups

Popups force your user to respond to a prompt before continuing to use the configurator. Used sparingly, popups can ensure that an important decision is confirmed by your user.

Popup Properties 

Property	Description
Name	The name of the UI element.
Width	(Number) The width of the popup. If the screen size allows it, it will fill out to this max value.
Enable Close	(Boolean, default false) False: no "X" close button appears in the popup. Close the popup by Triggering a rule running the "Close popup" Snap block. True: an “X” close button is displayed in the upper right corner of the popup. Close the popup by Triggering a rule running the "Close popup" Snap block. Clicking this "X" close button. Clicking anywhere outside the popup. Usually, the "Close popup" Snap block is within a button rule for all buttons inside the popup.

Creating a Popup

1. Consider what information you want the popup to gather or confirm.

   • For a simple "I agree" confirmation popup, you may be simply displaying information you want the user to formally acknowledge.

   • For a more complex "sign-up for 10% off" popup, you may be gathering information like name and email.
     
2. Create the popup.
   To add a popup to your configurator, select the Overlay Popups category in the design tree and click on the '+' button. The popup layout that appears is similar to the existing container layout: it has a design tree which can contain text, buttons, and other elements. Add necessary UI elements like text elements or fields. Usually, your popup will set information to at least one field, and have at least one button.
3. Ensure the popup has a closer.
   Popups block all other interactions until they are closed. Ensure either of these events:
   1. The "Close popup" Snap block is run. For example, an "I agree" confirmation popup displaying "Cancel" and "I Agree" buttons would have this Snap block in the rules for both buttons, or the popup will not close.
   2. The popup property "Enable Close" is true, so the user can escape the popup by clicking a close button or anywhere outside the popup.
4. Ensure the configurator opens the popup.
   Find events that would trigger the popup, and add the "Open popup" Snap block to that event's rule as necessary.
   

Popup Best Practices

1. Consider logging the popup.
   Even if the popup stores no new data at all, consider logging the fact that the popup was displayed or agreed to. In the "I agree" scenario above, a text field "f_agree_log" that will be populated with the date and time and user who most recently clicked the confirmation button in the popup. For fields like this which are stored but not displayed to the user, you can place the field on a hidden administrative page.