How to create popup template

A popup template is a modal window that appears on a screen. The key way it helps is by allowing you to quickly and easily create focused, attention-grabbing messages. By using a template, you can customise the appearance, content, and layout to:

• Boost engagement by directly asking a user for information (like an email).
• Highlight critical information or offers that the user might otherwise miss.
• Save time on design and development, letting you deploy a professional-looking message quickly.

1. How to build a new Popup template from scratch with EComposer?

2. How to build a new Popup template by using the EComposer design?

3. Settings for the Popup template?

Popup trigger

Note: When you select trigger click, then all conditions ‘Show on’ will be disabled. And popup will only show when you select action click on button or form.

• Popup shows when: You can choose to use either Time delay, Scroll, Button Click/Form Click.
  • Time delay: Allow you to set the time to display the popup.
  • Scroll: Scroll down to see the popup; you can also adjust how far down to scroll.
  • Button Click/Form Click: Show the popup when you click a button from another page.
• Time cookie expires: You can choose a time to show the popup again, such as always, an hour, or a day later.
• Show on: You can choose to use either All pages or Custom pages.
  • All pages: The popup will appear for all.
  • Custom Pages: You can select which pages to utilise, such as Pages, Products, such as Articles, and which product to display.
• Devices: It will let you choose the device to show the popup. Such as Desktop, Tablet, and Mobile.
• All users: You can choose to show the pop for the people you want. It could be for all, or for your guest or customer only
• All languages/All countries: It will let you choose the language/country that you want to display the popup in, or you can choose All normally.
• Popup animation to show: This will let you choose the animation effect, such as Fade or another, when displaying the popup. Following the animation duration of the effect could be set.
• Popup priority: It will let you set the priority when you have another popup template displaying.

Note:For popups with same triggers: lower number means higher priority

Popup design

• Popup position: It will enable you to adjust the position to the Center, Top left, Top right, etc.
• Design settings: This will allow you to adjust Width, Max width, Height, Max height, Background, Overlay color, Blur, and other fundamental design parameters.

Popup overflow

• Overflow: Options like Hidden, Scroll, and Auto are available in this configuration. When the content in the popup template is longer than the popup height, you can use the Scroll or Auto option to view it via scrolling. However, you can try Hidden to lock the overflow to scroll if you don’t want to use any like.
• Design settings: Selecting the Scroll or Auto option above will display the Size scrollbar. It will then allow you to customise the scroll bar’s size, color, and border radius.

Close button

• Close icon: You have the option to use the library’s close icon or upload your own.
• Design settings: The close icon’s location can be changed to the Top, Right, Left, or Bottom. and that will also allow you to change the icon’s Width, Height, Color, and other basic options.

4. How to delete a Popup template?

Go to App dashboard > Template > Popup > Click on the three dots > Remove button.