Exit popup

É uma ferramenta muito útil quando se trata de evitar que os usuários da marca saiam do site. Aparece quando o cursor do mouse se aproxima do navegador ou dos botões de fechar abas.

Os pop-ups serão vistos por qualquer usuário que entrar no site a partir de um computador e não requer inscrição prévia. Estarão visíveis a 100% do tráfego, independente do navegador ou sistema operacional utilizado pelo usuário. Eles só serão exibidos quando o ponteiro do mouse se aproximar do navegador ou dos botões de fechamento de abas.

Entre no módulo HUB de Notificações
Selecione a guia Ações da Web
Selecione a opção Exit popup

Criar Exit popup

Selecione o botão Criar um novo, na tela inicial



Uma nova janela será aberta para personalizar o pop-up Sair.

Contexto

Na coluna da esquerda estão as opções de configuração. À direita, a visualização do pop-up.

Configure o pop-up Sair

Nome
É para uso interno da plataforma.

Título 1
Escreva um título principal.

Título 2
Ele será exibido em um tamanho menor dentro da peça.

Cor de fundo
É a cor que carregará o fundo do pop-up.

Tipografia
Selecione uma das opções oferecidas pela plataforma.

Adicionar imagem
Importe uma imagem do seu computador. Dimensões: 300x300 pixels (1:1) (2MB)

Botão
Configure a legenda e as cores do botão que o pop-up terá.

URL de destino
Este é o site para o qual o botão será redirecionado. Ao colar a url de destino, um utm será atribuído a ela para medir o desempenho da ferramenta. Você também pode configurar o utm, na opção Configurar (Parâmetros UTM para Google Analytics).

Adicionar botão Fechar
Adicione um botão para fechar a notificação

Dias e Horários
Selecione os dias e horas em que o pop-up será exibido (por padrão, ficará ativo o dia todo).

Com esta configuração você pode incluir mais de um pop-up na mesma página.

Widget é exibido em...
Selecione as páginas nas quais você exibirá o pop-up. Você pode escolher todas as páginas (padrão), algumas páginas específicas ou todas as páginas exceto algumas.

Dias até a próxima interação
Com esta opção, o pop-up deixará de ser exibido pelo número de dias especificado para os usuários que já interagiram com a peça.

Prefiro fazer upload de HTML
O HTML pode incluir o conteúdo que você quiser: desde uma simples imagem (que deve estar hospedada em um servidor), até uma estrutura complexa.

Clique no botão Salvar para finalizar

Como posso personalizar ainda mais meu pop-up de saída?

Para acessar esta opção, vá para a seção de configuração do pop-up de saída e procure a opção Eu prefiro fazer upload de HTML.



Lá você pode colar o código que criou para carregar seu próprio design de notificação personalizado.



Defina suas preferências
Dia e hora em que a notificação é exibida
As páginas onde você deseja que a notificação seja vista
Dias para a próxima interação

Recomendamos sempre o uso do template Icomm para trabalhar com a mesma estrutura. O modelo Icomm já foi projetado para atender aos requisitos de pop-up de saída, portanto, você pode ter certeza de que seu design se encaixará perfeitamente.

Copie este modelo HTML para pop-ups Icomm Exit e use-o para criar seus designs personalizados:

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

Quanto ao código HTML, você tem total liberdade para incluir o conteúdo que quiser. Desde uma imagem simples (que deve ser hospedada em um servidor) até uma estrutura complexa, você pode fazer o que quiser com seu design. A dimensão específica dependerá exclusivamente do que você deseja gerar com base na estratégia do seu site.

Atualizado em: 19/12/2023