Display a pop-up after a period of inactivity in Qualifio campaigns

To secure your campaign, or if you’re using Qualifio for a live event, you may want to detect inactive (or “idle”) users to show them a pop-up and finally redirect them to the homepage of your campaign. Today we will show you how to implement such a pop-up in a Qualifio campaign.

Qualifio can automatically redirect idle users based on the following workflow:

• show a pop-up after a certain period of inactivity with a custom message,
• if the user interacts with the page, the pop-up automatically closes and the user can continue their participation,
• if the user doesn’t interact with the page in any way, they are redirected to the welcome page.

How to do this? Let’s dive in.

Step #1: Install the pop-up

The first thing you need to do is add the below piece of code to your campaign:

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

Simply go to Channels > Tags and paste the code in the Additional HTML code tab:

Step #2: Configure the pop-up

Then, add the below script to configure the settings of your inactivity pop-up:

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

If you want, you can simply get started with the default settings. However, you can also easily change them and configure the inactivity pop-up the way you want.

Now, let's have a look at the settings you can configure:

Idle timeout time

inactivityTime – Change how long a participant needs to be inactive for the pop-up to trigger (in milliseconds).

In the above example, we would display a pop-up after 10 seconds of inactivity (“idle time”).

Countdown before the actual redirect

restartAfter – Choose how many seconds before a participant is automatically redirected if they don’t interact with the pop-up (in seconds).

By default, the participant is redirected to the welcome screen after 5 seconds if they take no action (mouse, keyboard, touch).

Pop-up messages

Once you’re done adjusting the time setting, you can enter custom messages that you want to be displayed to users:

• waitingMssg – Alert message that warns idle users that their session is about to expire.
• welcomeBackMssg – Greeting message to engage returning users.
• countDownMssg – Countdown message that will be displayed to inactive users before the actual redirect.

Step #3: Style the pop-up 

You have the option to change the style of the pop-up using CSS. For instance, you’d use the following code to set the background colour as orange and to give the pop-up rounded corners:

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

Once you're done making all the changes, don't forget to click on the "Save" or "Save and continue" button to make the changes live in your campaign. Then, you can check it in your browser.

We hope you found this article helpful. Thank you for reading!! 🙂