Use our campaign booster to get the most out of 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();
    });
  });
});


    

/* ---------------------------------------------
   Backdrop hidden by default
   --------------------------------------------- */
.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;
}

/* ---------------------------------------------
   Show popup when wrapper has .vf-show
   --------------------------------------------- */
.varify-exitIntent-wrapper.vf-show .varify-exitIntent-backdrop {
  display: flex !important;
}

/* ---------------------------------------------
   Prevent page from scrolling while popup is open
   --------------------------------------------- */
.vf-no-scroll {
  overflow: hidden !important;
}

/* ---------------------------------------------
   Modal styling (for popup with content)
   --------------------------------------------- */
.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;
}

/* ---------------------------------------------
   Content Area
   --------------------------------------------- */
.varify-exitIntent-content {
  padding: 30px !important;
  text-align: left !important;
}

/* ---------------------------------------------
   Hide default unused header block
   --------------------------------------------- */
.varify-exitIntent-header {
  display: none !important;
}

/* ---------------------------------------------
   Close button (always visible above content)
   --------------------------------------------- */
.varify-exitIntent-close {
  position: absolute !important;
  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 {
  width: 14px !important;
  height: 14px !important;
  color: #000 !important;
}

/* ---------------------------------------------
   Typography for content popup
   --------------------------------------------- */
.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;
}

/* ---------------------------------------------
   Bullet list
   --------------------------------------------- */
.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;
}

/* ---------------------------------------------
   CTA button
   --------------------------------------------- */
.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;
}

/* ---------------------------------------------
   Responsive tweaks for very small viewports
   --------------------------------------------- */
@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;
  }
}

Copy