1. Click on ADD NEW POPUP
This will create your new Custom Pop-up with default settings. Click on it to edit.
Some important information about the Custom Pop-up process:
There is no limit to the number of pop-ups you can create.
All pop-ups are automatically responsive, but you will be able to choose whether you want to display them on desktop only, mobile only, or both.
Your work will automatically save every 60 seconds, but just to be safe, click the SAVE button before leaving the page.
2. Choose the goal you want to achieve
3. Get inspired by the ready-made templates
Each objective comes with different sets of templates. When you select each objective, you will see a different set to choose from.
NOTE: Setting a goal is only a way to suggest more effective templates for inexperienced users. You can also browse through all the templates and choose the one you like.
4. Once you have selected your template, click on the Design tab
You will create your pop-up using the easy-to-use pop-up builder. To explore all the features of the Custom Pop-up editor, click here.
If you like your creation, let's move on to the Display tab.
5. Display rules
All Custom Pop-ups are responsive by default, but you may want to show your pop-up on a specific device depending on your strategy. You can choose between:
All devices (desktop and mobile)
Desktop only
Mobile-only
Once you have made your decision, you will be able to choose the position in which your pop-up will appear on the screen.
6. Settings
That's pretty much it! Now we will still define the rules, telling you when and where your pop-up will be displayed.
First, you need to define the actions - that is, the conditions and events after which your pop-up will be displayed.
Immediate (your pop-up will be displayed immediately, without any delay)
Delay (your pop-up will be displayed with the selected delay)
Inactivity (your pop-up will be displayed after the selected time of user inactivity on the page)
- You must enter the time of inactivity (in seconds) in the text box that will appear below.On hover (your pop-up will be displayed when the user hovers the cursor over the selected page element)
- This condition will not be available if you have selected 'all devices' or 'mobile only' in step 3. You will need to enter the CSS selector in the text box that appears below.Scrolling (your pop-up will be displayed when the user scrolls 50% of the page)
Page down (your pop-up will be displayed when the user moves the cursor up the page).
- This condition will not be available if you have selected 'all devices' or 'mobile only' in step 3.Click (your pop-up will be displayed when the user clicks on the selected page element).
- You will need to enter the CSS selector in the text box that appears below.Newsletter sign-up (your pop-up will be displayed after a user subscribes to your newsletter).
- This is a great option to create a pop-up thanking users for signing up
7. Set where you want your pop-up to be displayed
On every page (all pages of your website)
On the homepage (homepage only)
On product pages (product pages only)
Based on URLs
- URL is exactly...
- URL is no...
- URL does not contain a fragment of...
- URL contains a fragment of...
- URL address (Regex)
Note that you can combine URL terms to suit your needs. For example, you may want to add a pop-up only to checkout-related pages, with the exception of the last one (after purchase).
8. Adjust the remaining settings
Select scheduling - and set when you want your pop-up to appear:
Display now (start immediately and remain active indefinitely)
Display during a selected period (choose the start and end date of your pop-up)Don't forget to select the subscription status you want the user to whom you want the pop up to appear.
If you want to distinguish from where your customers sign up when you have more on-site elements, customize the tag that will be assigned to the user when they sign up for your newsletter.
You can also set a limit to determine how many times your pop-up will be displayed to each user. You can choose from several options - from always (no limit) to once (every 31 days).
Example: If you decide that you want your pop-up to be active for a month and you set, a limit of 1h, this means that no matter how many times a user accesses your site in an hour, the pop-up will only be displayed to them once.
And finally, name your pop-up. This will help you identify it later when you want to manage all your pop-ups or check its performance in Onsite Reports.
9. All done...
In this step, you will see three buttons: Save, Preview, and Publish. If you have unsaved changes, you will only be able to click the SAVE button.
If you have unsaved changes, you will only be able to click the SAVE button.
By clicking the PREVIEW button, you will see how your pop-up will look in the store. A new button called VIEW IN STORE will be generated. After clicking it, you will be transferred to the view of your store with the newly created pop-up.
10. Ready!
If you're happy with how your pop-up looks in store view, click the PUBLISH button and voilà - your new Custom Pop-up is ready to go :)
If you are happy with the look of your pop-up in the shop view, click the PUBLISH button and voilà - your new Custom Pop-up is ready to go :)
Need more help?
If you have any further questions about Custom Pop-ups in edrone, please do not hesitate to contact us at hello@edrone.me