Pop-ups have a complicated reputation, and we get it – a lot of websites use them in a disrupting and annoying way.
Creating an effective strategy for using pop-ups is one thing, but then you need to actually create them. If you're not used to it, that can be a challenging task, but no worries – our Custom Pop-up builder makes this process as easy and enjoyable as possible!
In this article, we'll go over the Pop-up creation process. To learn more about everything our powerful Pop-up editor can do, click here.
How to Configure a Custom Pop-up
To get started, log in to Mission Control and navigate to the ONSITE > POP-UP tab.
Click the “New Pop-up” button to create your new Custom Pop-up.
A few important things to know about the Custom Pop-up creation process:
There is no limit to the number of pop-ups you can create.
All pop-ups are automatically responsive, but you can choose whether to display them only on desktop, only on mobile devices, or on both (see Step 3).
Your work is automatically saved every 60 seconds. However, before leaving the page, make sure to click the SAVE button.
Configuration
1. Name Your Pop-up
In the field “Enter the name of this pop-up,” type a name that will help you identify the campaign (e.g., Newsletter – mobile – February 2026).
The name is visible only in the admin panel — users will not see it.
2. Choose Devices
In the “Choose devices” section, decide on which devices the pop-up should be displayed:
mobile only,
desktop only,
both device types.
This setting allows you to tailor the message to a specific traffic type.
3. Choose Display Position
In the “Choose display position” section, specify where the pop-up should appear, for example:
in the center of the screen,
in another available variant (depending on the pop-up type).
Available variants may differ depending on whether you are configuring the pop-up for mobile or desktop. Some pop-up types offer different layouts and display positions depending on the selected device.
The chosen position affects visibility and communication effectiveness.
4. Set the Display Trigger
In the “Set action” section, define when the pop-up should be displayed to the user.
Available options:
🔹 Immediately
The pop-up appears as soon as the page loads.
When to use it?
For important messages that need instant visibility.
🔹 Delay
The pop-up appears after a specified amount of time (e.g., after 5 seconds).
When to use it?
For newsletter sign-ups or when you want to give users time to explore the page.
🔹 Inactivity
The pop-up appears after a period of user inactivity.
When to use it?
To re-engage users.
🔹 Scroll
The pop-up appears after the user scrolls a certain percentage of the page (e.g., 50%).
When to use it?
To target more engaged users.
🔹 Exit Intent
The pop-up appears when the user attempts to leave the page (desktop).
When to use it?
To retain users, for example by offering a discount code.
🔹 Click
The pop-up appears after the user clicks a selected element.
When to use it?
When you want the pop-up to be intentionally triggered by the user.
🔹 Hover
The pop-up appears after hovering over a selected element (desktop).
When to use it?
For interaction-based scenarios.
🔹 Newsletter Sign-up
The pop-up appears after a user subscribes.
When to use it?
As a confirmation message or to display a discount code.
🔹 Custom
The pop-up appears after detecting a custom event.
When to use it?
For advanced integration scenarios.
5. Define Where the Pop-up Should Appear
🔹 On every page
The pop-up will be displayed across the entire website.
When to use it?
For universal messages (e.g., newsletter sign-up).
🔹 On the homepage
The pop-up appears only on the homepage.
When to use it?
For branding messages or main promotions.
🔹 On product pages
The pop-up appears only on product detail pages.
When to use it?
For discount codes, upselling, or encouraging sign-ups before purchase.
🔹 Based on URL
You can define specific URLs where the pop-up should appear (e.g., contains /category/).
When to use it?
For precise targeting of selected sections.
🔹 Based on HTML
The pop-up appears based on the presence of a specific HTML element on the page.
When to use it?
For advanced scenarios tied to page structure.
6. Schedule Display
In the “Scheduling” section, you can decide:
whether the pop-up should display immediately,
or only during a specific time range (e.g., seasonal campaign).
This is ideal for time-limited promotions.
7. Choose Subscription Status
Define which users should see the pop-up based on their subscription status.
Available options:
🔹 Everyone
Displayed to all users regardless of status.
When to use it?
For general announcements.
🔹 Subscribers only
Visible only to newsletter subscribers.
When to use it?
For dedicated subscriber messages.
🔹 Unsubscribed only
Visible to users who have unsubscribed.
When to use it?
For re-engagement attempts.
🔹 Unknown only
Visible to users who are not recognized as subscribers.
When to use it?
For collecting new sign-ups.
🔹 Unsubscribed and Unknown
Visible to users who are not active subscribers.
When to use it?
For acquisition-focused campaigns.
8. Assign a Tag
In the “Tag” section, choose the tag that will be assigned to users after they subscribe through the pop-up.
Tags allow you to:
segment new subscribers,
measure the effectiveness of a specific pop-up,
build dedicated automation scenarios.
9. Set Display Limits
In the “Limits” section, you can define how often the pop-up should be displayed to the same user (e.g., once every 6 hours).
This prevents overexposure and improves user experience.
Edit Design
10. Layout
In the “Choose layout” section, define the structure of the pop-up and the placement of content and graphics.
Available variants:
🔹 Without background
The pop-up contains only content (headline, description, form, button).
🔹 With background
The pop-up includes an additional background graphic.
🔹 Image on the left
The image is displayed on the left side of the content.
🔹 Image on the right
The image is displayed on the right side of the content.
Adding Graphics to the Pop-up
If you choose a layout with an image, you can add graphics in two ways:
🔹 AI Banner Generator
Generate an image directly in the system using the AI Banner Generator. After generating the image, download and use it in your pop-up.
🔹 Add Your Own Image
Upload your own image to be displayed in the pop-up.
Layout variants may differ depending on whether you are configuring the pop-up for desktop or mobile.
11. Main Style Settings
Customize the pop-up’s appearance.
🔹 Inner Margin
Adjusts spacing between content and the pop-up edges.
🔹 Corner Radius
Defines the roundness of the pop-up corners.
🔹 Width
Allows you to set the pop-up width.
🔹 Background Color
Set the pop-up background color (HEX code).
🔹 Shadow Background Color
Set the color of the page overlay behind the pop-up.
🔹 Shadow
Choose the shadow intensity (e.g., light).
12. Close Button
Configure the appearance and position of the close (X) icon.
🔹 Close Icon
Choose one of the available icon variants.
🔹 Close Button Size
Adjust the icon size.
🔹 Close Button Color
Set the icon color (HEX code).
🔹 Icon Position (X / Y axis)
Precisely adjust the icon placement.
13. Custom Google Font
Customize the pop-up typography.
You can:
🔹 choose a ready-made font from the available list,
🔹 add your own Google Font to match your website’s visual identity.
14. Pop-up Redirect URL
Add a URL where users will be redirected after performing a specific action (e.g., clicking).
When to use it?
To redirect users to a dedicated landing page,
To send users to a specific offer.
Need more help?
If you have any further questions about how to create Custom Pop-ups, please do not hesitate to contact us at hello@edrone.me