Squarespace Age Gate. Add this code just to the Age Gate page. This is usually a "Cover Page" under Pages > Not Linked. Click the gear icon, go to Advanced tab in the popup, paste this code. This sets the cookie and handles the redirect back to the requested content.

squarespace-age-gate.js

<script>
/*
Squarespace Age Gate.

- Create a "Cover Page" under Pages > Not Linked.
- Click the gear icon, go to Advanced tab in the popup, paste this code.
- This sets the cookie and handles the redirect back to the requested content.
- On the age gate page, you have to create a button that has "#legal" as the link or href. It is what turns off the age gate.
- Elsewhere on the site, you can test for the cookie (legal), and if not set, rediret to the age gate Cover Page (example at the bottom).
*/


/**
 * Obtains and stores the query parameters passed in the url (?redirect_to=https://example.com).
 * To use a parameter (eg: "redirect_to"): "QueryString.redirect_to"
 */
var QueryString = function() {
	var query_string = {};
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	for (var i=0;i<vars.length;i++) {
		var pair = vars[i].split("=");
		if (typeof query_string[pair[0]] === "undefined") {
			query_string[pair[0]] = pair[1];
		} else if (typeof query_string[pair[0]] === "string") {
			var arr = [ query_string[pair[0]], pair[1] ];
			query_string[pair[0]] = arr;
		} else {
			query_string[pair[0]].push(pair[1]);
		}
	}
	return query_string;
}();

/**
 * Sets the cookie "name" and "value" to expire in "days" from now
 * "url" will redirect to that url afterwards
 * Remove "expires" section to turn into a current session cookie
 * document.cookie = name + "=" + value + "; path=/";
 *
 * @param {string} name
 * @param {string} value
 * @param {string} exdays
 * @param {string} url
 * @returns {}
 */
function setCookie(name, value, days, url) {
	var d = new Date();
	d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
	var expires = "expires="+d.toGMTString();
	document.cookie = name + "=" + value + "; " + expires + "; path=/";
	// Redirect to the homepage if no url is provided
	if (!url) {
		url = "/";
	}
	window.location.href = decodeURIComponent(url);
}

/**
 * On page document loaded
 */
document.addEventListener('DOMContentLoaded', function() {
	// YOU MUST HAVE BUTTON WITH HREF set to #legal
	// This is the accept button and sets everything in motion
	var button = document.querySelector('a[href="#legal"]');
	button.addEventListener('click', function(e) {
		e.preventDefault();
		// Sets a cookie named "legal" with value 1 or true for 365 days
		// If redirect_to is used, it will redirect to it, otherwise, by default, redirects to the homepage
		setCookie('legal', '1', 365, QueryString.redirect_to);
	});
});
</script>

<script>
/*
Quick example to test for the cookie and redirect. I haven't tested this.
You will need to set ageGateUrl equal to your age gate's Cover Page URL
*/

var getCookie = function(name) {
	var value = "; " + document.cookie;
	var parts = value.split("; " + name + "=");
	if (parts.length == 2) {
		return parts.pop().split(";").shift();
	}
};
document.addEventListener('DOMContentLoaded', function() {
	if (!getCookie('legal')) {
		var ageGateUrl = "[your age gate cover page link]";// <----- Add your age gate url here
		var currentUrl = window.location.href;
		var addRedirect = "?redirect_to=" + encodeURIComponent(currentUrl);
		window.location.href = decodeURIComponent( ageGateUrl + addRedirect );
	}
});
</script>

I am also looking for a solution on this as well, I have used the codes and they are not functioning, Laurenelizabot actually got to a usable cover page.

Lauren did you get this functional?

@potatonet I built the cover page the normal way through Squarespace's WYSIWYG and then applied the javascript. Have yet to find a solution.

Hello, I followed the instructions for the cover page, but I have not been able to get the code to work to store the cookies so the same person does not need to verify their age every time. Is this something that is possible to do?

@potatonet I built the cover page the normal way through Squarespace's WYSIWYG and then applied the javascript. Have yet to find a solution.

Did you ever get the looping to stop, if so how did you manage that. Thank you for your help. And Thank you to JupiterCow for the lines of code...

For those who ended up here an still had a redirect loop - you need to make sure your button or link on your age gate page points to "#legal" for it's url link. This is what the javascript is looking for to override the click handler.

@SuavePirate could you elaborate further on your solution to the redirect loop? Are you saying that we need to link to a page on our websites that has the slug #legal?

Hi @hanamakgeolli - did you get a solution to this before I start trying to do the same?

@SuavePirate - can you help?

Thanks

I have this set up and working now but the age gate only appears the first time you visit the website. I assume this is because the cookie has not expired. Is there a way to set the cookie to expire each time the person leaves the website? If that is not possible, can I set it to expire after 30 minutes?

@bedefelts @hanamakgeolli To fix the redirect loop you have to set your "Yes I'm 21+" button to point to "#legal" for its url link instead of pointing to a web address. Once someone clicks on the button, the javascript will recognize the "#legal" and push the user past the age gate. This is an edit done directly to your age-gate page button, rather than the code.

@juptiercow Do you have a way to set the cookie to expire so the user has to go through the age gate each time they visit the website? Thanks!!

@WesTheDon

You need to remove the expires setting from the cookie, and it will expire when the current session ends.

document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/";

becomes:

document.cookie = cname + "=" + cvalue + "; path=/";

@hanamakgeolli
@bedefelts

I updated the code with more comments and directions. It was pretty developer centric, but hopefully this will help more people get this simple functionality set up on Squarespace.

@jupitercow Thank you so much! I was able to turn it into a session cookie by removing the expires setting.

For some reason this messed up my meta description that is pulled on Google. I think it is pulling something random from the age gate page and I have updated the meta data with no luck. Any thoughts here?

@jupitercow @WesTheDon I was hoping you two could help me - I have very little knowledge of coding and I've posted the code above into the advanced section of my new page, as well as in the code injection for header for the whole of my site and yet it still comes up with '400 Bad Request'. Do you think you could point me in the right direction if possible? Many thanks

Unfortunately. I don't have active access to a squarespace site, so I am not much help beyond what is provided above.

@jupitercow that's understandable - from my understanding of your instructions, I should just need to paste the code into the Advanced section of a newly created cover page and replace the "age gate url" at the bottom of the instructions with my age gate's url and the code should work? Many thanks

@jupitercow - help! I just can NOT get this to work. I have it pasted into the code injection portion of my age gate page, named "age-gate". I have the button for "yes" link to "#legal"... What am I missing? The page simply doesn't appear. I tried with and without an expiration timer, no dice. tried on multiple browsers. Do I need to paste something into the site-wide CSS? I did at first, but squarespace keeps saying there's a syntax error when I paste it there... the site itself is live if having that will help? take16beer.com/age-gate

The first script block goes onto the age verification page under the advanced tab.
The second script block goes into Site -> Advanced -> Code Injection to be displayed sitewide.

The conditional on line 89 should be updated to include a check to see make sure you're NOT on the Age Gate page itself:

if (!getCookie('legal') && !window.location.search.includes('redirect_to') ) {