I wanted to add an Age Gate / Age Verification pop...

April 4, 2025 at 4:50 PM

I wanted to add an Age Gate / Age Verification pop…

I wanted to add an Age Gate / Age Verification pop-up for Squarespace. The top search engine result had some code, but it A) didn’t work B) didn’t look very good and C) didn’t have any functionality for tracking cookies. Instead, use this code:

First, put this into the injected code in the Header

<!– Age Verification Pop-up HTML –> <div id=“age-verification-popup”> <div class=“popup-content”> <h2>ARE YOU 21+?<div class=“image-circle-container” style=“margin-bottom: 24px;”> <img src=“https://images.squarespace-cdn.com/content/6788837817ec6330feff09fe/a0416e38-e21f-4f14-88b3-0a8c8589e435/lambi_lamb_black.png” alt=“LAMBI” class=“centered-image” fetchpriority=“high” loading=“eager” decoding=“async” data-loader=“raw”>

<div class=“button-container”> <button id=“verify-button-yes”>YES <button id=“verify-button-no”>NO

<p class=“disclaimer”> You must be of legal drinking age in<br> your respective country for entry.<br><br> We encourage drinking responsibly!

Next, inject this CSS:

/* Style for Age Verification Pop-up / #age-verification-popup { display: none; / Initially hidden, JS will show it if needed / position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); / Semi-transparent black overlay / z-index: 9999; font-family: Arial, sans-serif; / Or choose a font that matches / } .popup-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; / White background / padding: 40px 30px; / Adjust padding as needed / text-align: center; border: 1px solid #ccc; / Optional: adds a light border / min-width: 300px; / Minimum width / box-shadow: 0 4px 8px rgba(0,0,0,0.1); / Optional subtle shadow / } / Optional logo styling / / .popup-logo { max-width: 80px; margin-bottom: 20px; } / .popup-content h2 { font-size: 1.2em; / Adjust size as needed / margin-top: 0; margin-bottom: 25px; font-weight: bold; line-height: 1.4; color: #000; / Black text / } .button-container { margin-bottom: 25px; } #verify-button-yes, #verify-button-no { background-color: #000; / Black background / color: #fff; / White text / padding: 12px 30px; / Adjust padding / border: none; cursor: pointer; font-size: 1em; font-weight: bold; margin: 0 5px; / Space between buttons / min-width: 80px; / Minimum width for buttons / transition: background-color 0.2s ease; / Smooth hover effect / } #verify-button-yes:hover, #verify-button-no:hover { background-color: #333; / Slightly lighter black on hover / } .popup-content .disclaimer { font-size: 0.9em; / Smaller font size for disclaimer / color: #555; / Grey text / line-height: 1.5; } .image-circle-container { width: 70px; / Adjust size of the circle as needed / height: 70px; / Must be the same as width for a perfect circle / background-color: transparent; / Black background / border-radius: 50%; / This makes the div circular / display: flex; / Enables flexbox for easy centering / justify-content: center; / Centers content (image) horizontally / align-items: center; / Centers content (image) vertically / overflow: hidden; / Ensures image doesn’t spill outside the circle if it’s too big / margin-left: auto; / Centers the circle container itself horizontally / margin-right: auto; / Centers the circle container itself horizontally / } .centered-image { display: block; / Removes extra space below the image / height: 50px; / Your desired image height / width: auto; / Let width adjust automatically to maintain aspect ratio / max-width: 90%; / Optional: Prevents image from touching the circle edge / max-height: 90%;/ Optional: Prevents image from touching the circle edge */ }

Finally, inject this code into the footer

Enjoy!

"I" before "E" except Gleitzman

Benjamin Gleitzman is a technologist, artist, and founder.

He is the CTO at Replicant AI. He is also a founder of the hacker collective Ruse Laboratories, creator of the The Algorithm Auction, originator of Pup's Pool Party, and producer at Sublimate NYC.

He lives in a
van down by the river.

Gleitzman graduated from the Massachusetts Institute of Technology where he worked with Hal Abelson to enhance introductory programming experiences using mobile devices.

Gleitzman was a visiting researcher at Google Research in Mountain View, California where he built App Inventor for Android, a graphical programming language for creating Android phone applications that is now at the core of the MIT Center for Mobile Learning.

He is the founder of NextStep Tech, an organization teaching software engineering, creative thinking, and entrepreneurship to junior and high school students.

In his spare time he enjoys creating electronic music, discussing programming concepts, and playing WikiMaze, his remake of Encarta 95's classic trivia game.

He also posts useful bits of knowledge on gleitzman.com.

I wanted to add an Age Gate / Age Verification pop...

I wanted to add an Age Gate / Age Verification pop…

"I" before "E" except Gleitzman

Popular Tags

Popular Articles