How to activate Exit Pop-up in HUB
Exit Pop Up
It is a very useful tool when it comes to preventing brand users from leaving the site. Appears when the mouse cursor approaches the browser or tab close buttons.
The pop-ups will be seen by any user who enters the site from a computer and does not require prior subscription. They will be visible to 100% of the traffic, regardless of the browser or operating system used by the user. They will only be displayed when the mouse pointer approaches the browser or tab close buttons.
Enter the Notification HUB module
Select the Surface Web tab
Select the Exit Popups option
Create Exit popup
Select the Create New button, within the initial screen
A new window will open to customize the Exit pop-up.
Setting
In the left column are the configuration options. On the right, the preview of the pop-up.
Configure the Exit pop-up
Name
It is for internal use of the platform.
Title 1
Write a main title.
Title 2
It will be displayed in a smaller size within the piece.
Background color
It is the color that will carry the background of the pop-up.
Typography and color
Select one of the options offered by the platform.
Add image
Import an image from your computer. Dimensions: 300x300 pixels (1:1) (2MB)
Button and color
Configure the legend and the colors of the button that the pop-up will have.
Destination url
This is the site the button will redirect to. By pasting the destination url, a utm will be assigned to it to measure the performance of the tool. You can also configure the utm, from the Configure option (UTM Parameters for Google Analytics).
Add close button
Add a button to close the notification
Date and time
Select the days and hours in which the pop-up will be displayed (by default, it will be active all day).
With this configuration you can include more than one pop-up on the same page.
You can visualize the widget in...
Select the pages on which you will display the pop-up. You can choose all pages (default), some specific pages or all pages except some.
Days until next interaction
With this option, the pop-up will stop being displayed for the specified number of days to users who have already interacted with the piece.
I'd rather upload HTML
The HTML can include the content you want: from a simple image (which must be hosted on a server), to a complex structure.
Click on the Save button to finish
How can I further customize my Exit Pop-up?
To access this option, go to the configuration section of the exit pop-up and look for the option I'd rather upload HTML.
There you can paste the code you've created to load your own custom notification layout.
Set your preferences
Day and time the notification is displayed
The pages where you want the notification to be seen
Days to next interaction
We always recommend using the Icomm template to work with the same structure. The Icomm template is already designed to fit the exit pop-up requirements, so you can be sure that your design will fit right in.
Copy this HTML template for Icomm Exit pop-ups and use it to create your custom layouts:
<div class="wpn_modal wpn-fade " id="wpn_popup_modal" tabindex="-1" role="dialog" aria-labelledby="wpn_popup_modal" aria-modal="true">
<div class="wpn-modal-dialog wpn-modal-dialog-centered">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
.wpn-fade {
transition: visibility .20s linear;
visibility: hidden;
display: none;
}
.wpn-show {
visibility: visible;
display: block;
}
.wpn-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
display: block;
z-index: 1000003;
}
.wpn-modal-dialog {
position: relative;
width: auto;
pointer-events: none;
}
.wpn-modal * {
box-sizing: border-box;
}
.wpn-modal-dialog-centered {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
min-height: calc(100% - 1rem);
}
.wpn-modal.wpn-fade .wpn-modal-dialog {
transition: -webkit-transform .3s ease-out;
transition: transform .3s ease-out;
-webkit-transform: translate(0, -50px);
transform: translate(0, -50px);
}
.wpn-modal {
padding-right: 15px;
}
.wpn-modal-dialog {
margin: .5rem;
}
@media (min-width: 576px) {
.wpn-modal-dialog-centered {
min-height: calc(100% - 3.5rem);
}
}
@media (min-width: 576px) {
.wpn-modal-dialog {
max-width: 464px;
margin: 1.75rem auto;
}
}
#wpn-modal-content {
padding: 40px;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
pointer-events: auto;
background-color: #e5efff !important;
color: #707070 !important;
background-clip: padding-box;
border-radius: .3rem;
outline: 0;
min-height: 270px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
#wpn-modal-content .wpn-modal-body {
display: flex;
flex-direction: column;
justify-content: space-around;
padding-right: 5px;
flex-grow: 1;
text-align: left;
}
#wpn-modal-content .wpn-modal-body.wpn-center {
text-align: center;
}
#wpn-modal-content .wpn-modal-img-container {
min-width: 190px;
max-width: 190px;
margin: 0 auto;
}
#wpn-modal-content #wpn-modal-title {
font-size: 24px;
line-height: 24px;
color: #707070 !important;
}
#wpn-modal-content #wpn-modal-subtitle {
font-size: 14px;
line-height: 18px;
color: #707070 !important;
}
#wpn-modal-content #wpn-popup-btn {
display: inline-block;
color: #ffffff !important;
background-color: #e69d43 !important;
border-color: #007bff;
font-weight: bold;
padding: 11px 21px 9px 21px;
font-size: 15px;
line-height: 15px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24);
border-radius: 2px;
}
#wpn-modal-content #wpn-popup-btn:hover {
text-decoration: none;
}
.wpn-btn-container {
clear: both;
}
.wpn-btn-container #wpn_close_banner_dialog {
position: absolute;
top: 10px;
right: 10px;
background-color: transparent !important;
border: none;
}
.wpn-modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 1000001;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
}
#wpn-modal-img {
max-width: 100%;
height: auto;
}
.wpn-popup-preview-powered {
position: absolute;
bottom: 5px;
right: 10px;
}
.wpn-popup-preview-powered #wpn-popup-powered {
fill: #707070 !important;
}
button.wpn-popup-close {
color: #707070 !important;
opacity: .4;
float: right;
font-size: 1.5rem;
line-height: 1;
text-shadow: 0 1px 0 #fff;
}
</style>
<div id="wpn-modal-content">
<div class="wpn-btn-container">
<button type="button" class="wpn-popup-close " id="wpn_close_banner_dialog" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="wpn-modal-body ">
<div id="wpn-modal-title">No te vayas antes de conocer nuestras ofertas</div>
<div id="wpn-modal-subtitle">Encuentre productos hasta 50% OFF</div>
<div>
<a id="wpn-popup-btn" href="http://buenazo.com" rel="nofollow">
Ir a ofertas </a>
</div>
</div>
<div class="wpn-modal-img-container">
<img src="/images/popups/example.png" alt="" id="wpn-modal-img">
</div>
</div>
</div>
</div>As for the HTML code, you have complete freedom to include the content you want. From a simple image (which must be hosted on a server) to a complex structure, you can do whatever you want with your design. The specific dimension will depend exclusively on what you want to generate based on the strategy of your website.
Updated on: 12/19/2023
Thank you!