Create a pop-up for your website - ExpertSender Help Center

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.

Here you will learn how to create a pop-up and display it in your online store.

Requirements

Before you start creating a pop-up, make sure that:

Web tracking channel has been configured correctly.
You have created graphics, photos, texts, and links leading to your website.

How to create a pop-up?

ExpertSender offers a simple wizard that helps you quickly create an effective pop-up. In the side menu, click the Automation section and go to the Pop-ups subsection. At the top right, click the Create new pop-up button.

You are now in the pop-up creator. On the top you can see the stages necessary for creating a pop-up – the one you are currently in is highlighted with a colored line. You can freely move between stages by clicking on them.

After going to the Summary, a dot may appear next to the previous stages – this means that a given stage requires completion.

Step 1: Basic settings

Complete the fields – give the pop-up you are creating a name that will later appear in the report. Think of a name that will make it easier for you to search for the pop-up and analyze the data.

From the drop-down menu select the URL on which the pop-up should appear.

Select the start and end date for the pop-up to appear. Also, set the appropriate frequency of displaying it – match it to the nature of your online store and the type of message. For time-limited offers, you can choose the “once per session” or daily frequency.

Step 2: Triggers

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

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

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

Scroll – The pop-up will show when a user starts scrolling the page. Set a scroll depth, which, if met, will trigger a pop-up.

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

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. This may be a specific type of pages, pages containing a specific phrase or keyword, the specific time the user spent on the page or the number of pages he or she visited.

In the Audience field you can limit the number of recipients to whom the pop-up will be displayed, e.g., new or returning customers or non-buying users, customers coming from a specific source – indicate where they should be coming from. Also, you can 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 create a pop-up from blocks – photos, texts, and modules. You will find a detailed description of all editor features here: How the graphic editor works.

Start by creating your pop-up content:

On the left-hand side, in the editor panel, click the Content section and expand the Structures bar.
Drag the structure with the selected number of containers to the gray workspace visible in the center. Arrange the structures in any order and combine them into strips (rows) to which you will assign various functions at a later stage, e.g., header, text, footer.
Expand the Block bar. Drag the block with the selected content type to the workspace and insert it into any container. Click on the block – a window for uploading a photo, video or for editing text will appear in the left panel.
Modules are a place for your original content blocks. Since you are creating your first pop-up, this space will be empty. Over time, you will fill it up with your own ideas.

Now go to the pop-up appearance settings:

On the left, in the editor panel, click the Appearance section and then expand the General settings bar. Choose the pop-up width, margins, font type and responsiveness.
Click the Stripes bar and assign the strips (rows) the role of header, content or footer. Select the bar by clicking on the gray background of the canvas, then set the look and function in the panel on the left. Do the same for each selected strip.
In the Headings bar, set the appearance for the H1, H2 and H3 headings.
Go to the Button bar and set the parameters (color, font, style) for all the buttons in the pop-up.
In the last Mobile formatting bar you can set the text size, alignment, and margin for the pop-up displayed on mobile devices.

Step 4: Appearance

In this section, you will decide how the pop-up will be displayed on your computer, phone, or tablet screen.

In the left panel, set:

Position of the pop-up on the screen – Central, left, right, top, bottom.
Fixed position – If you want the pop-up to remain in the same place on the screen.
Pop-up size – Enter the window width and height in pixels or percentages. The Adapt to content option activates additional fields in which you can set:
- Margin – Distance of the pop-up from the edge of the store window.
- Spacing – The distance between the content of the pop-up and its edges.
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.

Close button – It allows you to close the pop-up after clicking the button.
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.
Close the pop-up on clicking the background – Allows a user to quickly close the pop-up and enter your store.

In the window below, enter the target address of the website where the pop-up should appear and check 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.

Each section will have a label depending on its status:

Green – the information is correct and complete.
Orange – you may consider improving this element or adding more information. However, if you don’t, it will not affect the delivery.
Red – details marked in red require your attention, as they will stop the delivery. Click the pencil icon to edit them.

Also, red and orange dot marks will appear in the top bar, next to the sections that need revision.

After completing the checklist details, publish the pop-up by clicking the Activate button located in the upper right corner of the screen.

Your pop-up is now ready – well done!