Hit the “customize” button when creating a rule to land on the popup/banner editor within the app.

Here you will see the editor view of the popup with all the controls (CUSTOMIZABLE ELEMENT) on your left side and the edit window appears on the right side when you click the controls.

You can select a popup or banner to display as required.

On the left menu bar, you will see many fields like Container, Header, Body, Footer, Redirect Button, etc. 

Just go to the field you need to edit and customize your popup/banner.

Check out this quick explainer video to understand the editor


Quick run on the editor’s important features and settings:

Create from Scratch: This allows you to create any popup/banner from scratch as per the requirement.

Color Picker:  If you add color with hex code, with name, with RGB code, and with HSL code, these all are converted in RGBA code while clicking outside the color picker box.

Dynamic Keywords: All keys can be added to any message block like header, message, redirection, and cancel.

Dynamic Flag:  Flags can be added to any message block like header, message, redirection, and cancel.

Logo Images:  Logo/images will be displayed after enabling the toggle button. Only add CDN link for display logo/images.

Images: For Backdrop and Container have presented an image block that will work after adding the CDN link. If we add the CDN link then the background color will not work.

Button Layout:  Placement of a Redirection and a Cancel button will work on the display viewport. If you have clicked on the mobile view button in the editor, the button placement will change as per the text length, but if the text’s length is small, the placement of the button is vertical.

Custom CSS:  If someone adds CSS to a custom CSS block, the custom CSS priority is higher than the editor. So, custom CSS overrides the editor element, and the editor does not work after adding custom CSS.


If you face any difficulty please contact us at help@spicegems.com