> For the complete documentation index, see [llms.txt](https://appsetup-eng.gitbook.io/appsetup-popups/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appsetup-eng.gitbook.io/appsetup-popups/getting-started/popups-page.md).

# Popups Page

## **Overview of the Popup Page**

After installation, you land on the Popup Library page, where every popup you’ve created is listed along with key performance metrics such as impressions and subscriber counts. Each popup card displays details like its name, creation date, last edited timestamp, and current status (active, inactive, or scheduled). From here, you can quickly toggle a popup’s active state or open it for customization.

## **Creating a New Popup**

At the top of the page, there’s a **Create Popup** button. Clicking this opens a modal window displaying a grid of predesigned popup styles (with preview images) so you can choose one that best matches your brand. Once you select a style and click the “Create Popup” button, a new popup is generated with style-specific default settings.

***

## Customizing Your Popup

After creation, clicking the **Customize** button on any popup card opens a full-screen modal that divides customization into several sections:

### **General Settings**

* **Popup Name:**\
  Provide a unique name to help you identify and manage the popup.
* **Reward Source:**\
  Choose between two options:
  * **Fixed (Single) Reward:**\
    Every customer who interacts with the popup wins the same reward—guaranteeing a 100% win rate.\ <mark style="color:red;">**Important:**</mark>  <mark style="color:red;"></mark><mark style="color:red;">If you choose to offer a Fixed Reward for your popup verify it carefully because every customer fulfilling the popup will win this reward with 100% win rate !!!</mark>
  * The fixed reward types include:
    * **Percentage Discount:** A preset discount (e.g., 10% off) applied automatically at checkout.
    * **Free Shipping:** Offers free shipping on the customer’s order.
    * **Free Product:** A specific product is rewarded at a 100% discount and added to the cart as a free item.\
      **Note on Free Product Rewards:**\
      Customers can only receive one unit of the free product per popup interaction. Even if a customer somehow increases the quantity on the checkout page, the app automatically removes any additional units so that only one free product is discounted. The quantity selector for the free product is also blocked, ensuring that customers cannot add more than one free item.
  * **Campaign:**\
    Instead of offering the same reward every time, you can link the popup to a campaign. With campaigns, you select a campaign from a list (populated from campaigns you’ve created on the Campaigns page).&#x20;
  * Campaigns allow you to set up multiple reward options—each with its own probability (chance percentage) that must sum to 100%—so that the reward a customer wins can vary.
* **Page Targeting:**\
  Decide where your popup should appear:
  * **Show on Any Page:** The popup displays globally across your site.
  * **Show on Specific Pages:** Define rules using operators such as “Equals,” “Contains,” etc. You can choose whether the popup should appear if any rule matches or only if all rules match.
* **Show Frequency:**\
  Determine how often the popup appears to the same user:
  * **Every time anyone visits:** The popup appears on every visit.
  * **Limit frequency:** Specify a maximum number of times the popup should display within a given period (for example, 5 times per day).
* **Trigger Settings:**\
  Configure when the popup appears:
  * **Immediately:** As soon as the page loads.
  * **Timer:** After a specified delay (in seconds).
  * **Scroll:** Once the user scrolls a set percentage of the page.
  * **Exit:** When the visitor’s cursor moves toward the top of the browser window (indicating an intent to leave).
* **Device Targeting:**\
  Decide whether the popup appears on all devices or restrict it to desktops or mobile devices for optimal display.
* **Schedule:**\
  Define the active period for your popup:
  * **Always Active:** The popup is always displayed.
  * **Active From a Date:** The popup starts showing from a specified date.
  * **Active Between Dates:** The popup only appears during a defined date range, ideal for time-sensitive promotions.

### **Content Settings**

* **Title and Message:**\
  Customize the headline (title) and the body text (message) that appear on your popup.
* **Button Text and Copy Button Text:**
  * **Button Text:** Set the text for the primary call-to-action (e.g., “Subscribe & Play”).
  * **Copy Button Text:** Customize the text on a secondary button (e.g., “Apply Reward”) that might allow users to copy a discount code or reward message.
* **Reward Message:**\
  Define the message that appears when the scratch interaction reaches the reward threshold.

### **Appearance Settings**

* **Images:**
  * **Scratch Image:** Choose the overlay image that users “scratch off.”
  * **Underlying Image:** Select the image that is revealed beneath the scratch layer, which may display your reward or additional branding.
* **Color Customization:**\
  Fine-tune various visual details using an inline color picker:
  * **Button Color, Button Font Color, and Button Hover Color**
  * **Blink Color:** Used to highlight when a reward is triggered.
  * **Popup Background Color**
  * **Title and Message Text Colors**
  * **Consent Message Text Color**

A live preview pane—embedded via an iframe—updates in real time as you adjust these settings, so you can see exactly how your popup will look on your storefront.

***

### Additional Actions on the Popup Page

* **Toggle Active Status:**\
  Quickly enable or disable any popup with an intuitive switch.
* **Delete Popups:**\
  Remove popups that are no longer needed.
* **Performance Metrics:**\
  Each popup card displays real-time statistics, such as impressions (the number of times it’s been shown) and subscribers (the number of users who have engaged), so you can assess its effectiveness.

***

## In Summary

Using the Popup Page, you can:

* **Create new popups** from a selection of predesigned styles.
* **Customize each popup** in detail across General, Content, and Appearance settings.
* **Choose a Fixed Reward**—which guarantees a 100% win rate by providing the same incentive (whether it’s a percentage discount, free shipping, or a free product) to every customer—or link the popup to a **Campaign**, where you can select a campaign from your list that offers multiple reward options with defined win probabilities.
* **For Fixed Rewards:**\
  **Important:** Verify the fixed reward carefully before deploying. If you choose the Free Product option, remember that customers can only win one unit of the free product per interaction. The app automatically prevents additional free units from being added (any extra quantity is removed at checkout, and the quantity selector is blocked), ensuring that only a single free product is awarded.
* Automatically generate discounts and add rewards when customers complete the popup form.
* **Monitor popup performance** with real-time metrics for continuous optimization.

This comprehensive control lets you design highly engaging popups that capture customer attention and drive conversions—with every setting tailored to meet your specific business needs, whether you opt for a fixed reward or link the popup to a dynamic campaign.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://appsetup-eng.gitbook.io/appsetup-popups/getting-started/popups-page.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.