Welcome to the guide on how to create member-specific pages and set up login redirects using Memberstack. This feature was previously known as member-specific pages.
Method 1: Personalizing Template Pages
The first method involves using data attributes to personalize a template page for each member. This allows you to use Memberstack as the CMS for text data and links. To learn more about this method, check out our article on personalizing template pages with data attributes.
Method 2: Creating Specific Pages
The second method is to manually or automatically create specific pages for each member. You can automate this process using webhooks, Zapier, or Make. To learn how to create specific pages for your members, follow the steps below.
Add a Member Specific Login Redirect in Memberstack
- Go to the Members page and select the member for whom you want to create a specific page.
- Scroll down and open the "Login Redirect" dropdown.
- Enter a page slug starting with "/" for the specific page. For example, you can use
/welcome/frank - Click Save, and you're done! The next time the member logs in, they will be redirected to their specific page.
Securing Member-Specific Pages
To prevent unauthorized access to member-specific pages, follow these steps:
- Make the URL unguessable to avoid other members stumbling upon it accidentally. For example, use a URL like
/welcome/frank-n2938n239un109828n. - Add the following code before the closing </body> tag in your CMS collection or static page.
<script> const accessDeniedPath = "/access-denied"; window.$memberstackDom.getCurrentMember().then(({ data: member }) => { if (member && member.loginRedirect) { let redirectPath = member.loginRedirect; let currentPath = window.location.pathname; if (currentPath !== redirectPath) { window.location.href = redirectPath; } } else { window.location.href = accessDeniedPath; } }); </script> - Remove or modify your sitemap to prevent search engines and savvy browsers from accessing the member-specific pages. This is a best practice when using Memberstack.
- Remove any public links that point to the member-specific page.
By following these four steps, you can ensure that your member-specific pages are as secure as Google Photos!
Create a Dynamic Dashboard Button
You can use the data attribute data-ms-action="login-redirect" to create a button that dynamically redirects the user based on their login redirect. This button will only be visible when a member is logged in.
Using Make or Zapier
If you have automations in place to create a CMS page for each member you can use Make.com or Zapier to dynamically update a Member's login redirect on the fly. This video will explain how in under 1 minute.
Keywords: Member-specific pages, user-specific page, user-specific, member-specific
Comments
27 comments
How do you link back to a member's specific login page if you have multiple pages under gated content?
Jack Heerink You'll need to link your gated content pages together or create a "hub" page that links out to all of the pages.
Is there any way to use this Login Redirect feature for user-specific links? I want to be able to redirect a user to where I want based on custom information store in their profile.
I'm looking for some code similar to this, but I can't get it to work:
<script>
memberstack.onReady.then(function(member) {
var url = member.attributes["post-discovery-attributes-2a"];
var els = document.querySelectorAll("[data-memberstack-attribute='post-discovery-attributes-2a']");
for (var i = 0; i < els.length; i++) {
els[i].href = url;
}
});
</script>
Let's see... something like this? https://docs.memberstack.com/hc/en-us/articles/10125200009627-Dynamic-Links-using-Custom-Fields
Is there a way to set member-specific sign up pages upon sign up?
Say its set to ' /980s9s29we32223fe8v09-frank ' in login redirect on default but I want to be
' /welcome/980s9s29we32223fe8v09-frank '
Is there a way to automate that within memberstack?
Hey KC Katalbas, you may just be trying to edit the login redirect section of Memberstack which is explained here: https://docs.memberstack.com/hc/en-us/articles/7384608370715-Setting-Redirects-for-Signup-Login-Logout
This might be overkill but watch this tutorial which helped me figure out how to drive users to custom webpages after signup: https://www.youtube.com/watch?v=ukmzHvYfs-8&t=877s&ab_channel=SurvivingYour20%27s
I don't follow his solution 100% because the Zapier Zaps take time to create the profile and get everything setup. Instead, I send the user a confirmation email with the signup link which gives Zapier time to process all of the steps I have setup.
Hey KC Katalbas 👋
It's possible to update a member's login redirect using Make or Zapier, but not automatically inside Memberstack.
And can you show me where it says it's set to '/980s9s29we32223fe8v09-frank' by default? I'm not 100% sure what you mean.
The good news is you're able to enter whatever page slug and path structure you want 🎉 So starting with /welcome/ shouldn't cause any issues.
And thank you Nicholas Platt for sharing those solutions 🙏
Thanks Duncan Hamra! I ended up using Zapier. I was a silly goose and had already set up a zap for it, but thought it was going through on default. Thanks Nicholas Platt as well!
Thanks for the article Duncan, however...
I have copied and pasted your code exactly but keep getting this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'getCurrentMember')
William Sayer you're welcome!
Sorry to hear it's not working for you 🤔 Let's see if we can get that fixed for you.
Where did you paste the code on your site? it's important that it lives in the "Body" code section (so that the Memberstack header script has time to run first).
Thanks for the reply Duncan Hamra,
I did put in the "body" code area - in fact I've explained the problem in more detail in the following thread:
https://docs.memberstack.com/hc/en-us/community/posts/11684122425499/comments/13089052469403
Thanks for the help!
Hi there, I just wanted to flag that this seems meaningfully less secure than the 1.0 implementation (where member-specific pages were gated only to people who were logged in, not based on unique link). My understanding with this implementation is that anyone with the member-specific URL will be able to access that person's data, even if they are not logged in. Is that right? If so, is there a way to work around this?
Hey, Yash 👋 Thank you for posting and helping to clarify this.
If a non-member attempts to access a member-specific page they will get the "Access denied" redirect. If a logged-in member tries to access another member's page they will get redirected by the code under the "Prevent Others from Accessing the Page" section.
To say a bit more: this feature is equally as secure as member-specific pages in Memberstack 1.0.
However, in this version, we tried to make the code to "Prevent Others from Accessing the Page" more transparent. In version 1, this code was included automatically. In 2.0 we are asking you to add the code so you can see exactly how it works.
I hope that all makes sense. Thanks again for commenting 👍
I have built a member-specific dashboard for my logo design agency where clients can see all their orders and details using Memberstack and Webflow CMS Orders Collection. The problem is, when a client clicks on an order in the dashboard it takes him to the order page and the order page is accessible to everyone.
Hey Ilyas Boulmane 👋
How many clients do you have? One idea is to create a unique plan for each of your clients. From there, you can use our gated content feature to do some additional content gating.
You can use the "starts with" selector and gate any content that starts with "/orders/client-A-" or "/orders/client-b-" etc.
Hey Duncan Hamra, I'm going to receive many clients and multiple orders. I can't manage to do this manually, I have to handle the projects, and my staff.
Understood 👍 In that case, I recommend following the steps in the article above. So long as the URL is unguessable, you remove public links, and you remove your sitemap, then the only way someone could get to an order page is by clicking on a link in their specific dashboard or by sharing the link with someone else.
Hey Duncan Hamra,
I have a client requesting a certain functionality and I was wondering if thats possible with Memberstack. He created custom marketing landing pages as pitches with the customers name, logo, tailored suggestions & (sensible) information towards them. Therefore, a cms is set up with different customers. Right now, these pages are accessible to everyone with the link and the url looks something like this: nameofclientscompany.com/pitch/customername
Since he doesn't want other people to find the marketing pages for a variety of customers, he wants to protect these cms inner pages links with a custom password for each cms collection page, that the customer can set once he logs in.
To demonstrate:
nameofclientscompany.com/pitch/customername1 should have the password 12345678 that the customer set for this domain
nameofclientscompany.com/pitch/customername2 should have the password hello123 that the customer set for this domain
and so on..
Also, the client wants the customers to only be able to visit that one marketing landing page cms url thats tailored towards him and not the others of course.
I hope this all makes sense. Thanks in advance for your answer.
Cheers
Hey Sebastian Brühl 👋 Apologies for the slow reply, I missed your message.
What you want to do should be possible by following the instructions at the top of the page. You can manually create an account for each customer in Memberstack, enter their email and create a password for them, and then share the password via email.
You can prevent customers from accessing other customers' pages with the code at the bottom of the article. Let me know if you have any questions! duncan@memberstack.com
Hello Duncan, How can I automate member-specific pages using zapier?
Goosetlk null Great question! I just updated the article https://docs.memberstack.com/hc/en-us/articles/7385311945499#automation
Thanks Duncan! Duncan Hamra
<script> const redirectTo = "/access-denied"; window.$memberstackDom.getCurrentMember().then(({ data: member }) => { if (member && member.loginRedirect) { let redirect = member.loginRedirect; let currentPath = window.location.pathname; if (currentPath !== redirect) { window.location.href = redirectTo; } } else { window.location.href = redirectTo; } }); </script>
Is this code correct?
Shouldn't it redirect to "redirect" instead of "redirectTo" if everything is ok? Please make the variables a bit more distinct if possible
Hey Joao Filipe 👋
The code you provided is almost correct. However, there seems to be a small mistake in the logic. Instead of redirecting to the "redirect" variable, it should redirect to the "redirectTo" variable. Here's the corrected code with more distinct variable names:
In this code, I've renamed the
redirectTovariable toaccessDeniedPathto make it more distinct and reflect its purpose. Now, if the member is logged in and has a specific login redirect set, it will redirect to that path. Otherwise, it will redirect to theaccessDeniedPath(previously "redirect") if the current path is different from the redirect path.Let us know if you have any further questions!
Thank you - so could you check the code from the main article above? It looks that is pointing to the same variable
Please sign in to leave a comment.