Use nosso impulsionador de campanhas para aproveitar ao máximo a Black Friday

window.varify.helpers.onDomLoaded(() => {
  // ================================
  // CONFIG – YOU CAN EDIT THIS
  // ================================

  // Unique key for this popup. Change if you want a separate session logic.
  const POPUP_SESSION_KEY = 'varifyBFContentExitPopupSeen';

  // Popup texts
  const POPUP_HEADLINE = 'Black Friday Mega Deal!';
  const POPUP_SUBHEADLINE = 'Don\'t miss our biggest discounts';

  // Bullet points (each entry = one bullet line)
  const POPUP_BULLETS = [
    'Up to 50% off everything',
    'Free shipping on all orders',
    'Limited time offer'
  ];

  // CTA button
  const POPUP_CTA_URL = 'https://example.com/black-friday'; // landing page URL
  const POPUP_CTA_TEXT = 'Save Now →';                       // CTA label

  // Exit intent sensitivity (keep it simple: trigger when mouse leaves at top)
  const EXIT_TRIGGER_Y = 0;

  // ================================
  // RUNTIME LOGIC – DO NOT TOUCH :)
  // ================================

  // Do not run inside Varify editor
  function isInEditor() {
    const p = new URLSearchParams(location.search);
    return p.has('varify-variation-name') || p.has('varify-variation-id');
  }
  if (isInEditor()) return;

  // Do not show more than once per session
  if (sessionStorage.getItem(POPUP_SESSION_KEY) === '1') return;

  window.varify.helpers.waitFor('.varify-exitIntent-content', (contentDiv) => {
    const wrapper  = document.querySelector('.varify-exitIntent-wrapper');
    const backdrop = document.querySelector('.varify-exitIntent-backdrop');
    const modal    = document.querySelector('.varify-exitIntent');
    const closeBtn = document.querySelector('.varify-exitIntent-close');

    if (!wrapper || !backdrop || !modal || !closeBtn || !contentDiv) return;

    let popupOpened = false;

    // Ensure close button is inside modal so it overlays the content
    if (closeBtn.parentElement !== modal) {
      modal.appendChild(closeBtn);
    }

    // Build popup content (headline, subheadline, bullets, CTA)
    contentDiv.innerHTML = '';
    contentDiv.style.textAlign = 'left';

    const headline = document.createElement('p');
    headline.className = 'bf-exit-intent-headline';
    headline.textContent = POPUP_HEADLINE;

    const subheadline = document.createElement('p');
    subheadline.className = 'bf-exit-intent-subheadline';
    subheadline.textContent = POPUP_SUBHEADLINE;

    const ul = document.createElement('ul');
    ul.className = 'bf-exit-intent-bullets';

    POPUP_BULLETS.forEach((txt) => {
      const li = document.createElement('li');
      li.textContent = txt;
      ul.appendChild(li);
    });

    const cta = document.createElement('a');
    cta.className = 'bf-exit-intent-cta';
    cta.href = POPUP_CTA_URL;
    cta.target = '_blank';
    cta.rel = 'noopener noreferrer';
    cta.textContent = POPUP_CTA_TEXT;

    contentDiv.appendChild(headline);
    contentDiv.appendChild(subheadline);
    contentDiv.appendChild(ul);
    contentDiv.appendChild(cta);

    // Exit-intent trigger (simple: mouse leaves at top)
    const exitHandler = (e) => {
      if (popupOpened) return;
      // nur reagieren, wenn Maus oben rausgeht
      if (e.clientY > EXIT_TRIGGER_Y) return;

      openPopup();
      popupOpened = true;
      document.removeEventListener('mouseout', exitHandler);
    };

    document.addEventListener('mouseout', exitHandler);

    function openPopup() {
      sessionStorage.setItem(POPUP_SESSION_KEY, '1');
      wrapper.classList.add('vf-show');
      backdrop.style.display = '';
      document.documentElement.classList.add('vf-no-scroll');
      document.body.classList.add('vf-no-scroll');
    }

    function closePopup() {
      wrapper.classList.remove('vf-show');
      backdrop.style.display = 'none';
      document.documentElement.classList.remove('vf-no-scroll');
      document.body.classList.remove('vf-no-scroll');
    }

    // Outside click closes
    backdrop.addEventListener('click', (evt) => {
      if (!modal.contains(evt.target)) closePopup();
    });

    // X button closes
    closeBtn.addEventListener('click', (e) => {
      e.preventDefault();
      closePopup();
    });

    // ESC closes
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') closePopup();
    });
  });
});


    

/* --------------------------------------------- Fundo oculto por padrão --------------------------------------------- */
.varify-exitIntent-backdrop { display: none !important; background-color: rgba(0, 0, 0, 0.8) !important; position: fixed !important; top: 0; bottom: 0; left: 0; right: 0; justify-content: center; align-items: center;
  z-index: 2147483646 !important; } /* --------------------------------------------- Mostrar pop-up quando o wrapper tiver .vf-show --------------------------------------------- */ .varify-exitIntent-wrapper.vf-show .varify-exitIntent-backdrop { display: flex !important; } /* --------------------------------------------- Impedir que a página role enquanto o pop-up estiver aberto --------------------------------------------- */ .vf-no-scroll { overflow: hidden !important; } /* --------------------------------------------- Estilo modal (para pop-up com conteúdo) --------------------------------------------- */ .varify-exitIntent { cor de fundo: #000 !importante; cor: #fff !importante; raio da borda: 10px !importante; sombra da caixa: 0 0 18px rgba(0, 0, 0, 0,6);
  width: 540px !important; max-width: 90% !important; max-height: 90% !important; overflow: visible !important; position: relative !important; padding: 0 !important; z-index: 2147483647 !important; }

/* --------------------------------------------- Área de conteúdo --------------------------------------------- */ .varify-exitIntent-content { padding: 30px !important; text-align: left !important; }

/* --------------------------------------------- Ocultar bloco de cabeçalho padrão não utilizado --------------------------------------------- */ .varify-exitIntent-header { display: none !important; }

/* --------------------------------------------- Botão Fechar (sempre visível acima do conteúdo) --------------------------------------------- */ .varify-exitIntent-close { posição: absoluta !importante;
  top: 12px !important; right: 12px !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.9) !important;
  color: #000 !important; z-index: 2147483648 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; padding: 0 !important; }

.varify-exitIntent-close-icon { largura: 14px !important; altura: 14px !important; cor: #000 !important; } /* --------------------------------------------- Tipografia para pop-up de conteúdo --------------------------------------------- */ .bf-exit-intent-headline { tamanho da fonte: 22px !important; peso da fonte: 800 !important; margem: 0 0 10px !important; cor: #fff !important; }

.bf-exit-intent-subheadline { tamanho da fonte: 18px !important; margem: 0 0 15px !important; cor: #fff !important; } /* ---------------------------------------------
   Lista com marcadores --------------------------------------------- */ .bf-exit-intent-bullets { list-style: none !important; padding: 0 !important; margin: 0 0 20px !important; }

.bf-exit-intent-bullets li { margem inferior: 6px !important; preenchimento esquerdo: 20px !important; posição: relativa !important; cor: #fff !important; } .bf-exit-intent-bullets li::before { conteúdo: "•" !important;
  color: #d32c2c !important; position: absolute !important; left: 0 !important; top: 0 !important; } /* --------------------------------------------- Botão CTA --------------------------------------------- */ .bf-exit-intent-cta { exibição: inline-block !important; cor de fundo: #d32c2c !important; cor: #fff !important; preenchimento: 10px 20px !important;
  border-radius: 4px !important; tamanho da fonte: 16px !important; espessura da fonte: 600 !important; decoração do texto: nenhuma !important; } .bf-exit-intent-cta:hover { cor de fundo: #b71c1c !important; }

/* --------------------------------------------- Ajustes responsivos para janelas de visualização muito pequenas --------------------------------------------- */
@media only screen and (altura máxima: 700px) { .varify-exitIntent { altura máxima: 75% !important; } } @media only screen and (largura máxima: 380px) { .varify-exitIntent-content { preenchimento: 20px !important; }

  .bf-exit-intent-headline { tamanho da fonte: 19px !important; } .bf-exit-intent-subheadline { tamanho da fonte: 16px !important; } }

Copiar