In this article, I'll show you how to show a welcome modal whenever a member creates an account. This "feature" requires a tiny bit of custom code which I will provide for you below.
Here's a link to clone the project →
And here's a link to copy the modal →
I recommend watching the video first and then cloning this demo project which is already fully set up for you. From there, you can edit the UI til' your heart's content.
Closing <Body> code...
<script>
function showElement () {
try {
const urlParams = new URLSearchParams(window.location.search)
return urlParams.get("welcome")
} catch (e) {
return false;
}
}
if (showElement()) {
var elements = Array.from(document.querySelectorAll("[welcome-modal]"))
elements.map((el) => {
el.classList.add("is-signup")
})
}
</script>
The bolded welcome in line 5 is the link parameter. A link such as /dashboard?welcome=true or /dashboard?welcome=new-member would trigger the code.
[welcome-modal] is the data attribute that tells the code where to apply the class is-signup.
Keywords: Show an element once, content after log-in, after signup, etc.
Comments
14 comments
Hello Duncan from Memberstack,
Could we display a modal when a member is logged out by the "Disable concurrent logins" only or this apply for all kind of logout ?
Regards,
William
Hey William de Broucker 👋
Good news! We recently released a custom code snippet which can direct members when they are logged out because of disabled concurrent logins.
https://docs.memberstack.com/hc/en-us/articles/14252802411035--Code-Concurrent-Logout-Redirect
Hi Duncan from Memberstack.
Just implemented this, works like a charm thanks for the clonable component.
One question, We're on Memberstack 2.0 and in the default redirect setting screen I only have the option "On signup / On purchase" whereas in your tutorial there was just "On signup" event.
I only want the welcome modal to be triggered on sign up, not when people later switch from the free (in our case that is: no plan) to the paid plan. How does this "On signup / On purchase" event exactly behave in Memberstack 2.0?
Best,
Arne
Hey Arne 👋
You can ignore that. I just flagged it with the team to update that text. The default redirects page should only say "On Signup." Thanks for checking!
Thnks!
Hi Duncan from Memberstack, during testing we switched from one plan to another plan on our site and after payment it redirected to the welcome modal. So besides the text on the default redirects page, it seems it actually also triggers this redirect on every purchase. Needless to say we only want the welcome modal to be triggered one time during the first signup. Would be great if you guys can fix this.
Hi Arne Verschoor, do you have redirects set at the plan level as well? If not, I think that's the issue. You'll want to override the welcome params under the plan level redirects. If you do have plan-level redirects set that include the welcome modal params, then we'll need to rethink how your site is currently configured. Either way, I'm confident we can find a solid solution.
Hi Duncan from Memberstack. Thanks for the quick reply. We do not have redirects set at the plan level. This is because someone can sign up without a plan but also signup on a paid plan, in both cases we want the welcome member to be shown the welcome modal of course. However, we don't want to show the welcome modal of a member who is already signed up but just switches plans (upgrades). This is what currently happens. The plan level redirect also only provide the possibility for a redirect on the signup AND purchase event together. You can't choose only the signup event just as with the default level redirects. Hence I'm caught in a loop.. haha.
I think it would be fixed if one could set a redirect solely on the signup event.
Ahh understood 🤔 In that case, it maybe wise to use another method for deciding when to show the welcome modal... I will give this some thought tomorrow or ealry next week and share a solution.
Oh wait!! I just had an idea... you could add the data-ms-content="!paid-plans" attribute to your welcome modal. That attribute will hide the modal if the member has a paid plan 🎉
Thanks for the reply! But won't the welcome modal be hidden then in case someone signs up on a paid plan right away?
Ahhh darn it, you're right 🤔 I have two ideas..
Hmm yes those are options but not ideal.
Wouldn't it be easiest to have seperate redirect options in Memberstack for signup and purchase events instead of combining them? Would provide more flexibility and customization for everyone.
Arne Verschoor we considered it, but ultimately decided to go with this. I'll bring it up with the team and let you know if we decide to make the change. But that said, I would still find a solution that does not count on this change happening in the near future. I wish I could just make the change for you but there are allll kinds of moving parts that will go into implementing this. It will take some time if we decide to move forward.
Please sign in to leave a comment.