Advanced Member Only HTML

Displaying / Hiding HTML Elements

You can hide content from users who are not signed in or from users who are signed in if you have access to the HTML to edit the class names. This can be used to create member only navigation for example.

To make any DOM element visible to users who are logged in only, use the class name "SF_li". To make any element hidden to users who are logged in, use the class name "SF_lo".

Then add the following script to the bottom of the page if you want this to work on specific pages only, or in the site footer if you want this to work throughout the site:

<script>(function(){var i,j,a,x;try{x=localStorage.getItem("SF_nam");}catch(e){x="";}try{for(a=document.querySelectorAll(".SFnam"),i=a.length-1;i>=0;i--)a[i].innerHTML=x?x:"";}catch(e){}try{for(a=document.querySelectorAll(".SF_li"),i=a.length-1;i>=0;i--)a[i].style.display=x?"":"none";}catch(e){}try{for(a=document.querySelectorAll(".SF_lo"),i=a.length-1;i>=0;i--)a[i].style.display=x?"none":"";}catch(e){}})();</script>

Note that this only checks if the user is logged in, and does not detect what labels/folders the user has, or if their membership is expired. Note also that the above only works if the page is on the same domain (including HTTP vs HTTPS) as the login page. This does not work if the page is HTTP and the login page is HTTPS and vice versa.

Redirecting Non-Members

The following provides a HTML snippet that must be placed in the <header> section of the page. This can be used on SquareSpace and Weebly blog pages to make those pages member only.

This code snippet will not display a login box or error message on the page. Instead you must provide 3 URLs for us to redirect users who do not meet the criteria for accessing the page:

  • Users who are not logged in
  • Members whose membership has expired
  • Members who do not have the required labels/folders

You must provide all 3 URLs (including http: or https: prefix) or those users will see a blank screen. All 3 URLs can point to the same page, but it may be desirable to create 3 different pages on your site so you can customize the message on the page for the 3 conditions.

Note: Previews for the page may not work properly. Use a different browser (where you are not logged into Squarespace/Weebly/etc) to view the actual site.

 
<style>body{visibility:hidden}</style><meta id="SFctr" data-org="" data-mfl="" data-rll="" data-rle="" data-rlf="" /><script type="text/javascript" src="https://cdn.membershipworks.com/mfl.js" defer></script>