Pop-up pour l'inactivité

Tabata Vossen -

Pour sécuriser votre campagne, ou si vous utilisez Qualifio pour un événement, vous pouvez vouloir détecter les utilisateurs inactifs pour leur montrer une pop-up et rediriger vers la page d'accueil de votre campagne. Aujourd'hui, nous allons vous montrer comment mettre en place une telle pop-up dans une campagne Qualifio.

Qualifio peut rediriger automatiquement les utilisateurs inactifs sur la base du flux de travail suivant :

  • afficher une pop-up après une certaine période d'inactivité avec un message personnalisé ;
  • si l'utilisateur interagit avec la page, la pop-up se ferme automatiquement et l'utilisateur peut continuer sa participation ;
  • si l'utilisateur n'interagit pas avec la page de quelque manière que ce soit, il est redirigé vers la page d'accueil.

Alors, comment faire ? Plongeons dans le vif du sujet.

Étape #1 : Installer la pop-up

La première chose à faire est d'ajouter le code ci-dessous à votre campagne :

<!-- The modal window (mandatory) -->
<div class="modal modal-activity" style="display:hidden;">
<div class="modal-content countDownAlert">
<span class="close">×</span>
<div id="mssgBox"></div>
<div id="countdownBox"></div>
</div>
</div>

Il suffit d'aller dans Canaux > Marqueurs et de coller le code dans l'onglet Code HTML supplémentaire :

Schermafbeelding_2021-08-05_om_15.33.12.png

Étape #2 : Configurer la pop-up

Ensuite, ajoutez le script ci-dessous pour configurer les paramètres de votre pop-up d'inactivité :

<script>

// default messages var waitingMssg = "Where did you go?"; var welcomeBackMssg = "Welcome back!" var countDownMssg = "This page will redirect in {n} seconds." // default settings var inactivityTime = 10000; // time to wait before showing pop up (in milliseconds) var restartAfter = 5; // time to wait before restart (in seconds) var redirectTo = "v1.cfm?id={id}&clearFields=true"; // url to use on restart var countdown = true; // get divs elements var mssgBox = document.getElementById("mssgBox"); var countdownBox = document.getElementById("countdownBox"); // get tagging plan functions var tp = _qlf_taggingplan; setIdleTimeout(inactivityTime, function() { mssgBox.innerText = waitingMssg; countdown = true; count = restartAfter; countDown(); }, function() { mssgBox.innerText = welcomeBackMssg; $('.modal-activity').hide(); countdownBox.innerText = ''; countdown = false; }); function countDown() { if (countdown == false || tp.pageNumber() == 1 ) { return; } $('.modal-activity').show(); if (count > 0) { count--; countdownBox.innerHTML = countDownMssg.replace("{n}", count); setTimeout("countDown()", 1000); } else { window.location.href = redirectTo; } } function setIdleTimeout(millis, onIdle, onUnidle) { var timeout = 0; startTimer(); function startTimer() { timeout = setTimeout(onExpires, millis); document.addEventListener("mousemove", onActivity); document.addEventListener("keypress", onActivity); } function onExpires() { timeout = 0; onIdle(); } function onActivity() { if (timeout) clearTimeout(timeout); else onUnidle(); //since the mouse is moving, we turn off our event hooks for 1 second document.removeEventListener("mousemove", onActivity); document.removeEventListener("keypress", onActivity); setTimeout(startTimer, 1000); } }
</script>

Si vous le souhaitez, vous pouvez simplement commencer avec les paramètres par défaut. Cependant, vous pouvez également les modifier facilement et configurer la pop-up d'inactivité comme vous le souhaitez.

Voyons maintenant les paramètres que vous pouvez définir :

Délai d'inactivité

inactivityTime – Modifiez la durée pendant laquelle un participant doit être inactif pour que la pop-up se déclenche (en millisecondes).

Dans l'exemple ci-dessus, nous afficherions une pop-up après 10 secondes d'inactivité.

Compte à rebours avant la redirection effective

restartAfter – Choisissez combien de secondes avant qu'un participant ne soit automatiquement redirigé s'il n'interagit pas avec la pop-up (en secondes).

Par défaut, le participant est redirigé vers l'écran d'accueil après 5 secondes s'il n'effectue aucune action (souris, clavier, toucher).

Messages contextuels

Une fois que vous avez fini de régler les paramètres de temps, vous pouvez saisir les messages personnalisés que vous voulez afficher aux utilisateurs :

  • waitingMssg – Message d'alerte qui prévient les utilisateurs inactifs que leur session est sur le point d'expirer.
  • welcomeBackMssg – Message d'accueil pour inciter les utilisateurs à revenir.
  • countDownMssg – Message de compte à rebours qui s'affiche pour les utilisateurs inactifs avant la redirection effective.

Étape #3 : Styliser la pop-up 

Vous avez la possibilité de modifier le style de la pop-up à l'aide de CSS. Par exemple, vous pouvez utiliser le code suivant pour définir la couleur d'arrière-plan comme étant orange et pour donner à la pop-up des coins arrondis :

<!-- some styles to apply to the modal window -->
<style>
.countDownAlert {
border-radius: 10px;
background-color: #fba026;
}
</style>

Une fois que vous avez effectué toutes les modifications, n'oubliez pas de cliquer sur le bouton "Enregistrer" ou "Enregistrer et continuer" pour que les changements soient pris en compte dans votre campagne. Vous pourrez ensuite les contrôler dans votre navigateur.

Nous espérons que cet article vous a été utile. Merci de nous avoir lu !! 🙂