pop-up disclaimer

SOLVE
joan1
Contributor

Hi Everyone,

 

I would like to know if it has some solution to do something like that:

- a visitor come to the website for the first time, a disclaimer appear with lot of legal term, then he can choose to agree / not agree 

if agree he will be able to have access on the navigation to some specific page(maybe add some rules) if not these pages maybe will show again that disclaimer or redirect him to the main page.

 

So actually I saw hubspot  allow to add a disclaimer by activating DGPR and create a form, that's the idea I want but I don't want the user to subscribe to the website and for example on this form you have no choice to add your email.

 

It also have another idea who do a bit same with the cookies on the privacy and content settings but again, it's to inform the user about cookies usages, not to let him agree with term and condition of something else.

 

So now I would like to know if it has a possibility to have somethings who can do all or even just some part then I can think about it:

- A popup with legal term the user need to check

- A cookie created when it's checked

- A specific rules(some pages checked if that cookie exist, if not show again the pop up,  if agree -> see the content, not agree redirect to main page)

 

I hope I was clear enough but I can give more detail if needed.

If from the admin panel it can't be done but from the development tool on template or module it has something which can get closer to what I want it's also fine.

 

Thanks for the help you can provide.

 

Regards.

0 Upvotes
1 Accepted solution

Accepted Solutions
piersg
Solution
Key Advisor

Hi @joan1, this is certainly possible but would have to be done with custom JS. I would create a global module for the popup, which you'd add to your page templates, so that it's consistent across your site (and has global translations if you need that). 

 

You can use local storage or a cookie to track whether this has been clicked (up to you which you use, although I think local storage might be more useful here):

// local storage
function setLocalCookie(name, value) {
  localStorage.setItem(name, value);
}

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

 

Then you just need to accept terms on a click event from your custom popup.

var acceptTerms = document.getElementById('accept_terms_button');
var rejectTerms = document.getElementById('reject_terms_button');
var popup = document.getElementById('terms_popup');
acceptTerms.addEventListener('click', function() {
  // localstorage
  setLocalCookie('terms','accept');
  // or cookie (using 28 days as example)
  createCookie('terms','accept','28');

  popup.style.display = 'none';
});
rejectTerms.addEventListener('click', function() {
  window.location = 'https://www.example.com'
});

 

For the rules for specific pages you need to do something like:

// if using cookie we need this function to get a cookie by name
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;
}

window.addEventListener('load', (event) => {
	// array of URLs to test against
	var urls = ['/myURL','/test','/another-test/test']

	for (i = 0, len = urls.length; i < len; i++) {
	    let url = urls[i];
	    // if current page pathname is in URL array check if 'terms' cookie or local storage item exists and is not equal to 'accept', if it isn't, show the popup
	    if (window.location.pathname === url) {
	       // local storage
	       let cookie = localStorage.getItem('terms');
	       // or cookie 
	       let cookie = readCookie('terms')
	       if (cookie !== 'accept') {
				popup.style.display = 'block';
	       }
	    }
	}
});

View solution in original post

2 Replies 2
piersg
Solution
Key Advisor

Hi @joan1, this is certainly possible but would have to be done with custom JS. I would create a global module for the popup, which you'd add to your page templates, so that it's consistent across your site (and has global translations if you need that). 

 

You can use local storage or a cookie to track whether this has been clicked (up to you which you use, although I think local storage might be more useful here):

// local storage
function setLocalCookie(name, value) {
  localStorage.setItem(name, value);
}

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

 

Then you just need to accept terms on a click event from your custom popup.

var acceptTerms = document.getElementById('accept_terms_button');
var rejectTerms = document.getElementById('reject_terms_button');
var popup = document.getElementById('terms_popup');
acceptTerms.addEventListener('click', function() {
  // localstorage
  setLocalCookie('terms','accept');
  // or cookie (using 28 days as example)
  createCookie('terms','accept','28');

  popup.style.display = 'none';
});
rejectTerms.addEventListener('click', function() {
  window.location = 'https://www.example.com'
});

 

For the rules for specific pages you need to do something like:

// if using cookie we need this function to get a cookie by name
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;
}

window.addEventListener('load', (event) => {
	// array of URLs to test against
	var urls = ['/myURL','/test','/another-test/test']

	for (i = 0, len = urls.length; i < len; i++) {
	    let url = urls[i];
	    // if current page pathname is in URL array check if 'terms' cookie or local storage item exists and is not equal to 'accept', if it isn't, show the popup
	    if (window.location.pathname === url) {
	       // local storage
	       let cookie = localStorage.getItem('terms');
	       // or cookie 
	       let cookie = readCookie('terms')
	       if (cookie !== 'accept') {
				popup.style.display = 'block';
	       }
	    }
	}
});

View solution in original post

joan1
Contributor

Hi @piersg ,

 

thank's for the explain,

You gave all the detail and that's what I needed to understand so thanks again for your work and time.

 

Best regards.

 

 

 

0 Upvotes