Gated Content Popup

Site URL: https://www.mensch.club

Hello all! 

We are trying to add a gated content popup to certain pages that simply asks for the users email address to enter. We don't want a members situation where people have to login or signup. We just want the email address and for access to be granted once we have it. 

Squarespace promotional popups don't work because the user can exit it and view the page anyways. 

Squarespace members area has been touted as the solution but it requires login/signup. 

Is this complicated? Am i being stupid? Am i going mad? 

It seems like a simple thing and very widely used as a marketing tool. 

Any help would be greatly appreciated. We are open to third party extensions. 

Thank you!

See an example from another site which is exactly what we are looking for. Thank you again! 

Jonahklewis, were you able to figure this out? I'm wondering about the same thing!

interested as well!

Recently I wrote this guide

First, edit current page > Add a Newsletter Block with Email Address Field (or any fields what you want)

Next, add this code to Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  function handlePopUp() {
    var popup = $('.newsletter-block');
    var isHidePopup = getCookie('coookieIsHidePopup');
    if('true'!==isHidePopup){
      popup.css('display', 'block');
    }
    // Hide popup when clicking outsite
    $(document).click(function (e){
      if('block' == popup.css('display')) {
        if (!popup.is(e.target) && popup.has(e.target).length === 0){
          hidePopupAndSetCookie( popup, 1 );
        }
      }
    });
    // Hide popup when close or submit
    $('#close-popup, .newsletter-form-button, header.newsletter-form-header').click(function() {
      hidePopupAndSetCookie( popup, 1 );
    });
  }
  function hidePopupAndSetCookie(popup, time) {
    popup.hide();
    setCookie('coookieIsHidePopup', 'true', 1);
  }
  function setCookie(cname, cvalue, exdays) {
    var now = new Date();
    //d.setTime(d.getTime() + (exdays*24*60*60*1000));
    //var expires = "expires="+ d.toUTCString();
    //window.document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    now.setTime(now.getTime() + 24 * 3600 * 1000);
    document.cookie = "name=value; expires=" + now.toUTCString() + "; path=/";
  }
  function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(window.document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    
    return "";
  }
  handlePopUp();
});
</script>
<style>
.newsletter-block {
  position: fixed;
  width: 340px;
  background-color: green; /* newsletter background */
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 999;
  display: none;
}
/* Close icon */
.newsletter-block header.newsletter-form-header:before {
    content: "\e01a";
    font-family: 'squarespace-ui-font';
    color: white;
    border: 1px solid white;
    position: absolute;
    right: -30px;
    top: 0;
    padding: 5px;
    line-height: 15px;
  z-index: 20000;
  cursor: pointer;
}
</style>

Did anyone find out about this? I'm also looking for the same functionality!

12 hours ago, CandelaB said:

Did anyone find out about this? I'm also looking for the same functionality!

Something like this https://codepen.io/nicknish/pen/prLbYV

or what should it look like?