Jump to content

Gated Content Popup

Recommended Posts

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!

Link to comment
  • Replies 6
  • Views 2.3k
  • Created
  • Last Reply

Top Posters In This Topic

  • 7 months later...
  • 1 month later...

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.