Banner Popup Modal com Cookie

Banner Popup Modal com Cookie

posted in: Apps | 0

Hoje a Visualyze traz a você mais um recurso interessante para sua loja virtual. Se você está fazendo aquela promoção de um produto e quer dar total evidência esta pode ser uma solução simples mas eficiente! Com esse código você irá implementar em sua loja um banner (imagem) em formato modal (popup – imagem flutuante) que possui link. Veja o exemplo abaixo:
 
Modelo de Banner Popup Modal
 
O Código que estamos disponibilizando também oferece esse recurso para versão mobile, veja o exemplo abaixo:
 
Banner Popup Modal Mobile
 
Essa funcionalidade possui cookie de tempo que diz ao navegador o intervalo de dias em que o popup irá aparecer para o seu cliente. É feito desta maneira para que o popup não apareça toda vez que a página for atualizada, sendo assim, desta maneira, quando o seu cliente visitar a sua loja pela primeira vez o popup irá surgir para ela apenas uma vez e não irá parecer pelo número de dias que você irá programar.




Essa funcionalidade está liberada para qualquer plataforma de e-commerce ou site, porém queremos deixar claro que, dependendo da plataforma ou site, será necessário fazer ajustes no código para funcionar corretamente. Será por sua conta e risco.

 

Observação Importante:

  • Essa funcionalidade foi feita usando um formatação CSS padrão. Se você tiver conhecimento nessa área poderá editar a sua maneira livremente por sua conta e risco ou entre em contato e solicite um orçamento.



Instruções de Instalação na Loja Integrada:

Clique neste link para criar um entrada HTML avançada em sua Loja Integrada e preencha os dados como na imagem abaixo:

Instruções de Instalação do Banner Popup Modal na Loja Integrada

Preencha como na imagem os campos de descrição, local de publicação, página de publicação e tipo. No campo conteúdo, cole todo o conteúdo do arquivo TXT que você irá baixar ao final desta descrição.

Observe a imagem acima. Dentro do código iremos trabalhar as linhas 6, 7, 18 e 19.

  • Na linha 6, no primeiro item sublinhado em vermelho vai entrar o link no qual o seu cliente será direcionado ao clicar. Substitua o texto “SEU LINK AQUI” pelo link que quiser. ATENÇÃO! Não remova as aspas, cole o link entre elas. Ainda nessa mesma linha, no segundo item sublinhado, você irá substituir o texto “TEXTO QUE APARECE QUANDO PASSAMOS O MOUSE SOBRE A IMAGEM” pelo texto que você quiser. Essa função faz exatamente o que o texto de exemplo diz. Novamente, não remova as aspas!
  •  

  • Na linha 8, onde está sublinhado em vermelho, se encontra o local onde você irá colar o link da imagem que servirá como popup contendo a informação que você deseja. Recomendamos usar uma imagem em formato JPG para não causar lentidão no carregamento, porém imagens em PNG também poderão ser usadas se desejar. Recomendamos também criar uma imagem com mais altura do que largura. Ex: 410 x 500, pois assim ela ficará melhor no mobile na posição vertical. Após criar a imagem faça upload no servidor da sua loja, você poderá usar esse link para isso, copie o link e cole no código substituindo, sem remover as aspas, o texto “LINK DA IMAGEM EM HTTPS”. Por que HTTPS? Para não causar conflito no SSL da sua loja, caso contrário o cadeado ficará amarelo!
  •  

  • Na linha 18, o número 1 na cor azul, representa o número de dias em que o popup não irá aparecer para o mesmo cliente. Por padrão, o número de dias está ajustado para 1, esse é o mínimo possível. Se desejar aumente o número de dias.
  •  

  • Na linha 19, o número 1000 na cor azul, representa o tempo em milissegundos que levará para o popup aparecer ao carregar a pagina. Por padrão, está ajustado para 10 segundos, aumente ou diminua se desejar.
  •  

Não há necessidade de mexer no restante do código. Após seguir esse procedimento salve e aproveite!

OBS: Quando o popup aparecer para você, não irá adiantar fechar e reabri a página na tentativa de rever o popup, pois o cookie já foi regirado e impedirá que o popup reapareça, para isso utilize uma aba privativa do seu navegador, pois nesse modo o cookie não será salvo.

Agora baixe o código no botão abaixo:



  • Ao clicar no botão aguarde 5 segundos e clique no botão “fechar propaganda” no topo a direita. As páginas seguintes contêm anúncios.
Comments are closed.