Utilizza il nostro Campaign Booster per ottenere il massimo dal 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();
    });
  });
});


    

/* --------------------------------------------- Sfondo nascosto per impostazione predefinita --------------------------------------------- */
.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; } /* --------------------------------------------- Mostra popup quando il wrapper ha .vf-show --------------------------------------------- */ .varify-exitIntent-wrapper.vf-show .varify-exitIntent-backdrop { display: flex !important; } /* --------------------------------------------- Impedisci lo scorrimento della pagina mentre il popup è aperto --------------------------------------------- */ .vf-no-scroll { overflow: hidden !important; } /* --------------------------------------------- Modal styling (per popup con contenuto) --------------------------------------------- */ .varify-exitIntent { background-color: #000 !important; color: #fff !important; border-radius: 10px !important; box-shadow: 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; } /* --------------------------------------------- Area contenuto --------------------------------------------- */ .varify-exitIntent-content { padding: 30px !important; text-align: left !important; }

/* --------------------------------------------- Nascondi blocco intestazione predefinito inutilizzato --------------------------------------------- */ .varify-exitIntent-header { display: none !important; }

/* --------------------------------------------- Pulsante Chiudi (sempre visibile sopra il contenuto) --------------------------------------------- */ .varify-exitIntent-close { posizione: assoluta !importante; alto: 12px !importante;
  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 { width: 14px !important;
  height: 14px !important; color: #000 !important; } /* --------------------------------------------- Tipografia per popup contenuto --------------------------------------------- */
.bf-exit-intent-headline { font-size: 22px !important; font-weight: 800 !important; margin: 0 0 10px !important; color: #fff !important; } .bf-exit-intent-subheadline { font-size: 18px !important;
  margin: 0 0 15px !important; color: #fff !important; } /* --------------------------------------------- Elenco puntato --------------------------------------------- */ .bf-exit-intent-bullets { list-style: none !important; padding: 0 !important; margin: 0 0 20px !important; } .bf-exit-intent-bullets li { margin-bottom: 6px !important; padding-left: 20px !important;
  position: relative !important; color: #fff !important; } .bf-exit-intent-bullets li::before { content: "•" !important; color: #d32c2c !important; position: absolute !important; left: 0 !important; top: 0 !important; }

/* --------------------------------------------- Pulsante CTA --------------------------------------------- */ .bf-exit-intent-cta { display: inline-block !important;
  background-color: #d32c2c !important; color: #fff !important; padding: 10px 20px !important; border-radius: 4px !important; font-size: 16px !important; font-weight: 600 !important; text-decoration: none !important;
} .bf-exit-intent-cta:hover { background-color: #b71c1c !important; } /* --------------------------------------------- Modifiche responsive per viewport molto piccoli --------------------------------------------- */ @media only screen and (max-height: 700px) { .varify-exitIntent { max-height: 75% !important; } } @media only screen and (max-width: 380px) { .varify-exitIntent-content { padding: 20px !important; } .bf-exit-intent-headline { font-size: 19px !important; } .bf-exit-intent-subheadline { font-size: 16px !important; } }

Copia