> ## Documentation Index
> Fetch the complete documentation index at: https://help.maestra.io/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Create Pop-ups

**To Create a pop-up:**

1. Go to **Campaigns Manager→ Create campaign**
2. **Personalization → Pop-up**.

<img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups.png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=f8ca5212b3a45ba0a31367307d73fdda" alt="" width="5480" height="3152" data-path="images/imported/How-to-Create-Pop-ups.png" />

Choose a folder and click **Create**.

<img src="https://mintcdn.com/maestraio/05-EV9YqA_RINTJ8/images/imported/How-to-Create-Pop-ups-(1).png?fit=max&auto=format&n=05-EV9YqA_RINTJ8&q=85&s=fda82b14f64303d316bcb824747d9d5e" alt="" width="6792" height="1944" data-path="images/imported/How-to-Create-Pop-ups-(1).png" />

<Warning>
  **To work with product list data and browsed products, full integration is required.**

  Follow the instructions to configure the settings: [https://developers.maestra.io/page/website-personalization](https://developers.maestra.io/page/website-personalization)
</Warning>

## **Choose a template**

Next, choose a template depending on the purpose of the pop-up. You can use it to:

* Generate leads
* Increase conversion & average order value
* Notify visitors
* Conduct a survey

<img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups-(3).png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=51e286b80c2ef29890f35d31046fc2fe" alt="" width="8220" height="4728" data-path="images/imported/How-to-Create-Pop-ups-(3).png" />

After choosing a template, specify your website and click the **Proceed** button.

<img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups--2819-29.png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=90ae86a100dd379ad1ac88cae150fe03" alt="" width="8220" height="4728" data-path="images/imported/How-to-Create-Pop-ups--2819-29.png" />

## **Edit the template**

Once the pop-up is created, click the **Edit** button **.**

<img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups--2820-29.png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=f3f5d284d57f6bbc605b8b3cfb2acdec" alt="" width="5464" height="1702" data-path="images/imported/How-to-Create-Pop-ups--2820-29.png" />

On the Pop-up editing page click the **Edit** button.

<img src="https://mintcdn.com/maestraio/05-EV9YqA_RINTJ8/images/imported/How-to-Create-Pop-ups-(21).png?fit=max&auto=format&n=05-EV9YqA_RINTJ8&q=85&s=1d6b9a24ddf856aa6213c814adfbced7" alt="" width="5464" height="1702" data-path="images/imported/How-to-Create-Pop-ups-(21).png" />

The form editing window is displayed below.

<img src="https://mintcdn.com/maestraio/05-EV9YqA_RINTJ8/images/imported/How-to-Create-Pop-ups-(22).png?fit=max&auto=format&n=05-EV9YqA_RINTJ8&q=85&s=a99a65c0365d0e9302316137f591ba55" alt="" width="8220" height="4728" data-path="images/imported/How-to-Create-Pop-ups-(22).png" />

**Here you can:**

* Adjust the pop-up’s **position** on the website (Form position **button)**
* Check how the pop-up **displays on** **different devices (Desktop/Tablet/Phone)**.
* Configure **background color, icons, border and field sizes, fonts, privacy policy** and other visual options.

<img src="https://mintcdn.com/maestraio/05-EV9YqA_RINTJ8/images/imported/How-to-Create-Pop-ups-(23).png?fit=max&auto=format&n=05-EV9YqA_RINTJ8&q=85&s=a1ad410c0c8c617bd34b33dd1cfe1753" alt="" width="7800" height="7446" data-path="images/imported/How-to-Create-Pop-ups-(23).png" />

* Edit the pop-up directly in HTML code (\<>Code button)
* Configure the main screen and the confirmation screen after the customer completes the action.
* Preview the form on your website. ​

## **New pop-up templates**

New templates allow you to create forms that are different for each device. They are also easier and more intuitive to configure. You can find them in the gallery, where they are marked with a "New"  label.

<img src="https://mintcdn.com/maestraio/05-EV9YqA_RINTJ8/images/imported/How-to-Create-Pop-ups-(24).png?fit=max&auto=format&n=05-EV9YqA_RINTJ8&q=85&s=c5d300b9d06404db84ca7e7cb5e234db" alt="" width="8220" height="3981" data-path="images/imported/How-to-Create-Pop-ups-(24).png" />

*

### Pop-up editing pageWhen you open a page, you’ll see a list of elements included in the form. You can move, delete, or add new ones.

<img src="https://mintcdn.com/maestraio/05-EV9YqA_RINTJ8/images/imported/How-to-Create-Pop-ups-(25).png?fit=max&auto=format&n=05-EV9YqA_RINTJ8&q=85&s=51f80f99a37eb4bcdb56c4094565a7d8" alt="" width="8220" height="4728" data-path="images/imported/How-to-Create-Pop-ups-(25).png" />

In addition to basic input fields, new templates also support adding:

* timer

* promo code field

* option buttons

* close button
  <img src="https://mintcdn.com/maestraio/05-EV9YqA_RINTJ8/images/imported/How-to-Create-Pop-ups-(26).png?fit=max&auto=format&n=05-EV9YqA_RINTJ8&q=85&s=d1e3e36c4fe0869a6a907fccbfbe4ee0" alt="" width="8220" height="4728" data-path="images/imported/How-to-Create-Pop-ups-(26).png" />

*

### **Editing elements**To edit an element, click it in the list or on the preview.

<img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups-(27).png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=a90c66d8340ba9ea73f7cda0ea39e3e8" alt="" width="8220" height="4728" data-path="images/imported/How-to-Create-Pop-ups-(27).png" />

<Note>
  New templates allow you to customize each text element for different screens, including font style, size, color, and alignment.
</Note>

*

### **Device-specific design**By default, most elements automatically sync and adjust to the mobile version.To set custom properties, disable synchronization and configure settings for the specific device.

## <img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups-(28).png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=416f6c3d2897a545a5e8696554bd40bc" alt="" width="8220" height="4728" data-path="images/imported/How-to-Create-Pop-ups-(28).png" />

### **General form settings**To adjust general form settings (font, close button, layout, etc.), go back to the General settings page.

<img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups-(29).png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=f86b1dd6510000a0bfb58d053279b770" alt="" width="8220" height="4728" data-path="images/imported/How-to-Create-Pop-ups-(29).png" />

<img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups-(30).png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=b47a10b31bc41fe8346dc190e12654ea" alt="" width="8220" height="4728" data-path="images/imported/How-to-Create-Pop-ups-(30).png" />

<Note>
  With the new templates, you can set a fixed height for all screens. This is useful when screens contain different content and their heights vary.
</Note>

*

### **Saving data when closing the second screen**For templates with multiple main screens, you can configure the form to save entered data when the second screen is closed.In this case, all fields on the second screen become optional.

To enable: open **General settings desktop→ Data transfer → User data** and activate the option.

<img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups-(31).png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=3ed21f563a4ad7c1698b34d5744fdaa2" alt="" width="8220" height="4728" data-path="images/imported/How-to-Create-Pop-ups-(31).png" />

We only recommend using this option if the first screen **includes a mandatory privacy policy checkbox** to ensure that the user has explicitly consented to data transfer and communications.

## **Targeting**

Use filters to define who will see the pop-up and under what conditions.You can preconfigure a customer segment and show (or hide) the form for that segment.

<Note>
  For example, here’s a filter for customers whose birthday is in 7 days (segment created in advance)

  <img src="https://mintcdn.com/maestraio/05-EV9YqA_RINTJ8/images/imported/How-2Bto-2BCreate-2BPop-ups-2B-2832-29.png?fit=max&auto=format&n=05-EV9YqA_RINTJ8&q=85&s=1540bfaf48baf9209c17794652387ddb" alt="" width="8208" height="3738" data-path="images/imported/How-2Bto-2BCreate-2BPop-ups-2B-2832-29.png" />
</Note>

## General Settings

In **General settings**, specify:

* Website
* Days of the week for display
* Frequency of appearance
* Whether the form is **priority**. If checked, the pop-up will appear even if frequency limits per visitor are set in the “Pop-up frequency control” section.

<Note>
  For example, these are the settings for a form that will be displayed daily, but will only pop up once for each user during a visit to the site (and form is a priority).

  <img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups-(33).png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=56707b3a4ef7b5db3a4d4f2c311ab51d" alt="" width="8208" height="3738" data-path="images/imported/How-to-Create-Pop-ups-(33).png" />
</Note>

## **Display conditions**

Next, set the pop-up display conditions: ​1.  By set of conditions

* After Exit intent (cursor leaves the active page area) - only for desktop campaigns.
* After page scrolled for X %
* After a certain time spent on the page.
* After visiting a defined number of pages.
* After being inactive for period of time
* On a specific action performed on the website.2. Immidiately after falling into target group 3. After API-request or click on call-to-action button

<Note>
  For example, these are the settings for a form that will be displayed for a customer who has visited two pages of the site in total.

  <img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups-(34).png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=36e07b05bb0cc1908aceb335307bad26" alt="" width="8208" height="3738" data-path="images/imported/How-to-Create-Pop-ups-(34).png" />
</Note>

<Warning>
  Page views and visits are counted starting from the moment the popup script is installed on the site. If installed yesterday, data is only available from that point.
</Warning>

## **What happens after form was filled & Custom JS-calls**

<img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups-(35).png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=ab09c12c7284e53b88842725f67db32d" alt="" width="8220" height="4728" data-path="images/imported/How-to-Create-Pop-ups-(35).png" />

In this section, define what happens with the submitted data:

* Create new customer or edit an existing one
* Add an action
* Transfer events to Google Analytics
* Call custom JS code. The available actions depend on the selected template.

## **How to test the pop-up on your website**

Click Form preview. Insert your website link and open it.

<img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups-(36).png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=d2eb7ffedc1897b808ebbb50146a4086" alt="" width="5464" height="1702" data-path="images/imported/How-to-Create-Pop-ups-(36).png" />

You will then see the pop-up live on your site.

<img src="https://mintcdn.com/maestraio/PP-BodS5bFF14NYd/images/imported/How-to-Create-Pop-ups-(37).png?fit=max&auto=format&n=PP-BodS5bFF14NYd&q=85&s=8c659420327eabb00d0557ff98ee4efc" alt="" width="8220" height="4728" data-path="images/imported/How-to-Create-Pop-ups-(37).png" />
