Pop-ups 

A pop-up is a window with graphics that is displayed to customers visiting your online store. Using pop-ups you can inform customers about your ongoing promotions, new products or encourage them to subscribe to your newsletter. Based on your visitor data collected in the platform, you can personalize the content of pop-ups and display them to previously defined customer segments. 

Pop-ups – dashboard

In the dashboard you have access to all pop-ups you have created, divided into categories. To access the dashboard, select the Automation section and the Pop-ups subsection in the side menu. 

The table visible in the dashboard contains all necessary information about your pop-ups. 

1. In the first column you will find the status of a selected pop-up: 
   • Draft – Means that the pop-up is being created. 
   • Active – Means that the pop-up is displayed on your website. 
   • Inactive – Means that the pop-up has not been displayed yet or it is no longer being displayed because it is outdated or it has been manually deactivated. 

2. ID – Means the ordinal number of the pop-up in the platform. 

3. Trigger – The type of action that causes the pop-up to be displayed. 

4. Name – This is your description of the pop-up. 

5. Views – Shows the total number of pop-up views at the time you selected, on all subpages of your online store. 

6. Clicks – Shows the total number of clicks on the displayed pop-up. 

7. The last column contains icons used to operate a given pop-up: 
   • Preview – <eye> icon – Clicking it will display a preview of the pop-up.
   • Edit – pencil icon – Clicking it will take you to the pop-up editing panel.
   • Activate – play icon – Clicking it will display a prompt: “Are you sure you want to activate this pop-up?” You can choose either Activate or Cancel.
   • Deactivate – window icon – Clicking it will display a prompt: “Are you sure you want to deactivate this pop-up?” Here you can stop the display of the pop-up by clicking Deactivate. 
   • Delete – trash icon – Clicking it will delete the selected pop-up.

By clicking on the column names you can sort the data contained in them in ascending or descending order. In the case of statuses, they can be sorted in the following order: active > inactive > draft and vice versa. 

The ID and Name columns have additional filters hidden under the funnel icon. Click the funnel icon to view them. 

Page switching is displayed below the table and next to it on the right hand side you can set the number of pop-ups displayed in the table. 

Above the table are the names of the categories to which the pop-ups you created are assigned. They also serve as a quick filter: 

• All – This category displays all pop-ups saved in the platform. 
• Active – Displays pop-ups running on your website. Here you cannot edit the pop-ups, you can only preview their design, deactivate or delete them. 
• Inactive – Displays pop-ups that are not used. This list does not include drafts. Here you can activate any pop-up by simply licking the Activate icon. 
• Draft – Displays pop-ups being currently designed. To complete designing a pop-up, click the Edit icon. 
• Deleted – Displays all deleted pop-ups. Once deleted, a pop-up cannot be restored.

Creating pop-ups 

Creating pop-ups is quick and efficient. To get started, go to the dashboard and click the Create new pop-up button at the top of the page, on your right hand side. 

There is a progress bar on the top bar indicating the steps you need to complete to create the pop-up. The stage you are currently at is highlighted with a colored line. You can freely move between stages by clicking on them. 

If after getting to the Summary a dot appears next to any of the previous stages, you need to go back and complete a given stage.

Step 1: Basic settings 

In this section you enter preliminary information about how a pop-up should work. 

1. Give the pop-up a name that will be visible in the dashboard. 

2. In the Website section, select from the drop-down menu the address of the website where the pop-up should be displayed. 

3. Select the time range in which the pop-up should be displayed – the start and end date. 

4. In the Frequency section you can set the frequency of displaying the pop-up: 
   • Display once per session – Displays a pop-up once per customer visit to your online store. When a customer leaves your store by closing the tab or browser window, it means the end of the session. If they visit the store again, the pop-up will be displayed again. 
   • Display once per + filter – Set how many times the pop-up should be displayed per unit of time, e.g., once every 2 days, once every 2 weeks.

Step 2: Triggers

Here you decide when the pop-up will be displayed. In the Event field select one or more of the actions: 

1. Visit – The pop-up will be displayed when a user enters the website. 

2. Exit-intent – The pop-up will be displayed when a user moves the cursor outside your online store page window. 

3. Scroll – The pop-up will show when a user starts scrolling the page. Set a threshold (page scrolling depth in percent), which, if met, will trigger a pop-up. 

4. Add to cart – The pop-up will be displayed when a user adds an item to the cart. 

5. Remove from cart – The pop-up will be displayed after a user removes a product from the cart. 

In the Conditions field, you can set additional requirements that will specify when the pop-up will be displayed: 

1. Page type – Click on the displayed window and select the type of subpage where the pop-up is to appear: 
   • Product page 
   • Cart page 
   • Payment confirmation page 
   • Other 

2. Page address – Three filters will appear that allow you to set the address of the target page or pages for the pop-up: 
   • Condition – Select an option: equals, begins, contains or a regular expression. The regular expression option opens a window for entering up to 10 regular expressions. 
   • Value – Enter an expression, number or keyword that is included in the website address. 
   • Test value – Enter the address of the page or subpage where you want to test the pop-up. Once entered, click Test and check if the pop-up is displayed on the page. 

3. Session duration – Set the time interval after which the pop-up will be displayed when a user enters the website, e.g., between 3 and 5 seconds. 

4. Number of pages visited – Set the number of pages visited after which the pop-up should be displayed. Also indicate the type of page a user has to visit for the pop-up to be displayed: any page, product page, cart page or payment confirmation page. 

In the Recipients field you can limit the number of recipients to whom the pop-up will be displayed. 

1. New / Returning – Select user type from the drop-down list. 

2. Customer / Non-customer – Choose whether the pop-up should be displayed to current customers of your online store or only to those who are not your customers yet. 

3. Consents – decide how many and what kind of consents should the users grant before displaying them a pop-up. 

4. Session source – Indicate where the customers to whom the pop-up will be displayed should come from, e.g., a specific social channel, search engine or an article linking to the website with the pop-up. You can also provide the UTM tag of a specific marketing campaign.

Step 3: Content 

An intuitive drag-and-drop graphic editor is used to design the content and appearance of the pop-ups. You can design it from scratch or use our extensive library of pre-designed templates. 
You will find a detailed description of all editor features here: How the message editor works.

Step 4: Placement 

In this section you can decide how the pop-up will be displayed on your desktop, phone or tablet screen and test how the pop-up looks on your website. 
Your available options for displaying the pop-up on the page are as follows: 

1. Position – central, left, right, top, bottom. 
   • The Fixed position option disables the pop-up while scrolling the page. When the option is active, the slider is highlighted in navy blue. 

2. Size – Option to set the size of the pop-up window. There are two windows for entering the window width and height in pixels or percentages. The Adjust to content option activates additional fields in which you can set: 
   • Padding – Distance between the pop-up content and its edges. 
   • Margin – Distance of the pop-up from the edge of your online store page window. 

You can set the margin and spacing using two functions: 

• Giving one value to all edges of the pop-up. 
• Giving different values to each edge. 

The maximum width of the pop-up that you can enter here is 900 px. For larger graphics, enter their size when creating content in the graphic editor, using the code editor. 

3. Rounded corners – This option allows you to round the corners of the displayed pop-up. The corners will round symmetrically when you enter one value for all corners. In the preview window you can preview whether the entered value gives you the visual effect you wanted. 

4. Close button – It will allow you to close the pop-up after clicking the button. 

5. Modal – Adds a gray, semi-transparent background against which the pop-up is better visible. This mode also allows you to interact with the area outside the pop-up. 

6. Close the pop-up on clicking the background – Allows a user to quickly close the pop-up and enter your store. 

7. Test – In the Page address window, enter the target address of the website where you want the pop-up to appear. It will allow you to see how it looks on your website. 

Step 5: Summary

This is the final stage of creating pop-ups. Here you can check how your pop-up displays on your desktop screen and on your mobile device. Click the Desktop and Mobile icons to switch between views. 

On the left hand side, you will find a checklist with the elements necessary to publish a pop-up on your website: 

• We highlight in green elements which have been entered correctly. 
• Elements in red require improvement. You can correct them by clicking the pencil icon. 
• We add an orange marking to elements that may work better, but corrections are not necessary to display them in your online store. 

At this stage, you can save the created pop-up for later or publish it: 

• Save and Close – This button will save the pop-up as a draft and take you to the email list in the dashboard. 
• Activate – Clicking this button will publish a pop-up on your website.