> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.icommkt.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

1. Enter the **Notification HUB** module
2. Select the **Surface Web** tab
3. Select the **Exit Popups** option

![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/1_1penn3p.jpg)

# Create Exit popup

1. Select the **Create New** button, within the initial screen

![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/2_1t2x7l7.jpg)

_A new window will open to customize the Exit pop-up._

# Setting

![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/3_m6dugy.jpg)
![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/4_6cdf9i.jpg)

_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.

2. Click on the **Save** button to finish

# How can I further customize my Exit Pop-up?

1. To access this option, go to the configuration section of the exit pop-up and look for the option **I'd rather upload HTML**.

![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/5_bj76un.jpg)

2. There you can paste the code you've created to load your own custom notification layout.

![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/6_6sz10h.jpg)

3. Set your preferences
* Day and time the notification is displayed
* The pages where you want the notification to be seen
* Days to next interaction

![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/7_1diylhl.jpg)

| 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:

```html
<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.