Redirect Members after Login to Squarespace Member Areas
Squarespace Member Areas are an amazing tool for adding exclusive content to your website. They offer a variety of options that can help you expand your online presence, whether you want to create a paid membership for an online course or a free membership for building an online community. However, there are a few limitations that can be a bit frustrating. One of these limitations is the lack of redirect options after login.
When a member logs into their Member Area account, the page simply refreshes and the user panel opens. This can be confusing and not the best user experience. In today's article, I'll show you how to solve this problem by sharing a simple code snippet that you can add to your website. This code uses basic cookies that don't save any of the user's information, but it does trigger a redirect. This way, when a member logs in, they'll be taken to the Member Area they just logged into, rather than just seeing a page refresh.
Member Areas Login Redirect Code:
To use this code snippet , you'll need to have a Squarespace Business Plan subscription. If you don't have that plan, don't worry! You can still use the code by pasting it into a markdown block in your website's footer.
Paste the code below in your footer injection panel. (Settings > Advanced > Code Injection > Footer)
Replace your-url with your own URL.
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
<script>
const div = document.querySelector("body");
callback = function(records){
records.forEach(function(record) {
if(record.removedNodes[0].classList.contains('auth')) {
Cookies.remove('logged-in');
}
if(record.removedNodes[0].classList.contains('unauth')) {
// logged in action
if(Cookies.get('logged-in') !== 'true') {
window.location.href='/your-url'; // <---- Replace this URL with your own
Cookies.set('logged-in', 'true');
}
}
})
}
config = {
childList:true,
subtree:true
}
observer = new MutationObserver(callback);
observer.observe(div,config);
</script>
And that's it! Once you've added the code to your website, your members will be automatically redirected to the URL you specified after they log in.
If you're looking to customize your Squarespace website even more, check out the code shop for unique modifications that are sure to set your website apart!
