Utilisez notre booster de campagne pour tirer le meilleur parti du Black Friday

Dans cette vidéo, nous te montrons comment tester les extraits de code.

Trois étapes suffisent pour configurer ton Black Friday

Pour de nombreux spécialistes du marketing, le Black Friday est l'un des jours les plus lucratifs de l'année. Les objectifs sont élevés, la concurrence encore plus. Pourtant, les résultats sont souvent en deçà des attentes.

La raison principale : les campagnes et les offres ne sont pas suffisamment mises en avant sur le site web. Les utilisateurs ne remarquent pas les remises, les promotions se perdent dans la mise en page et de précieux potentiels de conversion restent inexploités.

  • Important : active le booster de campagne correspondant dans ton éditeur visuel.

  • Copiez le JavaScript et le CSS personnalisés et vérifiez-les dans votre configuration.

  • Soignez votre contenu et mettez le test en ligne après un contrôle qualité réussi.

Remarque : Varify décline toute responsabilité quant au fonctionnement du code et des informations. Il incombe à l'utilisateur de vérifier minutieusement le code de test et de le mettre en œuvre correctement.

Voici comment nos clients utilisent Varify lors du Black Friday

Flexibilité sans développeur

Modifiez le style et ajoutez rapidement des boosters de campagne vous-même, sans avoir à passer par le service de développement. Cela vous fait gagner du temps et vous permet de réagir immédiatement.

Tests rapides de pages d'atterrissage

Grâce à notre script minimaliste, vous pouvez concevoir des pages d'atterrissage dans votre CMS et les tester directement avec des redirections – rapidement, facilement et sans longs délais d'attente. 

Un style simple pour le Black Friday

Vous souhaitez adapter votre boutique au Black Friday ou mettre en avant certains éléments en les déplaçant ? Grâce à l'éditeur visuel, vous pouvez modifier le design en un clin d'œil sans avoir à modifier le code.

Ciblage précis pour les campagnes

Testez la réaction de certains groupes cibles à vos modifications en les ciblant spécifiquement à l'aide de paramètres UTM, de profils d'appareils ou de pays. Vous saurez ainsi exactement ce qui fonctionne et pour qui.

JS & CSS adaptés pour les boosters de campagne Varify

Intention de sortie

Vous pouvez afficher une fenêtre contextuelle avec une image qui apparaît à un moment précis. Vous pouvez définir vous-même le moment exact où elle apparaîtra.

JavaScript supplémentaire


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();
      }
    });
  });
});
/* Enveloppe avec votre arrière-plan */ .varify-code-block { fond : #f5f2f0 ; rayon de la bordure : 8px ; border : 1px solid #e0ddd9 ; padding : 0 ; position : relative ; font-family : Consolas, Menlo, Monaco, “Fira Code”, monospace ; margin-bottom : 24px ; } /* Zone de code */ .varify-code-block pre { margin : 0 ; padding : 16px 18px ; débordement : auto ; white-space : pre ; } .varify-code-block code { color : #333 ; font-size : 13px ; hauteur de ligne : 1.55 ; display : bloc ; } /* Bouton Copy - entièrement neutralisé, plus de bleu */ .varify-copy-btn { all : unset !important ; /* supprime TOUS les styles par défaut/thème/éléments */ display : inline-block !important ; position : absolute !important ; top : 10px !important ; droite : 10px !important ; padding : 6px 10px !important ; rayon de la bordure : 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 ; curseur : pointeur !important ; box-shadow : 0 4px 12px rgba(0,0,0,0.08) !important ; } /* Feedback optionnel après la copie */ .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) ; }) ;
CSS supplémentaire



/* wrapper : masqué par défaut, visible lorsque vf-show est ajouté */ .varify-exitIntent-wrapper { display: none; } .varify-exitIntent-wrapper.vf-show { display: block; } /* backdrop : superposition plein écran */
.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; }

/* supprimer le remplissage : modal image pure */ .varify-exitIntent-content { padding: 0 !important; } /* l'image ne doit jamais être plus grande que la hauteur de la fenêtre */ .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; }
/* Enveloppe avec votre arrière-plan */ .varify-code-block { fond : #f5f2f0 ; rayon de la bordure : 8px ; border : 1px solid #e0ddd9 ; padding : 0 ; position : relative ; font-family : Consolas, Menlo, Monaco, “Fira Code”, monospace ; margin-bottom : 24px ; } /* Zone de code */ .varify-code-block pre { margin : 0 ; padding : 16px 18px ; débordement : auto ; white-space : pre ; } .varify-code-block code { color : #333 ; font-size : 13px ; hauteur de ligne : 1.55 ; display : bloc ; } /* Bouton Copy - entièrement neutralisé, plus de bleu */ .varify-copy-btn { all : unset !important ; /* supprime TOUS les styles par défaut/thème/éléments */ display : inline-block !important ; position : absolute !important ; top : 10px !important ; droite : 10px !important ; padding : 6px 10px !important ; rayon de la bordure : 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 ; curseur : pointeur !important ; box-shadow : 0 4px 12px rgba(0,0,0,0.08) !important ; } /* Feedback optionnel après la copie */ .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) ; }) ;

Fais confiance à la plus grande plateforme d'A/B testing développée en Allemagne

Chiffres de BuiltWith.com: Comparaison des plateformes de test A/B allemandes. Situation en octobre 2025
trust-omrreviews-1.svg
trust-omr-top100-1.svg
Trust-product-hunt-1.svg
omr-meilleures-évaluations-tests-A/B-4e trimestre 2026
trust-g2-1.svg
trust-omrreviews-1.svg
trust-omr-top100-1.svg
Trust-product-hunt-1.svg
omr-meilleures-évaluations-tests-A/B-4e trimestre 2026
trust-g2-1.svg
Essayez-le gratuitement pendant 15 jours

Pop-up Black Friday - Contenu

Intention de sortie

Cette fenêtre contextuelle contient du texte, des puces et un bouton. Vous pouvez personnaliser le texte à votre guise et définir quand la fenêtre contextuelle doit apparaître afin d'informer vos utilisateurs de manière ciblée.

JavaScript supplémentaire


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();
      }
    });
  });
});
/* Enveloppe avec votre arrière-plan */
.varify-code-block {
background : #f5f2f0 ;
rayon de la bordure : 8px ;
bordure : 1px solid #e0ddd9 ;
padding : 0 ;
position : relative ;
font-family : Consolas, Menlo, Monaco, „ Fira Code “, monospace ;
margin-bottom : 24px ;
}

/* Zone de code */
.varify-code-block pre {
marge : 0 ;
padding : 16px 18px ;
débordement : auto ;
white-space : pre ;
}

.varify-code-block code {
color : #333 ;
font-size : 13px ;
hauteur de la ligne : 1,55 ;
affichage : bloc ;
}

/* Bouton Copy - entièrement neutralisé, plus de bleu */
.varify-copy-btn {
all : unset !important ; /* supprime TOUS les styles par défaut/thème/éléments */

display : inline-block !important ;
position : absolute !important ;
top : 10px !important ;
droite : 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 ;

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

/* Feedback optionnel après la copie */
.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); });

CSS supplémentaire


/* ================================ COMPORTEMENT DE LA FENÊTRE CONTEXTUELLE DE BASE ================================ */ /* Wrapper masqué par défaut, visible lorsque .vf-show est ajouté via JS */ .varify-exitIntent-wrapper { display: none; }

.varify-exitIntent-wrapper.vf-show { display: block; } /* Backdrop : superposition sombre, uniquement lorsque le wrapper a .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; }

/* Facultatif : si vous souhaitez verrouiller le défilement sur la page : .vf-no-scroll { overflow: hidden !important; } */ /* En-tête non nécessaire pour ce 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 ; largeur : 540px !important ; largeur maximale : 80% !important ; hauteur maximale : 80% !important ; position : relative !important ;
  z-index : 2147483647 !important ; /* au-dessus de l'arrière-plan, sous le bouton Fermer */ overflow : visible !important ; /* ne pas couper le bouton Fermer */ } /* Si votre HTML comporte un .varify-exitIntent-inner : faire défiler uniquement à l'intérieur */
.varify-exitIntent-inner { max-height: 80vh; overflow: auto; } /* Bloc de contenu */ .varify-exitIntent-content { padding: 30px !important; text-align: left !important; }

/* ================================ STYLES DE TEXTE ================================ */ .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 : absolue ; gauche : 0 ; haut : 0 ; } /* Bouton CTA */ .bf-exit-intent-cta { affichage : inline-block ; couleur d'arrière-plan : #d32c2c ; couleur : #fff !important ; remplissage : 10px 20px ;
  border-radius : 4px ; font-size : 16px ; font-weight : 600 ; text-decoration : none !important ; } .bf-exit-intent-cta:hover { background-color : #b71c1c ; }

/* ================================ BOUTON FERMER (X) – TOUJOURS AU PREMIER PLAN ================================ */ .varify-exitIntent-close { position : absolue !important ; haut : 12px !important ; droite : 12px !important ; largeur : 28px !important ; hauteur : 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; }
/* Enveloppe avec votre arrière-plan */ .varify-code-block { fond : #f5f2f0 ; rayon de la bordure : 8px ; border : 1px solid #e0ddd9 ; padding : 0 ; position : relative ; font-family : Consolas, Menlo, Monaco, “Fira Code”, monospace ; margin-bottom : 24px ; } /* Zone de code */ .varify-code-block pre { margin : 0 ; padding : 16px 18px ; débordement : auto ; white-space : pre ; } .varify-code-block code { color : #333 ; font-size : 13px ; hauteur de ligne : 1.55 ; display : bloc ; } /* Bouton Copy - entièrement neutralisé, plus de bleu */ .varify-copy-btn { all : unset !important ; /* supprime TOUS les styles par défaut/thème/éléments */ display : inline-block !important ; position : absolute !important ; top : 10px !important ; droite : 10px !important ; padding : 6px 10px !important ; rayon de la bordure : 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 ; curseur : pointeur !important ; box-shadow : 0 4px 12px rgba(0,0,0,0.08) !important ; } /* Feedback optionnel après la copie */ .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) ; }) ;

Notification subtile du Black Friday

Notification

Une notification discrète qui apparaît en bas à gauche. Elle vous permet de rediriger l'utilisateur vers une autre page d'action sans le déranger, ce qui est parfait pour les appels à l'action subtils.

JavaScript supplémentaire



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';
      });
    }
  });
});
/* Enveloppe avec votre arrière-plan */
.varify-code-block {
background : #f5f2f0 ;
rayon de la bordure : 8px ;
bordure : 1px solid #e0ddd9 ;
padding : 0 ;
position : relative ;
font-family : Consolas, Menlo, Monaco, „ Fira Code “, monospace ;
margin-bottom : 24px ;
}

/* Zone de code */
.varify-code-block pre {
marge : 0 ;
padding : 16px 18px ;
débordement : auto ;
white-space : pre ;
}

.varify-code-block code {
color : #333 ;
font-size : 13px ;
hauteur de la ligne : 1,55 ;
affichage : bloc ;
}

/* Bouton Copy - entièrement neutralisé, plus de bleu */
.varify-copy-btn {
all : unset !important ; /* supprime TOUS les styles par défaut/thème/éléments */

display : inline-block !important ;
position : absolute !important ;
top : 10px !important ;
droite : 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 ;

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

/* Feedback optionnel après la copie */
.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); });

CSS supplémentaire


/* Boîte noire avec texte blanc */ .varify-notification.v_animated.v_animation.varify-init { background-color: #000 !important; color: #fff !important; }

/* Titre et texte en blanc */ .varify-notification-headline, .varify-notification-text { color: #fff !important; } /* Marge inférieure du texte */ .varify-notification-text { margin-bottom: 5px !important; }

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

/* Rendre l'icône de fermeture (X) visible */ .varify-notification-close { color: #fff !important; } /* Design bulle pour " Black Friday Deal " */ .webinar-info { background-color: #d32c2c !important; /* bulle rouge */
  color: #fff !important; /* texte blanc */ 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 ; }

  /* Titre plus petit */ .varify-notification-headline { font-size: 13px !important; line-height: 1.2 !important; margin-bottom: 2px !important; } /* Sous-titre plus petit */ .varify-notification-text { font-size: 11px !important;
    line-height: 1.2 !important; } /* Badge plus petit */ .webinar-info { font-size: 10px !important; padding: 1px 4px !important; max-width: 100px !important; margin-bottom: 4px !important; }

  /* Fermer-X plus petit */ .varify-notification-close { font-size: 16px !important; width: 12px !important; height: 12px !important; right: 10px !important; margin-top: -6px !important; } }
/* Enveloppe avec votre arrière-plan */ .varify-code-block { fond : #f5f2f0 ; rayon de la bordure : 8px ; border : 1px solid #e0ddd9 ; padding : 0 ; position : relative ; font-family : Consolas, Menlo, Monaco, “Fira Code”, monospace ; margin-bottom : 24px ; } /* Zone de code */ .varify-code-block pre { margin : 0 ; padding : 16px 18px ; débordement : auto ; white-space : pre ; } .varify-code-block code { color : #333 ; font-size : 13px ; hauteur de ligne : 1.55 ; display : bloc ; } /* Bouton Copy - entièrement neutralisé, plus de bleu */ .varify-copy-btn { all : unset !important ; /* supprime TOUS les styles par défaut/thème/éléments */ display : inline-block !important ; position : absolute !important ; top : 10px !important ; droite : 10px !important ; padding : 6px 10px !important ; rayon de la bordure : 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 ; curseur : pointeur !important ; box-shadow : 0 4px 12px rgba(0,0,0,0.08) !important ; } /* Feedback optionnel après la copie */ .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) ; }) ;

Barre d'informations Black Friday

Bandeau d'information

La barre d'informations vous permet d'afficher trois contenus différents et de remplacer le SVG par votre propre design. Les balises peuvent également être personnalisées et l'élément entier est lié, ce qui vous permet de le relier facilement.

JavaScript supplémentaire



window.varify.helpers.waitFor('.varify-usp-bar', (bar) => { // === PARAMÈTRES POUR VOUS === 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]; } });

  // === APPLIQUER LES ICÔNES === bar.querySelectorAll('.varify-usp-bar-icon').forEach((el) => { el.innerHTML = iconVariant === 'cross' ? crossIconSvg : defaultIconSvg; });

  // === RENDRE LA BARRE CLICABLE === bar.addEventListener('click', (evt) => { if (evt.target.closest('.varify-usp-bar-close')) return; window.location.href = targetUrl; }); // ------------------------------------------------------------------ // === FONCTIONNALITÉ MOBILE (NOUVEAU – REST INCHANGÉ) === // ------------------------------------------------------------------ if (isMobile) { // seul le premier USP reste visible const usps = bar.querySelectorAll('.varify-usp-bar-usp');
    usps.forEach((usp, index) => { if (index > 0) { usp.style.display = 'none'; } }); } });
/* Enveloppe avec votre arrière-plan */
.varify-code-block {
background : #f5f2f0 ;
rayon de la bordure : 8px ;
bordure : 1px solid #e0ddd9 ;
padding : 0 ;
position : relative ;
font-family : Consolas, Menlo, Monaco, „ Fira Code “, monospace ;
margin-bottom : 24px ;
}

/* Zone de code */
.varify-code-block pre {
marge : 0 ;
padding : 16px 18px ;
débordement : auto ;
white-space : pre ;
}

.varify-code-block code {
color : #333 ;
font-size : 13px ;
hauteur de la ligne : 1,55 ;
affichage : bloc ;
}

/* Bouton Copy - entièrement neutralisé, plus de bleu */
.varify-copy-btn {
all : unset !important ; /* supprime TOUS les styles par défaut/thème/éléments */

display : inline-block !important ;
position : absolute !important ;
top : 10px !important ;
droite : 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 ;

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

/* Feedback optionnel après la copie */
.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); });

CSS supplémentaire



/* Style Black Friday : fond noir, texte blanc, masquer le sous-texte */ .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; /* Supprimer le sous-titre ; seuls les titres restent */ } .varify-usp-bar-icon svg {
  fill: #fff !important; stroke: #fff !important; width: 24px; height: 24px; } /* Affiche le pointeur de la souris sous forme de „ main gauche “ sur toute la barre */ .varify-usp-bar-wrapper { cursor: pointer; }

/* S'assure que le X de fermeture reste visible et n'est pas affecté par l'échange d'icônes */ .varify-usp-bar-close { color: #ffffff !important; /* X blanc sur fond noir */ cursor: default; /* Curseur standard afin que le bouton de fermeture se distingue du reste cliquable */
} @media (max-width: 767px) { .varify-usp-bar.varify-usp-bar--mobile-single { text-align: center; } /* Adapte .varify-usp-bar-item à ta classe de colonne */
  .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; } }
/* Enveloppe avec votre arrière-plan */ .varify-code-block { fond : #f5f2f0 ; rayon de la bordure : 8px ; border : 1px solid #e0ddd9 ; padding : 0 ; position : relative ; font-family : Consolas, Menlo, Monaco, “Fira Code”, monospace ; margin-bottom : 24px ; } /* Zone de code */ .varify-code-block pre { margin : 0 ; padding : 16px 18px ; débordement : auto ; white-space : pre ; } .varify-code-block code { color : #333 ; font-size : 13px ; hauteur de ligne : 1.55 ; display : bloc ; } /* Bouton Copy - entièrement neutralisé, plus de bleu */ .varify-copy-btn { all : unset !important ; /* supprime TOUS les styles par défaut/thème/éléments */ display : inline-block !important ; position : absolute !important ; top : 10px !important ; droite : 10px !important ; padding : 6px 10px !important ; rayon de la bordure : 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 ; curseur : pointeur !important ; box-shadow : 0 4px 12px rgba(0,0,0,0.08) !important ; } /* Feedback optionnel après la copie */ .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) ; }) ;

Black Friday Exit Intent - Image

Intention de sortie (ordinateur de bureau)

Lorsqu'un utilisateur souhaite quitter la page, une fenêtre contextuelle contenant une image s'affiche. Idéal pour attirer à nouveau son attention avant qu'il ne quitte la page.

JavaScript supplémentaire



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

  });
});
/* Enveloppe avec votre arrière-plan */ .varify-code-block { fond : #f5f2f0 ; rayon de la bordure : 8px ; border : 1px solid #e0ddd9 ; padding : 0 ; position : relative ; font-family : Consolas, Menlo, Monaco, “Fira Code”, monospace ; margin-bottom : 24px ; } /* Zone de code */ .varify-code-block pre { margin : 0 ; padding : 16px 18px ; débordement : auto ; white-space : pre ; } .varify-code-block code { color : #333 ; font-size : 13px ; hauteur de ligne : 1.55 ; display : bloc ; } /* Bouton Copy - entièrement neutralisé, plus de bleu */ .varify-copy-btn { all : unset !important ; /* supprime TOUS les styles par défaut/thème/éléments */ display : inline-block !important ; position : absolute !important ; top : 10px !important ; droite : 10px !important ; padding : 6px 10px !important ; rayon de la bordure : 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 ; curseur : pointeur !important ; box-shadow : 0 4px 12px rgba(0,0,0,0.08) !important ; } /* Feedback optionnel après la copie */ .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) ; }) ;
CSS supplémentaire



/* Arrière-plan masqué par défaut */ .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; } /* Afficher la fenêtre contextuelle uniquement lorsque le conteneur a vf-show */ .varify-exitIntent-wrapper.vf-show .varify-exitIntent-backdrop { display: flex !important; }

/* Empêcher le défilement lorsque la fenêtre contextuelle est ouverte */ .vf-no-scroll { overflow: hidden !important; } /* Le contenu est uniquement l'image, donc supprimer le remplissage */ .varify-exitIntent-content { padding: 0 !important; } /* Arrière-plan modal noir */
.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; }

/* Enveloppe avec votre arrière-plan */
.varify-code-block {
background : #f5f2f0 ;
rayon de la bordure : 8px ;
bordure : 1px solid #e0ddd9 ;
padding : 0 ;
position : relative ;
font-family : Consolas, Menlo, Monaco, „ Fira Code “, monospace ;
margin-bottom : 24px ;
}

/* Zone de code */
.varify-code-block pre {
marge : 0 ;
padding : 16px 18px ;
débordement : auto ;
white-space : pre ;
}

.varify-code-block code {
color : #333 ;
font-size : 13px ;
hauteur de la ligne : 1,55 ;
affichage : bloc ;
}

/* Bouton Copy - entièrement neutralisé, plus de bleu */
.varify-copy-btn {
all : unset !important ; /* supprime TOUS les styles par défaut/thème/éléments */

display : inline-block !important ;
position : absolute !important ;
top : 10px !important ;
droite : 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 ;

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

/* Feedback optionnel après la copie */
.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); });

Black Friday Exit Intent - Contenu

Intention de sortie (ordinateur de bureau)

Cette fenêtre contextuelle apparaît lorsque l'utilisateur souhaite quitter la page et contient du texte, des puces et un bouton. Tu peux personnaliser le contenu à ta guise afin de faire revenir l'utilisateur.

JavaScript supplémentaire


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();
    });
  });
});
/* Enveloppe avec votre arrière-plan */
.varify-code-block {
background : #f5f2f0 ;
rayon de la bordure : 8px ;
bordure : 1px solid #e0ddd9 ;
padding : 0 ;
position : relative ;
font-family : Consolas, Menlo, Monaco, „ Fira Code “, monospace ;
margin-bottom : 24px ;
}

/* Zone de code */
.varify-code-block pre {
marge : 0 ;
padding : 16px 18px ;
débordement : auto ;
white-space : pre ;
}

.varify-code-block code {
color : #333 ;
font-size : 13px ;
hauteur de la ligne : 1,55 ;
affichage : bloc ;
}

/* Bouton Copy - entièrement neutralisé, plus de bleu */
.varify-copy-btn {
all : unset !important ; /* supprime TOUS les styles par défaut/thème/éléments */

display : inline-block !important ;
position : absolute !important ;
top : 10px !important ;
droite : 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 ;

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

/* Feedback optionnel après la copie */
.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); });

CSS supplémentaire

/* --------------------------------------------- Fond masqué par défaut --------------------------------------------- */ .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;
} /* --------------------------------------------- Afficher la fenêtre contextuelle lorsque le conteneur a .vf-show --------------------------------------------- */
.varify-exitIntent-wrapper.vf-show .varify-exitIntent-backdrop { display: flex !important; } /* --------------------------------------------- Empêcher le défilement de la page lorsque la fenêtre contextuelle est ouverte --------------------------------------------- */ .vf-no-scroll { overflow: hidden !important; } /* --------------------------------------------- Style modal (pour fenêtre contextuelle avec contenu) --------------------------------------------- */ .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; } /* --------------------------------------------- Zone de contenu --------------------------------------------- */ .varify-exitIntent-content { padding: 30px !important; text-align: left !important; }

/* --------------------------------------------- Masquer le bloc d'en-tête par défaut inutilisé --------------------------------------------- */ .varify-exitIntent-header { display: none !important; } /* --------------------------------------------- Bouton Fermer (toujours visible au-dessus du contenu) --------------------------------------------- */ .varify-exitIntent-close { position : absolue !important ; haut : 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; } /* --------------------------------------------- Typographie pour la fenêtre contextuelle de contenu --------------------------------------------- */ .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; }

/* --------------------------------------------- Liste à puces --------------------------------------------- */ .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; } /* --------------------------------------------- Bouton 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; } /* --------------------------------------------- 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; } }

/* Enveloppe avec votre arrière-plan */
.varify-code-block {
background : #f5f2f0 ;
rayon de la bordure : 8px ;
bordure : 1px solid #e0ddd9 ;
padding : 0 ;
position : relative ;
font-family : Consolas, Menlo, Monaco, „ Fira Code “, monospace ;
margin-bottom : 24px ;
}

/* Zone de code */
.varify-code-block pre {
marge : 0 ;
padding : 16px 18px ;
débordement : auto ;
white-space : pre ;
}

.varify-code-block code {
color : #333 ;
font-size : 13px ;
hauteur de la ligne : 1,55 ;
affichage : bloc ;
}

/* Bouton Copy - entièrement neutralisé, plus de bleu */
.varify-copy-btn {
all : unset !important ; /* kills ALL default/theme/Elementor styles */

display : inline-block !important ;
position : absolute !important ;
top : 10px !important ;
droite : 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 ;

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

/* Feedback optionnel après la copie */
.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); });

Ce que disent nos utilisateurs PRO

Pour une analyse de test A/B propre, il est essentiel de disposer de la meilleure base de données possible. Grâce à l'intégration simple de Varify et de BigQuery, les tests peuvent désormais être évalués et analysés rapidement et facilement directement dans Varify. Ce que j'apprécie particulièrement dans cette collaboration, c'est que toute l'équipe de Varify travaille continuellement au développement de la plateforme elle-même ainsi qu'à la connexion transparente à BigQuery.
Niko SpiesCRO Freelancer
Niko Spies
L'expérimentation gagne rapidement du terrain, mais cela signifie aussi qu'un grand nombre de nouveaux venus dans le domaine ne sont pas familiarisés avec, ou n'ont pas accès aux ressources techniques nécessaires à une analyse solide des résultats de leurs expériences. Verify vise à réduire considérablement cet écart en intégrant BigQuery à la plateforme. Plus de difficultés avec les rapports utilisateurs HLL++ de GA4 ou le besoin de requêtes manuelles (et peut-être des heures de prompts chatGPT pour finalement arriver là où vous voulez être) ! J'espère que c'est un exemple que d'autres entreprises suivront. J'aime le dévouement de l'équipe Varify. Des gens formidables qui font un travail formidable. Merci, les gars !
Bas LindersProduct Owner CRO
Bas Linders

Fonctionnalité de Varify Pro

Responsable de compte et de réussite
Lissage Outlier
Intégration de BigQuery
Expérience API
Ciblage géographique
Options de paiement flexibles
Custom DPA
CNAME personnalisé
Personnalisation de l'intégration
Résultats de l'exportation
Migration à partir d'un autre outil de test
Support Slack
Kit de cartes numériques
En savoir plus sur Varify Pro

Passez dès maintenant à la version PRO et économisez en tant que client existant

Un clic suffit pour lancer ta mise à niveau et profiter de toutes les fonctionnalités avancées de Varify.io.