Use our campaign booster to get the most out of Black Friday

In this video, we show you how to test the code snippets.

Your Black Friday setup in just three steps

For many marketers, Black Friday is one of the strongest sales days of the year. The targets are high, the competition even higher. Nevertheless, the results often fall short of expectations.

The main reason: campaigns and offers on the website are not perceived clearly enough. Users overlook discounts, promotions get lost in the layout and valuable conversion potential remains untapped.

Important: Activate the respective campaign booster in your visual editor
Copy the customized JavaScript & CSS and check it in your setup
Update your content and put the test live after successful QA

Note: Varify assumes no responsibility for the functionality of the code and information. It is the user's responsibility to check the test code thoroughly and implement it correctly.

How our customers use Varify on Black Friday

Flexibility without developers

Change the styling and quickly add campaign boosters yourself without having to rely on the dev department. This saves time and you can react immediately.

Quick landing page tests

Thanks to our minimal script, you can design landing pages in your CMS and test them directly with redirects - quickly, easily and without long waiting times.

Simple styling for Black Friday

Do you want to customize your store for Black Friday or highlight certain elements by moving them around? With the visual editor, you can change the design in a flash without having to dig deep into the code.

Precise targeting for campaigns

Test how certain target groups react to your changes by targeting them specifically - with UTM parameters, device profiles or countries. This way, you know exactly what works - and for whom.

Customized JS & CSS for the Varify Campaign Booster

Exit Intent

You can display a pop-up with an image that appears at a specific time. You can customize exactly when it appears.

Additional JavaScript



window.varify.helpers.onDomLoaded(() => {
  // === BASIC SETTINGS (adjust if needed) ===
  const POPUP_SESSION_KEY = 'varifyExitPopupSeen'; // sessionStorage key
  const targetUrl = 'https://varify.io/webinars'; // landing page URL
  const imageSrc = 'https://images.varify.io/bb686c8cd78a3cad7c19b26d7df61c2b634f336481bd52130e1c1d570343f346/example_bf.jpg'; // popup image
  const imageAlt = 'Black Friday Deal'; // image alt text
  const popupDelayMs = 1000; // delay before popup opens (in ms)

    function isInEditor() {
    const p = new URLSearchParams(location.search);
    return p.has('varify-variation-name') || p.has('varify-variation-id');
  }
  if (isInEditor()) 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 || !contentDiv) return;

    const alreadySeen = sessionStorage.getItem(POPUP_SESSION_KEY) === '1';

    // move close button into modal so it overlays the image
    if (closeBtn && closeBtn.parentElement !== modal) {
      modal.appendChild(closeBtn);
    }

    // === replace popup content with clickable image ===
    contentDiv.innerHTML = '';
    const link = document.createElement('a');
    link.href = targetUrl;
    link.target = '_blank';
    link.rel = 'noopener noreferrer';

    const img = document.createElement('img');
    img.src = imageSrc;
    img.alt = imageAlt;
    img.style.display = 'block';
    img.style.width = '100%';
    img.style.height = 'auto';

    link.appendChild(img);
    contentDiv.appendChild(link);

    // === always block existing exit-intent triggers ===
    const stopExitIntent = (evt) => {
      if (
        (evt.type === 'mouseleave' || evt.type === 'mouseout') &&
        (evt.relatedTarget === null || evt.clientY  {
      sessionStorage.setItem(POPUP_SESSION_KEY, '1');
      wrapper.classList.add('vf-show');
    };
    setTimeout(openPopup, popupDelayMs);

    // === close helpers ===
    const closePopup = () => {
      wrapper.classList.remove('vf-show');
    };

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

    // close via click outside modal
    backdrop.addEventListener('click', (e) => {
      if (!modal.contains(e.target)) {
        closePopup();
      }
    });

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

/* Wrapper with your background */ .varify-code-block { background: #f5f2f0; border-radius: 8px; border: 1px solid #e0ddd9; padding: 0; position: relative; font-family: Consolas, Menlo, Monaco, "Fira Code", monospace; margin-bottom: 24px; } /* Code area */ .varify-code-block pre { margin: 0; padding: 16px 18px; overflow: auto; white-space: pre; } .varify-code-block code { color: #333; font-size: 13px; line-height: 1.55; display: block; } /* Copy button - fully neutralized, no more blue */ .varify-copy-btn { all: unset !important; /* removes ALL default/theme/elementor styles */ display: inline-block !important; position: absolute !important; top: 10px !important; right: 10px !important; padding: 6px 10px !important; border-radius: 6px !important; background: rgba(255,255,255,0.4) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255,255,255,0.35) !important; color: #333 !important; font-size: 11px !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; } /* Optional feedback after copy */ .varify-copy-btn.copied { background: rgba(80, 200, 120, 0.55) !important; color: #fff !important; } document.addEventListener("click", function (e) { const btn = e.target.closest(".varify-copy-btn"); if (!btn) return; const codeEl = btn.parentElement.querySelector("code"); if (!codeEl) return; const code = codeEl.innerText; if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(code); } else { const ta = document.createElement("textarea"); ta.value = code; document.body.appendChild(ta); ta.select(); document.execCommand("copy"); ta.remove(); } btn.classList.add("copied"); btn.textContent = "Copied!"; setTimeout(() => { btn.classList.remove("copied"); btn.textContent = "Copy"; }, 1400); });

Additional CSS




/* wrapper: hidden by default, visible when vf-show is added */
.varify-exitIntent-wrapper {
  display: none;
}

.varify-exitIntent-wrapper.vf-show {
  display: block;
}

/* backdrop: full-screen overlay */
.varify-exitIntent-wrapper.vf-show .varify-exitIntent-backdrop {
  position: fixed;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2147483647;
}

/* modal: pure container around the image */
.varify-exitIntent {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* remove padding: pure image modal */
.varify-exitIntent-content {
  padding: 0 !important;
}

/* image should never be larger than viewport height */
.varify-exitIntent-content img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
}

/* hide original header bar if present */
.varify-exitIntent-header {
  display: none !important;
}

/* close button overlay above the image */
.varify-exitIntent-close {
  position: absolute !important;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff !important;
  cursor: pointer;
  z-index: 2147483647;
}

Trust the leading A/B testing platform developed in Germany

Numbers from BuiltWith.com: Comparison of German A/B testing platforms. Data as of October 2025.

Try it free for 15 days

Exit Intent

This popup contains text, bullet points and a button. You can customize the text as you wish and specify when the popup should appear to inform your users in a targeted manner.

Additional JavaScript



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

  // Unique key for this popup. If you duplicate the test, change this key.
  const POPUP_SESSION_KEY = 'varifyBFContentPopupSeen';

  // When should the popup appear after page load (in milliseconds)?
  const POPUP_DELAY_MS = 1000;

  // 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

  // ================================
  // 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;

  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 || !contentDiv) return;

    const alreadySeen = sessionStorage.getItem(POPUP_SESSION_KEY) === '1';

    // Always block the original exit-intent logic of the site
    const stopExitIntent = (evt) => {
      if (
        (evt.type === 'mouseleave' || evt.type === 'mouseout') &&
        (evt.relatedTarget === null || evt.clientY <= 0) ) { evt.stopImmediatePropagation(); if (evt.preventDefault) evt.preventDefault(); } }; document.addEventListener('mouseleave', stopExitIntent, true); document.addEventListener('mouseout', stopExitIntent, true); // If shown once in this session: hide wrapper and stop everything if (alreadySeen) { wrapper.classList.remove('vf-show'); wrapper.style.display = 'none'; return; } // Ensure close button is inside the modal so it overlays the content if (closeBtn && closeBtn.parentElement !== modal) { modal.appendChild(closeBtn); } // Build popup content 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);

    // Open popup after delay (once per session)
    const openPopup = () => {
      sessionStorage.setItem(POPUP_SESSION_KEY, '1');
      wrapper.classList.add('vf-show');
    };
    setTimeout(openPopup, POPUP_DELAY_MS);

    // Close helpers
    const closePopup = () => {
      wrapper.classList.remove('vf-show');
    };

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

    // Close via click outside modal
    backdrop.addEventListener('click', (e) => {
      if (!modal.contains(e.target)) {
        closePopup();
      }
    });

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

/* Code area */
.varify-code-block pre {
margin: 0;
padding: 16px 18px;
overflow: auto;
white-space: pre;
}

.varify-code-block code {
color: #333;
font-size: 13px;
line-height: 1.55;
display: block;
}

/* Copy button - fully neutralized, no more blue */
.varify-copy-btn {
all: unset !important; /* removes ALL default/theme/elementor styles */

display: inline-block !important;
position: absolute !important;
top: 10px !important;
right: 10px !important;

padding: 6px 10px !important;
border-radius: 6px !important;

background: rgba(255,255,255,0.4) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;

border: 1px solid rgba(255,255,255,0.35) !important;

color: #333 !important;
font-size: 11px !important;
font-weight: 600 !important;
text-decoration: none !important;

cursor: pointer !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Optional feedback after copy */
.varify-copy-btn.copied {
background: rgba(80, 200, 120, 0.55) !important;
color: #fff !important;
}
document.addEventListener(„click“, function (e) { const btn = e.target.closest(„.varify-copy-btn“); if (!btn) return; const codeEl = btn.parentElement.querySelector(„code“); if (!codeEl) return; const code = codeEl.innerText; if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(code); } else { const ta = document.createElement(„textarea“); ta.value = code; document.body.appendChild(ta); ta.select(); document.execCommand(„copy“); ta.remove(); } btn.classList.add(„copied“); btn.textContent = „Copied!“; setTimeout(() => { btn.classList.remove(„copied“); btn.textContent = „Copy“; }, 1400); });

Additional CSS



/* ================================
   BASE POPUP BEHAVIOR
   ================================ */

/* Wrapper hidden by default, visible when .vf-show is added via JS */
.varify-exitIntent-wrapper {
  display: none;
}

.varify-exitIntent-wrapper.vf-show {
  display: block;
}

/* Backdrop: dark overlay, only when wrapper has .vf-show */
.varify-exitIntent-backdrop {
  display: none !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
}

.varify-exitIntent-wrapper.vf-show .varify-exitIntent-backdrop {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed;
  inset: 0;
  z-index: 2147483646;
}

/* Optional: if you ever want to lock scroll on the page:
.vf-no-scroll {
  overflow: hidden !important;
}
*/

/* Header not needed for this design */
.varify-exitIntent-header {
  display: none !important;
}

/* ================================
   MODAL STYLING (BLACK FRIDAY LOOK)
   ================================ */

.varify-exitIntent {
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 0 8px rgb(68 64 64 / 30%) !important;
  width: 540px !important;
  max-width: 80% !important;
  max-height: 80% !important;
  position: relative !important;
  z-index: 2147483647 !important;
  /* above backdrop, below close button */
  overflow: visible !important;
  /* do not cut off the close button */
}

/* If your HTML has a .varify-exitIntent-inner: scroll only inside */
.varify-exitIntent-inner {
  max-height: 80vh;
  overflow: auto;
}

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

/* ================================
   TEXT STYLES
   ================================ */

.bf-exit-intent-headline {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #fff;
}

.bf-exit-intent-subheadline {
  font-size: 18px;
  margin: 0 0 15px;
  color: #fff;
}

.bf-exit-intent-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.bf-exit-intent-bullets li {
  margin-bottom: 6px;
  padding-left: 20px;
  position: relative;
  color: #fff;
}

.bf-exit-intent-bullets li:before {
  content: "-";
  color: #d32c2c;
  position: absolute;
  left: 0;
  top: 0;
}

/* CTA button */
.bf-exit-intent-cta {
  display: inline-block;
  background-color: #d32c2c;
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none !important;
}

.bf-exit-intent-cta:hover {
  background-color: #b71c1c;
}

/* ================================
   CLOSE BUTTON (X) - ALWAYS ON TOP
   ================================ */

.varify-exitIntent-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 2147483648 !important;
  /* above everything */
  color: #fff !important;
}

.varify-exitIntent-close-icon {
  width: 16px;
  height: 16px;
  color: #fff !important;
}

Black Friday Subtle Notification

Notification

A discreet notification that appears at the bottom left. This allows you to redirect the user to another action page without disturbing them - perfect for subtle call-to-actions.

Additional JavaScript




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

  // Notification should be shown only once per browser session
  const SESSION_KEY = 'varifyBFNotificationSeen';

  // Text content
  const INFO_TEXT = 'Black Friday Deal';                      // small badge
  const HEADLINE_TEXT = 'Black Friday Special';               // main title
  const SUBHEADLINE_TEXT = 'Save 30% on everything today';    // sub text
  const CTA_TEXT = 'Save now →';                              // CTA label

  // Link for CTA and full notification
  const CTA_LINK = 'https://example.com/black-friday';

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

  function isInEditor() {
    const p = new URLSearchParams(location.search);
    return p.has('varify-variation-name') || p.has('varify-variation-id');
  }
  if (isInEditor()) return;

  window.varify.helpers.waitFor('.varify-notification-content', () => {
    const contentDiv = document.querySelector('.varify-notification-content');
    const wrapper = document.querySelector('.varify-notification-wrapper');
    const notification = document.querySelector('.varify-notification');
    const closeBtn = document.querySelector('.varify-notification-close');
    const wrapperLink = document.querySelector('.varify-notification-link');

    if (!contentDiv || !notification) return;

    const alreadySeen = sessionStorage.getItem(SESSION_KEY) === '1';

    // === If already seen: hide everything immediately and do nothing further ===
    if (alreadySeen) {
      if (wrapper) wrapper.style.display = 'none';
      notification.style.display = 'none';
      return;
    }

    // === First session review – set content ===

    // Info badge
    let infoDiv = contentDiv.querySelector('.webinar-info');
    if (!infoDiv) {
      infoDiv = document.createElement('div');
      infoDiv.className = 'webinar-info';
      contentDiv.insertBefore(infoDiv, contentDiv.firstChild);
    }
    infoDiv.textContent = INFO_TEXT;

    // Headline
    const headlineEl = contentDiv.querySelector('.varify-notification-headline');
    if (headlineEl) {
      headlineEl.textContent = HEADLINE_TEXT;
    }

    // Subheadline
    const subEl = contentDiv.querySelector('.varify-notification-text');
    if (subEl) {
      subEl.textContent = SUBHEADLINE_TEXT;
    }

    // CTA inside notification
    let ctaEl = contentDiv.querySelector('.webinar-signup');
    if (!ctaEl) {
      ctaEl = document.createElement('a');
      ctaEl.className = 'webinar-signup';
      contentDiv.appendChild(ctaEl);
    }
    ctaEl.textContent = CTA_TEXT;
    ctaEl.href = CTA_LINK;
    ctaEl.target = '_blank';
    ctaEl.rel = 'noopener noreferrer';

    // whole notification clickable
    if (wrapperLink) {
      wrapperLink.href = CTA_LINK;
      wrapperLink.target = '_blank';
      wrapperLink.rel = 'noopener noreferrer';
    }

    // Mark as 'seen' from now on
    sessionStorage.setItem(SESSION_KEY, '1');

    // Close-Button: versteckt Notification komplett (Session-Flag bleibt)
    if (closeBtn) {
      closeBtn.addEventListener('click', (e) => {
        e.preventDefault();
        if (wrapper) wrapper.style.display = 'none';
        notification.style.display = 'none';
      });
    }
  });
});

/* Code area */
.varify-code-block pre {
margin: 0;
padding: 16px 18px;
overflow: auto;
white-space: pre;
}

.varify-code-block code {
color: #333;
font-size: 13px;
line-height: 1.55;
display: block;
}

/* Copy button - fully neutralized, no more blue */
.varify-copy-btn {
all: unset !important; /* removes ALL default/theme/elementor styles */

display: inline-block !important;
position: absolute !important;
top: 10px !important;
right: 10px !important;

padding: 6px 10px !important;
border-radius: 6px !important;

background: rgba(255,255,255,0.4) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;

border: 1px solid rgba(255,255,255,0.35) !important;

color: #333 !important;
font-size: 11px !important;
font-weight: 600 !important;
text-decoration: none !important;

cursor: pointer !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

Additional CSS



/* Black box with white text */
.varify-notification.v_animated.v_animation.varify-init {
  background-color: #000 !important;
  color: #fff !important;
}

/* Headline and text in white */
.varify-notification-headline,
.varify-notification-text {
  color: #fff !important;
}

/* Text margin at the bottom */
.varify-notification-text {
  margin-bottom: 5px !important;
}

/* CTA text style */
.webinar-signup {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.webinar-signup:hover {
  text-decoration: underline !important;
}

/* Make the close icon (X) visible */
.varify-notification-close {
  color: #fff !important;
}

/* Bubble design for "Black Friday Deal" */
.webinar-info {
  background-color: #d32c2c !important;
  /* red bubble */
  color: #fff !important;
  /* white text */
  border-radius: var(--border-radius--200) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 2px 6px !important;
  max-width: 160px !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  margin-top: 6px !important;
}

/* ---------- MOBILE ADJUSTMENTS ---------- */
@media (max-width: 767px) {
  .varify-notification-headline {
    font-size: 14px !important;
  }

  .varify-notification-text {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .webinar-info {
    font-size: 10px !important;
    padding: 1px 4px !important;
    max-width: 120px !important;
    margin-bottom: 6px !important;
  }

  .webinar-signup {
    font-size: 12px !important;
  }
}

@media (max-width: 576px) {

  /* Smaller overall box */
  .varify-notification {
    padding: 8px 10px !important;
    min-width: 200px !important;
    max-width: 260px !important;
    border-radius: 3px !important;
    bottom: 20px !important;
    left: 20px !important;
  }

  /* Smaller headline */
  .varify-notification-headline {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }

  /* Smaller subheadline */
  .varify-notification-text {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  /* Smaller badge */
  .webinar-info {
    font-size: 10px !important;
    padding: 1px 4px !important;
    max-width: 100px !important;
    margin-bottom: 4px !important;
  }

  /* Smaller Close-X */
  .varify-notification-close {
    font-size: 16px !important;
    width: 12px !important;
    height: 12px !important;
    right: 10px !important;
    margin-top: -6px !important;
  }

}

Black Friday Information Bar

Information bar

With the Info Bar, you can display three different contents and replace the SVG with your own design. The tags can also be customized and the entire element is linked so that you can easily link to it.

Additional JavaScript




window.varify.helpers.waitFor('.varify-usp-bar', (bar) => {
  // === SETTINGS FOR YOU ===
  const headlines = [
    '30% OFF EVERYTHING',
    '30% OFF EVERYTHING',
    '30% OFF EVERYTHING'
  ];

  const mobileHeadline = '30% OFF EVERYTHING - MOBILE SPECIAL';

  const targetUrl = 'https://example.com/black-friday';

  const iconVariant = 'cross';

  const crossIconSvg =
    '';

  const defaultIconSvg =
    '';

  const isMobile = window.matchMedia('(max-width: 767px)').matches;

  if (isMobile) {
    bar.classList.add('varify-usp-bar--mobile-single');
  }

  // === APPLY TEXTS ===
  bar.querySelectorAll('.varify-usp-bar-headline').forEach((el, idx) => {
    if (isMobile) {
      el.textContent = mobileHeadline;
    } else {
      el.textContent = headlines[idx] || headlines[0];
    }
  });

  // === APPLY ICONS ===
  bar.querySelectorAll('.varify-usp-bar-icon').forEach((el) => {
    el.innerHTML = iconVariant === 'cross' ? crossIconSvg : defaultIconSvg;
  });

  // === MAKE THE BAR CLICKABLE ===
  bar.addEventListener('click', (evt) => {
    if (evt.target.closest('.varify-usp-bar-close')) return;
    window.location.href = targetUrl;
  });

  // ------------------------------------------------------------------
  // === MOBILE FEATURE (NEW - REST UNCHANGED) ===
  // ------------------------------------------------------------------
  if (isMobile) {
    // only the first USP remains visible
    const usps = bar.querySelectorAll('.varify-usp-bar-usp');
    usps.forEach((usp, index) => { {
      if (index > 0) {
        usp.style.display = 'none';
      }
    });
  }
});

/* Code area */
.varify-code-block pre {
margin: 0;
padding: 16px 18px;
overflow: auto;
white-space: pre;
}

.varify-code-block code {
color: #333;
font-size: 13px;
line-height: 1.55;
display: block;
}

/* Copy button - fully neutralized, no more blue */
.varify-copy-btn {
all: unset !important; /* removes ALL default/theme/elementor styles */

display: inline-block !important;
position: absolute !important;
top: 10px !important;
right: 10px !important;

padding: 6px 10px !important;
border-radius: 6px !important;

background: rgba(255,255,255,0.4) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;

border: 1px solid rgba(255,255,255,0.35) !important;

color: #333 !important;
font-size: 11px !important;
font-weight: 600 !important;
text-decoration: none !important;

cursor: pointer !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

Additional CSS




/* Black Friday styling: black background, white text, hide subtext */
.varify-usp-bar-wrapper,
.varify-usp-bar {
  background-color: #000 !important;
  color: #fff !important;
}

.varify-usp-bar-headline {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.varify-usp-bar-text {
  display: none !important;
  /* Remove subheadline; only headlines remain */
}

.varify-usp-bar-icon svg {
  fill: #fff !important;
  stroke: #fff !important;
  width: 24px;
  height: 24px;
}

/* Shows the mouse pointer as a „link hand“ over the entire bar */
.varify-usp-bar-wrapper {
  cursor: pointer;
}

/* Ensures that the closing X remains visible and is not affected by the icon swap */
.varify-usp-bar-close {
  color: #ffffffff !important;
  /* White X on black background */
  cursor: default;
  /* Default cursor to differentiate the close button from the clickable rest */
}

@media (max-width: 767px) {
  .varify-usp-bar.varify-usp-bar--mobile-single {
    text-align: center;
  }

  /* Customize .varify-usp-bar-item to your column class */
  .varify-usp-bar.varify-usp-bar--mobile-single .varify-usp-bar-item:not(:first-child) {
    display: none;
  }

  .varify-usp-bar-icon {
    width: 61px !important;
    height: 61px !important;
  }
}

Black Friday Exit Intent - Image

Exit Intent (Desktop)

When a user wants to leave the page, a pop-up with an image appears. Perfect for attracting attention once again before the user leaves the page.

Additional JavaScript




window.varify.helpers.onDomLoaded(() => {

  /* === YOUR SETTINGS === */
  const imgSrc = "https://images.varify.io/bb686c8cd78a3cad7c19b26d7df61c2b634f336481bd52130e1c1d570343f346/example_bf.jpg";
  const targetUrl = "https://example.com/black-friday";  // Link for the image
  const sessionKey = "varify_exit_popup_seen";           // Do not change
  /* ========================= */

  // Do not run in 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(sessionKey)) 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) return;

    // Replace content with image popup
    contentDiv.innerHTML = "";
    const link = document.createElement("a");
    link.href = targetUrl;
    link.target = "_blank";
    link.rel = "noopener noreferrer";

    const img = document.createElement("img");
    img.src = imgSrc;
    img.alt = "Black Friday Image";
    img.style.display = "block";
    img.style.width = "100%";
    img.style.height = "auto";

    link.appendChild(img);
    contentDiv.appendChild(link);

    // Exit intent trigger
    const exitHandler = (e) => {
      if (e.clientY  {
      if (!modal.contains(evt.target)) closePopup();
    });

    closeBtn.addEventListener("click", (e) => {
      e.preventDefault();
      closePopup();
    });

    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape") closePopup();
    });

  });
});

Additional CSS




/* Backdrop hidden by default */
.varify-exitIntent-backdrop {
  display: none !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
  align-items: center;
}

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

/* Prevent scroll when popup is open */
.vf-no-scroll {
  overflow: hidden !important;
}

/* Content is just the image, so remove padding */
.varify-exitIntent-content {
  padding: 0 !important;
}

/* Modal background black */
.varify-exitIntent {
  background: #000 !important;
  border-radius: 8px !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  width: 540px;
  max-width: 90%;
  max-height: 90%;
  overflow: hidden;
  /* important so image never overflows */
  position: relative;
}

/* Close button always visible above image */
.varify-exitIntent-close {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.varify-exitIntent-close-icon {
  width: 14px;
  height: 14px;
  color: #000 !important;
}

.varify-exitIntent-header {
  display: none !important;
}

/* Code area */
.varify-code-block pre {
margin: 0;
padding: 16px 18px;
overflow: auto;
white-space: pre;
}

.varify-code-block code {
color: #333;
font-size: 13px;
line-height: 1.55;
display: block;
}

/* Copy button - fully neutralized, no more blue */
.varify-copy-btn {
all: unset !important; /* removes ALL default/theme/elementor styles */

display: inline-block !important;
position: absolute !important;
top: 10px !important;
right: 10px !important;

padding: 6px 10px !important;
border-radius: 6px !important;

background: rgba(255,255,255,0.4) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;

border: 1px solid rgba(255,255,255,0.35) !important;

color: #333 !important;
font-size: 11px !important;
font-weight: 600 !important;
text-decoration: none !important;

cursor: pointer !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Optional feedback after copy */
.varify-copy-btn.copied {
background: rgba(80, 200, 120, 0.55) !important;
color: #fff !important;
}

Black Friday Exit Intent - Content

Exit Intent (Desktop)

This popup appears when the user wants to leave the page and contains text, bullet points and a button. You can customize the content to your liking to bring the user back.

Additional JavaScript



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();
    });
  });
});

/* Code area */
.varify-code-block pre {
margin: 0;
padding: 16px 18px;
overflow: auto;
white-space: pre;
}

.varify-code-block code {
color: #333;
font-size: 13px;
line-height: 1.55;
display: block;
}

/* Copy button - fully neutralized, no more blue */
.varify-copy-btn {
all: unset !important; /* removes ALL default/theme/elementor styles */

display: inline-block !important;
position: absolute !important;
top: 10px !important;
right: 10px !important;

padding: 6px 10px !important;
border-radius: 6px !important;

background: rgba(255,255,255,0.4) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;

border: 1px solid rgba(255,255,255,0.35) !important;

color: #333 !important;
font-size: 11px !important;
font-weight: 600 !important;
text-decoration: none !important;

cursor: pointer !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

Additional CSS


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

/* Code area */
.varify-code-block pre {
margin: 0;
padding: 16px 18px;
overflow: auto;
white-space: pre;
}

.varify-code-block code {
color: #333;
font-size: 13px;
line-height: 1.55;
display: block;
}

/* Copy button - fully neutralized, no more blue */
.varify-copy-btn {
all: unset !important; /* kills ALL default/theme/Elementor styles */

display: inline-block !important;
position: absolute !important;
top: 10px !important;
right: 10px !important;

padding: 6px 10px !important;
border-radius: 6px !important;

background: rgba(255,255,255,0.4) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;

border: 1px solid rgba(255,255,255,0.35) !important;

color: #333 !important;
font-size: 11px !important;
font-weight: 600 !important;
text-decoration: none !important;

cursor: pointer !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Optional feedback after copy */
.varify-copy-btn.copied {
background: rgba(80, 200, 120, 0.55) !important;
color: #fff !important;
}

What our PRO users say

The best possible database is essential for a clean A/B test analysis. Thanks to the simple integration of Varify and BigQuery, tests can now be evaluated and analyzed quickly and easily directly in Varify. What I particularly appreciate about the collaboration is that the entire Varify team is continuously working on further developments - both on the platform itself and on the seamless connection to BigQuery.

Niko SpiesCRO Freelancer

Experimentation is rapidly gaining ground, but that also means a lot of newcomers to the field aren't familiar with or have access to technical resources for a sound analysis of their experiment results. Verify aims to lower that bar significantly by integrating BigQuery to the platform. No more struggles with GA4's HLL++ user reporting or the need for manual queries (and possibly many hours of chatGPT prompts to finally get where you want to be)! I hope this is an example that more companies will follow. I love the dedication of the Varify team. Awesome people doing awesome work. Thanks, guys!

Bas LindersProduct Owner CRO

Varify Pro feature

Account & Success Manager

Outlier Smoothing

BigQuery Integration

Experiment API

Geotargeting

Flexible payment options

Custom DPA

Custom CNAME

Custom onboarding

Export results

Migration from Other Testing Tool

Slack Support

Digital Card Set

Learn more about Varify Pro

Upgrade to PRO now and save as an existing customer

One click is all it takes to start your upgrade and use all the advanced features of Varify.io.

Use our campaign booster to get the most out of Black Friday

Your Black Friday setup in just three steps

Important: Activate the respective campaign booster in your visual editor

Copy the customized JavaScript & CSS and check it in your setup

Update your content and put the test live after successful QA

How our customers use Varify on Black Friday

Customized JS & CSS for the Varify Campaign Booster

Exit Intent

Trust the leading A/B testing platform developed in Germany

Exit Intent

Black Friday Subtle Notification

Notification

Black Friday Information Bar

Information bar

Black Friday Exit Intent - Image

Exit Intent (Desktop)

Black Friday Exit Intent - Content

Exit Intent (Desktop)

What our PRO users say

Varify Pro feature

Upgrade to PRO now and save as an existing customer

Platform

Knowledge

Compare

Support

Company

More about us

Use our campaign booster to get the most out of Black Friday

Your Black Friday setup in just three steps

Important: Activate the respective campaign booster in your visual editor

Copy the customized JavaScript & CSS and check it in your setup

Update your content and put the test live after successful QA

How our customers use Varify on Black Friday

Customized JS & CSS for the Varify Campaign Booster

Black Friday PopUp - Image

Exit Intent

Trust the leading A/B testing platform developed in Germany

Black Friday PopUp - Content

Exit Intent

Black Friday Subtle Notification

Notification

Black Friday Information Bar

Information bar

Black Friday Exit Intent - Image

Exit Intent (Desktop)

Black Friday Exit Intent - Content

Exit Intent (Desktop)

What our PRO users say

Varify Pro feature

Upgrade to PRO now and save as an existing customer

Platform

Knowledge

Compare

Support

Company

More about us