Display an Element on Signup (login, logout, or any other redirect)

Article author
Duncan Hamra
  • Updated

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. 

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.