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
1 comment
Hello Duncan Hamra,
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
Please sign in to leave a comment.