Como podemos ajudar?

Encontre os artigos que irão ajudá-lo a melhorar sua loja virtual

Produtos
Filtros da busca:
Filtrando por:

FC 15027 :: Como exibir uma promoção antes do visitante sair da loja?

É possível mostrar um popup de oferta quando o ponteiro do mouse subir para a barra de endereços do navegador.

Evite que o visitante saia da loja exibindo uma promoção justamente antes que isto ocorra. Veja o passo a passo para configurar popups do tipo Não vá embora!.

Imagine o seguinte cenário comum:

  1. Um visitante acessou a loja virtual, viu os detalhes de alguns produtos, mas decidiu não comprar e procurar em outro site.
  2. Para sair da loja, ele move o ponteiro do mouse para fora da página, na direção da barra de endereços do navegador.
  3. Neste breve momento, antes de mudar de site ou de fechar a aba da loja, uma imagem promocional é exibida ao visitante, oferecendo um desconto imperdível de 10%.
  4. O cliente vê a promoção e resolve comprar o produto na loja.

Note que o visitante estava indo embora da loja virtual sem comprar nada. Neste momento é importante criar uma ação para prender a atenção do cliente. Normalmente utiliza-se as chamadas call to action para exibir promoções, lançamentos, códigos de desconto ou para mostrar produtos em destaque da loja.


Exemplo:



Documentação

  • Personalização CSS
  • Suporte de Cookies
  • Inclusão de Parâmetros

Existem 5 parâmetros para mostrar o popup:

Botão fechar 
DontGoBtnClose:FC$.PathImg +"botdontgoclose.svg?cccfc=1", //Close button

O nome da imagem do exemplo é BotDontGoClose.svg. A imagem pode ser SVG, PNG, JPG ou GIF. Se preferir, você pode montar a promoção usando via HTML, javascript e CSS.


Banner 
DontGoBanner:FC$.PathImg +"bannerpopupdontgo.jpg?cccfc=1", //Banner

No exemplo, o nome do banner é BannerPopupDontGo.jpg, com tamanho 800x300 pixels. O banner pode ter outras dimensões e pode usar extensões SVG, PNG, JPG ou GIF.


Parâmetro Alt 
DontGoAltParam:"Não vá embora!"}, //Alt Param

No exemplo, o parâmetro alt Não vá embora! é um texto simples. O texto deve refletir a mensagem que represente o banner

  • PROMOÇÃO RELÂMPAGO! NÃO PERCA!
  • ESPERE! OLHE BEM ESSA OPORTUNIDADE! ;)
  • UM DESCONTO ESPECIAL PARA VOCÊ!
  • FRETE GRÁTIS! ISTO NÃO SE ENCONTRA FÁCIL!

Link 
DontGoLink:"https://sualoja.lojavirtualfc.com.br", //Link

O link aponta para qualquer página da loja. Clique aqui e veja os exemplos.


Cookie 
"DontGoCookie"); //Cookie name (opcional)

Se o cliente fechar o popup e continuar navegando pela loja virtual, este não será mostrado novamente na sessão. Este controle de exibição é feito por cookie.

O nome do cookie DontGoCookie pode ser personalizado para cada tipo de popup. Desta forma, cada banner pode ter um cookie próprio, para que cada popup seja exibido somente uma vez.

  • DontGoCookieHome
  • DontGoCookieProduct
  • DontGoCookieCategories
  • DontGoCookiePromo


Seguem instruções de implantação deste recurso:

1º Passo

Clique aqui e faça download das imagens. Envie o arquivo para a pasta IMAGES.



2º Passo

No final do arquivo LojaLib.js insira o script abaixo.

// Don't Go Popup
FCLib$.onReady(function(){
if(FCLib$.GetID("overlay")){
//Dynamic Don't Go Container
var dynamicDontGoContainer = document.createElement('div');
dynamicDontGoContainer.id = 'ShowDontGoPopup';
dynamicDontGoContainer.className = 'DontGoPopup';
document.getElementsByTagName('body')[0].appendChild(dynamicDontGoContainer);
//Dynamic Don't Go Container Elements
var dynamicDontGoContainerElements = document.createElement('div');
dynamicDontGoContainerElements.className = 'DontGoPopupContent';
dynamicDontGoContainer.appendChild(dynamicDontGoContainerElements);
//Dynamic Don't Go Elements Close Button
var dynamicDontGoElementsCloseButton = document.createElement('div');
dynamicDontGoElementsCloseButton.className = 'DontGoPopupCloseButton';
dynamicDontGoContainerElements.appendChild(dynamicDontGoElementsCloseButton);
dynamicDontGoElementsCloseButton.innerHTML = "<img id='idBtnDontGoClose' border='0'>";
//Dynamic Don't Go Elements Banner
var dynamicDontGoElementsBanner = document.createElement('div');
dynamicDontGoElementsBanner.className = 'DontGoBanner';
dynamicDontGoContainerElements.appendChild(dynamicDontGoElementsBanner);
dynamicDontGoElementsBanner.innerHTML = "<a id='idLinkDontGo' target='_self'><img id='idImgDontGo' src='' border='0'></a>";
//PreLoading Image Banner
var preLoadingDontGoBanner = new Image();
preLoadingDontGoBanner.onload = function () {
document.getElementById('idImgDontGo').src = preLoadingDontGoBanner.src;
};
preLoadingDontGoBanner.src = FC$.PathImg +"bannerpopupdontgo.jpg?cccfc=1";
//Show Don't Go Popup
FCLib$.fnDontGo(userDontGo,{
DontGoBtnClose:FC$.PathImg +"botdontgoclose.svg?cccfc=1", //Close button
DontGoBanner:FC$.PathImg +"bannerpopupdontgo.jpg?cccfc=1", //Banner
DontGoLink:"/prod,idloja,"+FC$.IDLoja+",promocao,1,ofertas.htm", //Link
DontGoAltParam:"UM DESCONTO ESPECIAL PARA VOCÊ!"}, //Alt Param
"DontGoCookie"); //Cookie name
}
});
function userDontGo(oParam){
var OpenDontGoPopup=document.getElementById('ShowDontGoPopup');
if(OpenDontGoPopup){
document.getElementById("idBtnDontGoClose").src=oParam.DontGoBtnClose; //Close button
document.getElementById("idImgDontGo").src=oParam.DontGoBanner; //Banner
document.getElementById("idImgDontGo").alt=oParam.DontGoAltParam; //Alt Param
document.getElementById("idLinkDontGo").href=oParam.DontGoLink; //Link
window.onload=OpenDontGoPopup.style.display="block";
var CloseDontGoPopup=document.getElementsByClassName("DontGoPopupCloseButton")[0];
CloseDontGoPopup.onclick=function(){OpenDontGoPopup.style.display="none";}
}
}


3º Passo

Insira os estilos abaixo no final do arquivo LojaSite.css:

/* Don't Go Popup */
.DontGoPopup{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;overflow-y:hidden;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4);}
.DontGoPopup .DontGoPopupContent div a img{max-width:100%;height:auto;}
.DontGoPopupContent{margin:auto;padding:0px;}
.DontGoBanner img{border:1px solid #888888;border-radius:10px;}
.DontGoPopupCloseButton img{position:relative;top:30px;right:12px;float:right;width:80px;height:auto;}
.DontGoPopupCloseButton:hover,.DontGoPopupCloseButton:focus{cursor:pointer;}
@media only screen and (max-width:1680px){.DontGoPopupContent{width:48%;}}
@media only screen and (min-width:1681px){.DontGoPopupContent{width:40%;}}

O estilo do popup são definidos nas classes acima. É possível definir cores, dimensões etc.



Versão Avançada:

É possível personalizar e mostrar popups diferentes em determinadas páginas. No exemplo abaixo serão exibidos 4 popups diferentes, exibidos nas páginas home, lista de produtos, produto específico e demais páginas.


1º Passo

Para especificar um popup diferenciado na página de detalhes do produto, insira o código abaixo na primeira linha dentro da tag <ProdDet> no arquivo EstiloProduto.htm.

<script>var dontGoProduct="<IDProduto>";</script>


2º Passo

No final do arquivo LojaLib.js, insira o script abaixo e altere "9999999" pelo ID do seu produto.

// Don't Go Popup
FCLib$.onReady(function(){
if(FCLib$.GetID("overlay")){
//Dynamic Don't Go Container
var dynamicDontGoContainer = document.createElement('div');
dynamicDontGoContainer.id = 'ShowDontGoPopup';
dynamicDontGoContainer.className = 'DontGoPopup';
document.getElementsByTagName('body')[0].appendChild(dynamicDontGoContainer);
//Dynamic Don't Go Container Elements
var dynamicDontGoContainerElements = document.createElement('div');
dynamicDontGoContainerElements.className = 'DontGoPopupContent';
dynamicDontGoContainer.appendChild(dynamicDontGoContainerElements);
//Dynamic Don't Go Elements Close Button
var dynamicDontGoElementsCloseButton = document.createElement('div');
dynamicDontGoElementsCloseButton.className = 'DontGoPopupCloseButton';
dynamicDontGoContainerElements.appendChild(dynamicDontGoElementsCloseButton);
dynamicDontGoElementsCloseButton.innerHTML = "<img id='idBtnDontGoClose' border='0'>";
//Dynamic Don't Go Elements Banner
var dynamicDontGoElementsBanner = document.createElement('div');
dynamicDontGoElementsBanner.className = 'DontGoBanner';
dynamicDontGoElementsBanner.innerHTML = "<a id='idLinkDontGo' target='_self'><img id='idImgDontGo' src='' border='0'></a>";
dynamicDontGoContainerElements.appendChild(dynamicDontGoElementsBanner);
//var Estiloproduto.htm <ProdDet>
function isDontGoProdID(IDProduto){
if(typeof dontGoProduct !== "undefined"){
return (dontGoProduct == IDProduto) ? true : false;
}else{
return false;
}
}
//PreLoading Images Banner
var preLoadingDontGoBanner = new Image();
preLoadingDontGoBanner.onload = function () {
document.getElementById('idImgDontGo').src = preLoadingDontGoBanner.src;
};
//Show Don't Go Popup Home
if(FC$.Page=="Home"){
FCLib$.fnDontGo(userDontGo,{
DontGoBtnClose:FC$.PathImg +"botdontgoclose.svg?cccfc=1", //Close button
DontGoBanner:FC$.PathImg +"bannerpopupdontgo.jpg?cccfc=1", //Banner
DontGoLink:"https://sualoja.lojavirtualfc.com.br", //Link
DontGoAltParam:"PROMOÇÃO RELÂMPAGO! NÃO PERCA!"}, //Alt Param
"DontGoCookieHome"); //Cookie name
preLoadingDontGoBanner.src = FC$.PathImg +"bannerpopupdontgo.jpg?cccfc=1"; //PreLoading Image Banner
//Show Don't Go Popup Product Details
}else if(isDontGoProdID("9999999")){
FCLib$.fnDontGo(userDontGo,{
DontGoBtnClose:FC$.PathImg +"botdontgoclose.svg?cccfc=1", //Close button
DontGoBanner:FC$.PathImg +"bannerpopupdontgo1.jpg?cccfc=1", //Banner
DontGoLink:"https://sualoja.lojavirtualfc.com.br", //Link
DontGoAltParam:"ESPERE! OLHE BEM ESSA OPORTUNIDADE! ;)"}, //Alt Param
"DontGoCookieProduct"); //Cookie name
preLoadingDontGoBanner.src = FC$.PathImg +"bannerpopupdontgo1.jpg?cccfc=1"; //PreLoading Image Banner
//Show Don't Go Popup Products Page
}else if(FC$.Page==="Products"){
FCLib$.fnDontGo(userDontGo,{
DontGoBtnClose:FC$.PathImg +"botdontgoclose.svg?cccfc=1", //Close button
DontGoBanner:FC$.PathImg +"Bannerpopupdontgo2.jpg?cccfc=1", //Banner
DontGoLink:"https://sualoja.lojavirtualfc.com.br", //Link
DontGoAltParam:"UM DESCONTO ESPECIAL PARA VOCÊ!"}, //Alt Param
"DontGoCookieCategories"); //Cookie name
preLoadingDontGoBanner.src = FC$.PathImg +"bannerpopupdontgo2.jpg?cccfc=1"; //PreLoading Image Banner
//Show Don't Go Popup in other pages
}else{
FCLib$.fnDontGo(userDontGo,{
DontGoBtnClose:FC$.PathImg +"botdontgoclose.svg?cccfc=1", //Close button
DontGoBanner:FC$.PathImg +"bannerpopupdontgo3.jpg?cccfc=1", //Banner
DontGoLink:"https://sualoja.lojavirtualfc.com.br", //Link
DontGoAltParam:"FRETE GRÁTIS! ISTO NÃO SE ENCONTRA FÁCIL!"}, //Alt Param
"DontGoCookiePromo"); //Cookie name
preLoadingDontGoBanner.src = FC$.PathImg +"bannerpopupdontgo3.jpg?cccfc=1"; //PreLoading Image Banner
}
}
});
function userDontGo(oParam){
var OpenDontGoPopup=document.getElementById('ShowDontGoPopup');
if(OpenDontGoPopup){
document.getElementById("idBtnDontGoClose").src=oParam.DontGoBtnClose; //Close button
document.getElementById("idImgDontGo").src=oParam.DontGoBanner; //Banner
document.getElementById("idImgDontGo").alt=oParam.DontGoAltParam; //Alt Param
document.getElementById("idLinkDontGo").href=oParam.DontGoLink; //Link
window.onload=OpenDontGoPopup.style.display="block";
var CloseDontGoPopup=document.getElementsByClassName("DontGoPopupCloseButton")[0];
CloseDontGoPopup.onclick=function(){OpenDontGoPopup.style.display="none";}
}
}


3º Passo

Insira os estilos abaixo no final do arquivo LojaSite.css:

/* Don't Go Popup */
.DontGoPopup{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;overflow-y:hidden;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4);}
.DontGoPopup .DontGoPopupContent div a img{max-width:100%;height:auto;}
.DontGoPopupContent{margin:auto;padding:0px;}
.DontGoBanner img{border:1px solid #888888;border-radius:10px;}
.DontGoPopupCloseButton img{position:relative;top:30px;right:12px;float:right;width:80px;height:auto;}
.DontGoPopupCloseButton:hover,.DontGoPopupCloseButton:focus{cursor:pointer;}
@media only screen and (max-width:1680px){.DontGoPopupContent{width:48%;}}
@media only screen and (min-width:1681px){.DontGoPopupContent{width:40%;}}


 Avaliações dos clientes:
Este produto ainda não recebeu avaliações de clientes.
Clique aqui e seja o primeiro a avaliá-lo

Seu sucesso não pode esperar,

Criar agora sua
Loja Virtual!

Veja Nossos Planos

Ou fale com um de nossos
consultores
especializados
em e-commerce.

Veja nossos Planos e Serviços

Visão Geral

Saiba Mais

Download

Contato

Siga Nossos Canais

Você sabia?

A 1ª plataforma de comércio eletrônico do Brasil é também a mais escolhida pelos lojistas!

Clique aqui e experimente grátis!