Step 2

We’re going to create a JavaScript function called ‘createCookie’ that will set cookies for us easily. See more on cookies here.

// Cookies
function createCookie(name, value, hours) {
    if (hours) {
        var date = new Date();
        date.setTime(date.getTime() + (hours * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";               

    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

Step 2

Next, we’ll create our actual function to do the hard work….

jQuery(document).ready(function(){
//check if cookies are setTime
var isNew = readCookie('isNew');
var hasVisited = readCookie('hasVisited');

//if the visitor has been here before, but not for the last few hours, then they are a 'return user'
if ( !isNew && !hasVisited) // if its a brand new visitor and the cookies havnt been set
{   
    isNew = 'true'; // set isNew to true, because they are new!
    createCookie('isNew', isNew, '6') // set the 'isNew' cookie to last for 6 hours. this cookie we'll use to display the row
}

if (isNew) // new visitor
{
    jQuery('body').addClass('new-visitor');
}

//update the hasVisited cookie every page load :)
createCookie('hasVisited', 'true', '8760')  // set the hasVisited cookie for 365 days (365 days * 24 hours = 8760)

});

Step 3

Now all wee need is a little CSS to do the showing (and hiding).

We’ll hide the new user welcome by default, and then show it if the body has the class ‘new-visitor’ that we set in the JavaScript above.

The “:not(.fl-builder-edit)” CSS ensures that the row is still displayed if the Page Builder is active. See more on the not pseudo class

:not(.fl-builder-edit) #new-users-only{
	display:none;
}

/* show the welcome when the class 'new-visitor' is applied to the body */
body.new-visitor #new-users-only{
	display:block;	
}

So how do I implement this?

You need to add the CSS and JavaScript into your website. This can be done a million different ways. Using BB, you can add it site wide using these instructions.

Other than that, all you need to do is add the ID (new-users-only) to your row that you want visible to new users only!

Any questions? Comment below 🙂