Pop-ups have been a staple of On-site Marketing since their inception in the late 1990s. While they may be considered intrusive by some users (when done improperly!) and blocked by some browsers and ad blockers, they are still an effective way to get more subscribers and increase conversions.
Pop-ups are small windows that suddenly appear (hence the name) on "top" of the user's screen. They can be triggered by an action (such as opening a page, clicking a button or hovering the mouse cursor towards the "close page" button) or after a set amount of time.
Learn how to set up this powerful On-site Marketing tool on edrone!
If you need some inspiration for creating your Pop-ups, or just want to see what you can do with edrone, click here to check out our Pop-up Portfolio. To see how other edrone clients have achieved success using Pop-ups, click here.
How to set up Advanced Pop-ups
To begin, login to your Mission Control and go to ONSITE > ADVANCED POP-UPS.
If you have created Pop-ups before the new Advanced Pop-ups, you will first need to turn off the "old" pop-ups. Please note that you can test and create Advanced Pop-ups before that, however you will not be able to publish them until your "old" pop-ups are turned off. If you are a new customer, you will automatically have access to Advanced Pop-ups only.
You first option will be to choose how many Pop-ups you'd like to create. The minimum is one, the maximum is eight. To create a new version, click the green "+" button. To edit each version, hover your mouse above it and click the EDIT button.
To continue, click on the Settings tab below.
Step 1: Settings
In this section, you will set up your pop-up's general settings. First, name your pop-up so you can easily identify it later on. Next, choose what type of pop-up you want.
There are four types of pop-up to choose from:
Welcome pop-up: This type of pop-up will appear whenever a visitor enters your website. You will need to determine its Periodicity, which means how often that pop-up will reappear to the same customer, and Delay, which is the time you want to wait after your visitor enters your website before the pop-up appears.
Exit pop-up: This kind of pop-up will appear when your visitor's mouse starts hovering towards the "X" button to close the page. For Exit pop-ups, you can only determine Periodicity.
Action pop-up: Action pop-ups will appear based on specific actions made by the user (Add To Cart or Newsletter Subscription). For Action pop-ups, you need to choose how many times it will be displayed (Displays): every time that action occurs, or after a given amount of events.
Recommend pop-up: This kind of pop-up will show a Marketing Machine container with automatic product recommendations. This is a premium feature, if you're interested please do not hesitate to contact us at firstname.lastname@example.org.
You can use Tags to segment your pop-ups. Click here to learn more about tags.
You may also determine which fonts you want to use on your pop-ups, and whether you want your pop-up to act as a big button ("Link whole pop-up" option).
To continue, click on the Rules tab below.
Step 2: Rules
Here you have the ability to setup when your pop-up will be displayed according to several conditions:
URL address: you can determine on which of your website's page or pages you would like your pop-up to appear. For example, if you want it to appear on every page of your website (e.g. "yoursite.com"), choose "URL → contains → yoursite.com". If you want it to appear only on your cart page (for example, "yoursite.com/my-cart"), you can choose "URL → is → yoursite.com/my-cart".
Screen size: in this rule, you can choose to show or hide your pop-up based on your customer's screen size, effectively segmenting by device: Desktop (≥1000 px); Tablet (≥576 and ≤1000 px); or Smartphone (≤576 px).
User subscription status: using this rule you will determine if you'd like to show or hide your pop-up to users who are or aren't subscribed to your newsletter. This is a great rule to use if you want to expand your subscriber base!
HTML Element: allows you to display your pop-up whenever a specific HTML element is present on a given webpage. Just paste the element on the text field.
Based on the date: choose whether you want your pop-up to be displayed starting from or ending on a specific date, or during a specific period of time. This rule is perfect for limited-time campaigns such as Black Friday or Christmas.
Homepage: this rule allows you to display the pop-up only on your homepage instead of your whole website. Just choose "Homepage → is → yoursite.com"
Rules will have boolean relationships (AND / OR) with each other. This means you can compound your rules to narrow down your audience using AND (e.g. show pop-up only when user is visiting a particular webpage AND viewed a product) or amplify it using OR (e.g. show pop-up either when user is not subscribed OR is using mobile screen size).
Click on the Templates tab below to move forward.
Step 3: Templates
In this section, you will choose from 24 template options, available in mobile and desktop versions. Please note that edrone's pop-ups are not responsive, so you need to create different pop-ups for mobile and desktop.
When you select the template you want, make sure to click "Continue" and check for the green confirmation message on the top right corner of your screen.
To continue, click on the Position tab below.
Step 4: Position
This part is pretty straightforward: choose where you would like your pop-up to appear on the screen: Center, Bottom left or Bottom right.
Now it's time to Design your pop-up! Click on the next tab below.
Step 5: Design
In this section, your options will be different according to the template you chose on step 3, but there are a few general settings:
Animation in: If you want, you can choose an animation for the moment your pop-up appears on the screen.
Animation out: The same as the previous option, but in this case it is the animation of how your pop-up will disappear from the screen.
EDIT button: In this option, you will be able to change your pop-up's width, whether it will have rounded corners or not, background color (the color around the pop-up and its transparency level), and it's shadow properties.
ELEMENTS button: Here, you will edit each part of your pop-up individually. Pop-ups are made up of sections called "containers", and you can add or remove containers as you wish. You can add different elements (Input field, Button, Text, Checkbox, Image, Spacer, Gender select and Birthday select) into every container.
You can also easily edit each part of your pop-up by hovering your mouse over it.
Once you're happy with you pop-up's design, click on the Preview tab.
Step 6: Preview
You're almost done! Now it's time to check if everything is working the way you want.
Click on the PREVIEW button. Please note it might take a few seconds for the system to generate your preview.
Then you will have two options: GO TO STORE will show you a preview pop-up of your on your website, while PUBLISH will make your pop-up go live.
That's it! Your pop-up is now up and running.
Bonus step: Editing and deactivating Pop-ups
If you want to EDIT or DEACTIVATE it later on, you can easily do that by going back to the top of the Advanced Pop-up screen and choosing the desired option.
Need more help?
If you have any further questions about Advanced Pop-ups, please do not hesitate to contact us at email@example.com