Aprovecha nuestro impulsor de campañas para sacar el máximo partido al Black Friday.

En este vídeo te mostramos cómo puedes probar los fragmentos de código.

Tres pasos para configurar tu Black Friday

Para muchos profesionales del marketing, el Black Friday es uno de los días del año con mayor volumen de ventas. Los objetivos son ambiciosos y la competencia, aún mayor. Sin embargo, los resultados suelen quedar por debajo de las expectativas.

La razón principal: las campañas y ofertas no se perciben con suficiente claridad en el sitio web. Los usuarios pasan por alto los descuentos, las promociones se pierden en el diseño y se desperdicia un valioso potencial de conversión.

Importante: activa el potenciador de campaña correspondiente en tu editor visual.
Copia el JavaScript y CSS personalizados y compruébalos en tu configuración.
Revisa tu contenido y publica la prueba una vez superado el control de calidad.

Nota: Varify no se hace responsable del funcionamiento del código y la información. Es responsabilidad del usuario comprobar minuciosamente el código de prueba e implementarlo correctamente.

Así utilizan nuestros clientes Varify en el Black Friday

Flexibilidad sin desarrolladores

Cambia el estilo y añade rápidamente potenciadores de campaña sin tener que depender del departamento de desarrollo. Esto te ahorrará tiempo y te permitirá reaccionar de inmediato.

Pruebas rápidas de páginas de destino

Gracias a nuestro script mínimo, puedes diseñar páginas de destino en tu CMS y probarlas directamente con redireccionamientos: rápido, sencillo y sin largas esperas.

Estilo sencillo para el Black Friday

¿Quieres adaptar tu tienda al Black Friday o destacar determinados elementos cambiándolos de sitio? Con el editor visual puedes modificar el diseño en un abrir y cerrar de ojos sin tener que modificar el código.

Segmentación precisa para campañas

Comprueba cómo reaccionan determinados grupos objetivo ante tus cambios dirigiéndote a ellos de forma específica, con parámetros UTM, perfiles de dispositivos o países. Así sabrás exactamente qué funciona y para quién.

JS y CSS adaptados para las campañas de Varify Booster

Intención de salida

Puedes mostrar una ventana emergente con una imagen que aparecerá en un momento determinado. Tú mismo puedes ajustar cuándo aparecerá exactamente.

JavaScript adicional



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 con su fondo */ .varify-code-block { fondo: #f5f2f0; border-radius: 8px; borde: 1px sólido #e0ddd9; padding: 0; posición: relativa; font-family: Consolas, Menlo, Monaco, "Fira Code", monospace; margin-bottom: 24px; } /* Área de código */ .varify-code-block pre { margin: 0 padding: 16px 18px; overflow: auto; white-space: pre; } .varify-code-block code { color: #333; font-size: 13px; altura de línea: 1.55; display: block; } /* Botón de copia - totalmente neutralizado, no más azul */ .varify-copy-btn { all: unset !important; /* elimina TODOS los estilos por defecto/tema/elemento */ display: inline-block !important; position: absolute !important; top: 10px !important; right: 10px !important; padding: 6px 10px !important; border-radius: 6px !important; fondo: rgba(255,255,255,0.4) !importante; filtro de fondo: blur(12px) !importante; -webkit-backdrop-filter: blur(12px) !important; borde: 1px sólido rgba(255,255,255,0.35) !importante; color: #333 !important; font-size: 11px !important; font-weight: 600 !important; text-decoration: none !important; cursor: puntero !importante; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; } /* Feedback opcional después de copiar */ .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 = código; document.body.appendChild(ta); ta.select(); document.execCommand("copiar"); ta.remove(); } btn.classList.add("copiado"); btn.textContent = "¡Copiado!"; setTimeout(() => { btn.classList.remove("copiado"); btn.textContent = "Copiado"; }, 1400); });

CSS adicional




/* envoltura: oculta por defecto, visible cuando se añade vf-show */ .varify-exitIntent-wrapper { display: none; } .varify-exitIntent-wrapper.vf-show { display: block; } /* fondo: superposición a pantalla completa */
.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: contenedor puro alrededor de la imagen */ .varify-exitIntent { position: relative; max-width: 90vw; max-height: 90vh; background: transparent; border: none; box-shadow: none; }

/* eliminar relleno: modal de imagen pura */ .varify-exitIntent-content { padding: 0 !important; } /* la imagen nunca debe ser más grande que la altura de la ventana gráfica */ .varify-exitIntent-content img { display: block; width: 100%; height: auto;
  altura máxima: 90vh; ajuste del objeto: contener; } /* ocultar la barra de encabezado original si está presente */ .varify-exitIntent-header { visualización: ninguna !importante; } /* superposición del botón de cierre sobre la imagen */ .varify-exitIntent-close { posición: absoluta !importante; arriba: 12px;
  derecha: 12px; ancho: 24px; altura: 24px; display: flex !important; alinear elementos: centro; justificar contenido: centro; fondo: transparente; color: #fff !important; cursor: puntero; z-index: 2147483647; }

Confíe en la mayor plataforma de pruebas A/B desarrollada en Alemania

Cifras de BuiltWith.com: Se compararon las plataformas alemanas de pruebas A/B. A partir de octubre de 2025

Prueba gratuita durante 15 días

Intención de salida

Esta ventana emergente contiene texto, viñetas y un botón. Puedes personalizar el texto como desees y determinar cuándo debe aparecer la ventana emergente para informar a tus usuarios de forma específica.

JavaScript adicional



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

/* Wrapper con su fondo */
.varify-code-block {
fondo: #f5f2f0;
border-radius: 8px;
borde: 1px sólido #e0ddd9;
relleno: 0;
posición: relativa;
font-family: Consolas, Menlo, Monaco, „Fira Code“, monospace;
margin-bottom: 24px;
}

/* Área de código */
.varify-code-block pre {
margen: 0;
padding: 16px 18px;
desbordamiento: auto;
espacio en blanco: pre;
}

.varify-code-block código {
color: #333;
font-size: 13px;
altura de línea: 1,55;
visualización: bloque;
}

/* Botón de copia - totalmente neutralizado, no más azul */
.varify-copy-btn {
all: unset !important; /* elimina TODOS los estilos por defecto/temas/elementos */

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

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

fondo: rgba(255,255,255,0.4) !importante;
filtro de fondo: blur(12px) !importante;
-webkit-backdrop-filter: blur(12px) !important;

borde: 1px sólido rgba(255,255,255,0.35) !importante;

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

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

/* Retroalimentación opcional después de copiar */
.varify-copy-btn.copied {
fondo: rgba(80, 200, 120, 0.55) !importante;
color: #fff !importante;
}
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 = „¡Copiado!“; setTimeout(() => { btn.classList.remove(„copied“); btn.textContent = „Copiar“; }, 1400); });

CSS adicional



/* ================================ COMPORTAMIENTO BÁSICO DE LA VENTANA EMERGENTE ================================ */ /* Envoltura oculta por defecto, visible cuando se añade .vf-show a través de JS */ .varify-exitIntent-wrapper { display: none; }

.varify-exitIntent-wrapper.vf-show { display: block; } /* Fondo: superposición oscura, solo cuando el contenedor tiene .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; }

/* Opcional: si alguna vez quieres bloquear el desplazamiento en la página: .vf-no-scroll { overflow: hidden !important; } */ /* No se necesita encabezado para este diseño */ .varify-exitIntent-header { display: none !important; }

/* ================================ ESTILO MODAL (LOOK BLACK FRIDAY) ================================ */ .varify-exitIntent { color de fondo: #000 !important; color: #fff !important; radio del borde: 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; /* por encima del fondo, debajo del botón de cierre */ overflow: visible !important; /* no cortar el botón de cierre */ } /* Si tu HTML tiene un .varify-exitIntent-inner: desplazarse solo dentro */
.varify-exitIntent-inner { max-height: 80vh; overflow: auto; } /* Bloque de contenido */ .varify-exitIntent-content { padding: 30px !important; text-align: left !important; }

/* ================================ ESTILOS DE TEXTO ================================ */ .bf-exit-intent-headline { tamaño de fuente: 22px; grosor de fuente: 800; margen: 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; } /* Botón CTA */ .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; }

/* ================================ BOTÓN CERRAR (X) – SIEMPRE EN LA PARTE SUPERIOR ================================ */ .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; }

Notificación sutil del Black Friday

Notificación

Una notificación discreta que aparece en la parte inferior izquierda. Te permite redirigir al usuario a otra página de acción sin molestarlo, lo que resulta perfecto para llamadas a la acción sutiles.

JavaScript adicional




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

/* Área de código */
.varify-code-block pre {
margen: 0;
padding: 16px 18px;
desbordamiento: auto;
espacio en blanco: pre;
}

.varify-code-block código {
color: #333;
font-size: 13px;
altura de línea: 1,55;
visualización: bloque;
}

/* Botón de copia - totalmente neutralizado, no más azul */
.varify-copy-btn {
all: unset !important; /* elimina TODOS los estilos por defecto/temas/elementos */

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

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

fondo: rgba(255,255,255,0.4) !importante;
filtro de fondo: blur(12px) !importante;
-webkit-backdrop-filter: blur(12px) !important;

borde: 1px sólido rgba(255,255,255,0.35) !importante;

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

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

CSS adicional



/* Cuadro negro con texto blanco */ .varify-notification.v_animated.v_animation.varify-init { color de fondo: #000 !importante; color: #fff !importante; }

/* Título y texto en blanco */ .varify-notification-headline, .varify-notification-text { color: #fff !important; } /* Margen del texto en la parte inferior */ .varify-notification-text { margin-bottom: 5px !important; }

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

/* Hacer visible el icono de cierre (X) */ .varify-notification-close { color: #fff !important; } /* Diseño de burbuja para "Oferta del Black Friday" */ .webinar-info { color de fondo: #d32c2c !important; /* burbuja roja */
  color: #fff !important; /* texto blanco */ 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; } /* ---------- AJUSTES MÓVILES ---------- */ @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; }

  /* Título más pequeño */ .varify-notification-headline { font-size: 13px !important; line-height: 1.2 !important; margin-bottom: 2px !important; } /* Subtítulo más pequeño */ .varify-notification-text { font-size: 11px !important;
    line-height: 1.2 !important; } /* Insignia más pequeña */ .webinar-info { font-size: 10px !important; padding: 1px 4px !important; max-width: 100px !important; margin-bottom: 4px !important; }

  /* X de cierre más pequeño */ .varify-notification-close { font-size: 16px !important; width: 12px !important; height: 12px !important; right: 10px !important; margin-top: -6px !important; } }

Barra de información sobre el Black Friday

Barra de información

Con la barra de información puedes mostrar tres contenidos diferentes y sustituir el SVG por tu propio diseño. Las etiquetas también se pueden personalizar y todo el elemento está vinculado, por lo que puedes volver a enlazarlo fácilmente.

JavaScript adicional




window.varify.helpers.waitFor('.varify-usp-bar', (bar) => { // === CONFIGURACIÓN PARA TI === 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]; } });

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

  // === HACER QUE LA BARRA SEA CLICABLE === bar.addEventListener('click', (evt) => { if (evt.target.closest('.varify-usp-bar-close')) return; window.location.href = targetUrl; }); // ------------------------------------------------------------------ // === FUNCIÓN MÓVIL (NUEVO – RESTO SIN CAMBIOS) === // ------------------------------------------------------------------ if (isMobile) { // solo la primera USP permanece visible const usps = bar.querySelectorAll('.varify-usp-bar-usp');
    usps.forEach((usp, index) => { if (index > 0) { usp.style.display = 'none'; } }); } });

/* Área de código */
.varify-code-block pre {
margen: 0;
padding: 16px 18px;
desbordamiento: auto;
espacio en blanco: pre;
}

.varify-code-block código {
color: #333;
font-size: 13px;
altura de línea: 1,55;
visualización: bloque;
}

/* Botón de copia - totalmente neutralizado, no más azul */
.varify-copy-btn {
all: unset !important; /* elimina TODOS los estilos por defecto/temas/elementos */

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

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

fondo: rgba(255,255,255,0.4) !importante;
filtro de fondo: blur(12px) !importante;
-webkit-backdrop-filter: blur(12px) !important;

borde: 1px sólido rgba(255,255,255,0.35) !importante;

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

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

CSS adicional




/* Estilo Black Friday: fondo negro, texto blanco, ocultar subtítulo */ .varify-usp-bar-wrapper, .varify-usp-bar { color de fondo: #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; /* Eliminar subtítulo; solo quedan los titulares */ } .varify-usp-bar-icon svg {
  fill: #fff !important; stroke: #fff !important; width: 24px; height: 24px; } /* Muestra el puntero del ratón como una „mano izquierda“ sobre toda la barra */ .varify-usp-bar-wrapper { cursor: pointer; }

/* Asegura que la X de cierre permanezca visible y no se vea afectada por el intercambio de iconos */ .varify-usp-bar-close { color: #ffffff !important; /* X blanca sobre fondo negro */ cursor: default; /* Cursor estándar para que el botón de cierre se diferencie del resto de elementos clicables */
} @media (max-width: 767px) { .varify-usp-bar.varify-usp-bar--mobile-single { text-align: center; } /* Adapta .varify-usp-bar-item a tu clase de columna */
  .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 - Imagen

Intención de salida (escritorio)

Cuando un usuario quiere salir de la página, aparece una ventana emergente con una imagen. Es ideal para llamar la atención una vez más antes de que el usuario abandone la página.

JavaScript adicional




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

  });
});

CSS adicional




/* Fondo oculto por defecto */ .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; } /* Mostrar ventana emergente solo cuando el contenedor tiene vf-show */ .varify-exitIntent-wrapper.vf-show .varify-exitIntent-backdrop { display: flex !important; }

/* Evitar el desplazamiento cuando la ventana emergente está abierta */ .vf-no-scroll { overflow: hidden !important; } /* El contenido es solo la imagen, por lo que se elimina el relleno */ .varify-exitIntent-content { padding: 0 !important; } /* Fondo modal negro */
.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; /* importante para que la imagen nunca se desborde */ position: relative; } /* Botón Cerrar siempre visible sobre la imagen */ .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; }

/* Área de código */
.varify-code-block pre {
margen: 0;
padding: 16px 18px;
desbordamiento: auto;
espacio en blanco: pre;
}

.varify-code-block código {
color: #333;
font-size: 13px;
altura de línea: 1,55;
visualización: bloque;
}

/* Botón de copia - totalmente neutralizado, no más azul */
.varify-copy-btn {
all: unset !important; /* elimina TODOS los estilos por defecto/temas/elementos */

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

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

fondo: rgba(255,255,255,0.4) !importante;
filtro de fondo: blur(12px) !importante;
-webkit-backdrop-filter: blur(12px) !important;

borde: 1px sólido rgba(255,255,255,0.35) !importante;

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

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

/* Retroalimentación opcional después de copiar */
.varify-copy-btn.copied {
fondo: rgba(80, 200, 120, 0.55) !importante;
color: #fff !importante;
}

Black Friday Exit Intent - Contenido

Intención de salida (escritorio)

Esta ventana emergente aparece cuando el usuario quiere salir de la página y contiene texto, viñetas y un botón. Puedes personalizar el contenido según tus preferencias para recuperar al usuario.

JavaScript adicional



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

/* Área de código */
.varify-code-block pre {
margen: 0;
padding: 16px 18px;
desbordamiento: auto;
espacio en blanco: pre;
}

.varify-code-block código {
color: #333;
font-size: 13px;
altura de línea: 1,55;
visualización: bloque;
}

/* Botón de copia - totalmente neutralizado, no más azul */
.varify-copy-btn {
all: unset !important; /* elimina TODOS los estilos por defecto/temas/elementos */

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

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

fondo: rgba(255,255,255,0.4) !importante;
filtro de fondo: blur(12px) !importante;
-webkit-backdrop-filter: blur(12px) !important;

borde: 1px sólido rgba(255,255,255,0.35) !importante;

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

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

CSS adicional


/* --------------------------------------------- Fondo oculto por defecto --------------------------------------------- */ .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 ventana emergente cuando el contenedor tiene .vf-show --------------------------------------------- */ .varify-exitIntent-wrapper.vf-show .varify-exitIntent-backdrop { display: flex !important; } /* --------------------------------------------- Evitar que la página se desplace mientras la ventana emergente está abierta --------------------------------------------- */ .vf-no-scroll { overflow: hidden !important; } /* --------------------------------------------- Estilo modal (para ventanas emergentes con contenido) --------------------------------------------- */ .varify-exitIntent { color de fondo: #000 !important; color: #fff !important; radio del borde: 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; } /* --------------------------------------------- Área de contenido --------------------------------------------- */
.varify-exitIntent-content { padding: 30px !important; text-align: left !important; } /* --------------------------------------------- Ocultar bloque de encabezado predeterminado no utilizado --------------------------------------------- */ .varify-exitIntent-header { display: none !important; } /* --------------------------------------------- Botón Cerrar (siempre visible encima del contenido) --------------------------------------------- */ .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; } /* --------------------------------------------- Tipografía para ventana emergente de contenido --------------------------------------------- */ .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; } /* --------------------------------------------- Lista con viñetas --------------------------------------------- */ .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; } /* --------------------------------------------- Botón 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; }

/* --------------------------------------------- Ajustes responsivos para ventanas de visualización muy pequeñas --------------------------------------------- */
@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; } }

/* Área de código */
.varify-code-block pre {
margen: 0;
padding: 16px 18px;
desbordamiento: auto;
espacio en blanco: pre;
}

.varify-code-block código {
color: #333;
font-size: 13px;
altura de línea: 1,55;
visualización: bloque;
}

/* Botón de copia - totalmente neutralizado, no más azul */
.varify-copy-btn {
all: unset !important; /* elimina TODOS los estilos por defecto/temas/elementos */

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

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

fondo: rgba(255,255,255,0.4) !importante;
filtro de fondo: blur(12px) !importante;
-webkit-backdrop-filter: blur(12px) !important;

borde: 1px sólido rgba(255,255,255,0.35) !importante;

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

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

/* Retroalimentación opcional después de copiar */
.varify-copy-btn.copied {
fondo: rgba(80, 200, 120, 0.55) !importante;
color: #fff !importante;
}

Lo que dicen nuestros usuarios PRO

La mejor base de datos posible es esencial para un análisis limpio de las pruebas A/B. Gracias a la sencilla integración de Varify y BigQuery, ahora las pruebas se pueden evaluar y analizar de forma rápida y sencilla directamente en Varify. Lo que aprecio especialmente de la colaboración es que todo el equipo de Varify trabaja continuamente en nuevos desarrollos, tanto en la propia plataforma como en la conexión perfecta con BigQuery".

Niko SpiesCRO Autónomo

La experimentación está ganando terreno rápidamente, pero eso también significa que muchos de los recién llegados a este campo no están familiarizados con los recursos técnicos necesarios para realizar un análisis sólido de los resultados de sus experimentos, ni tienen acceso a ellos. Verify pretende rebajar significativamente ese listón integrando BigQuery en la plataforma. Se acabaron las luchas con los informes de usuario HLL++ de GA4 o la necesidad de realizar consultas manuales (y posiblemente muchas horas de indicaciones de chatGPT para llegar finalmente a donde uno quiere). Espero que este sea un ejemplo que sigan más empresas. Me encanta la dedicación del equipo de Varify. Gente increíble haciendo un trabajo increíble. ¡Gracias, chicos!

Bas LindersProduct Owner CRO

Función Varify Pro

Gestor de cuentas y éxito

Suavizado de valores atípicos

Integración de BigQuery

Experimento API

Geotargeting

Opciones de pago flexibles

DPA personalizado

CNAME personalizado

Incorporación personalizada

Exportar resultados

Migración desde otra herramienta de pruebas

Soporte Slack

Conjunto de tarjetas digitales

Más información sobre Varify Pro

Actualiza ahora a PRO y ahorra como cliente existente.

Un clic es todo lo que necesita para iniciar su actualización y utilizar todas las funciones avanzadas de Varify.io.

Aprovecha nuestro impulsor de campañas para sacar el máximo partido al Black Friday.

Tres pasos para configurar tu Black Friday

Importante: activa el potenciador de campaña correspondiente en tu editor visual.

Copia el JavaScript y CSS personalizados y compruébalos en tu configuración.

Revisa tu contenido y publica la prueba una vez superado el control de calidad.

Así utilizan nuestros clientes Varify en el Black Friday

JS y CSS adaptados para las campañas de Varify Booster

Intención de salida

Confíe en la mayor plataforma de pruebas A/B desarrollada en Alemania

Intención de salida

Notificación sutil del Black Friday

Notificación

Barra de información sobre el Black Friday

Barra de información

Black Friday Exit Intent - Imagen

Intención de salida (escritorio)

Black Friday Exit Intent - Contenido

Intención de salida (escritorio)

Lo que dicen nuestros usuarios PRO

Función Varify Pro

Actualiza ahora a PRO y ahorra como cliente existente.

Plataforma

Conocimientos

Comparaciones

Ayuda

La empresa

Más información

Aprovecha nuestro impulsor de campañas para sacar el máximo partido al Black Friday.

Tres pasos para configurar tu Black Friday

Importante: activa el potenciador de campaña correspondiente en tu editor visual.

Copia el JavaScript y CSS personalizados y compruébalos en tu configuración.

Revisa tu contenido y publica la prueba una vez superado el control de calidad.

Así utilizan nuestros clientes Varify en el Black Friday

JS y CSS adaptados para las campañas de Varify Booster

PopUp del Black Friday - Imagen

Intención de salida

Confíe en la mayor plataforma de pruebas A/B desarrollada en Alemania

PopUp del Black Friday - Contenido

Intención de salida

Notificación sutil del Black Friday

Notificación

Barra de información sobre el Black Friday

Barra de información

Black Friday Exit Intent - Imagen

Intención de salida (escritorio)

Black Friday Exit Intent - Contenido

Intención de salida (escritorio)

Lo que dicen nuestros usuarios PRO

Función Varify Pro

Actualiza ahora a PRO y ahorra como cliente existente.

Plataforma

Conocimientos

Comparaciones

Ayuda

La empresa

Más información