Como ativar Exit pop-up no HUB
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).
- 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
Obrigado!