I’ve set up a custom sign up popup and I want users to be able to click a line of text (“Log in instead”) to hide the sign up popup and instead show the login popup. I want both of these popups to be reusable elements so they can be referenced from across my app.
I can’t seem to show another reusable element from a reusable element:
You have to drop the signup reusable in the login and visa versa. May be better to have them handled under 1 reusable and have each with their own groups and custom state or URL parameter to determine showing group instead if you want to go that route.
However, it is standard practice to have them as their own individual pages instead of popups. Google/fb Pixel tracking for analytics handles them better and it’s easier for marketing teams to target based on URLs visited over having to setup custom conversions/tags for if the popup was visited or not.
That makes sense on combining them and more or less works for me (it’s not behaving with my minimum height, but that’s not a show stopper).
On pages vs popups: do you mean people don’t commonly build reusable popups? That feels like an obvious use case to me (login, newsletter signups, promos, etc.). Am I overlooking something since this is a new component to me?
For the minimum height you should be able to fix that. Not personally seen an issue with it.
For pages vs popups: Not so much of a tech issue with it you can get it to accomplish the same function either way. This is more of a recommendation on best practices to use pages over popups. Few reasons.
1: This is more for app scalability and the marketing team than dev team but important to know both sides. When setting up audiences for fb/google/snap/twitter, etc advertising you can re target users who have seen a specific page pretty easily by just filtering your pixel visitors by /login or signup. For example I want to target website visitors who visited /signup page but didn’t ever signup you can do that pretty easy with paid ads. No custom work or anything needed from marketing or dev just simply the pixel code in the website header.
However if you’re using popups, pixels don’t track popups shown. You have to actually have the developer create a custom conversion or tags for “signup popup visited” and run JS to track the visit for each one of the pixels (fb, google, twitter, snap, etc) and if pixel IDs or anything ever changes the dev team have to keep up with it otherwise you’re losing tons of valuable data to scale the app.
2: Many times people tend to bookmark login pages. You can’t bookmark a popup.
So it’s totally fine to use popups from a tech perspective but I’m terms of overall operations of an app especially when using pixel tracking it’s not recommended to go with popups.
Chris is right about best practices, but in case it still helps:
A hacky way is to pass states through re-useable elements. Let’s call your reuseable elements LOGIN and SIGNUP which are on page REGISTER. When ‘log in’ is clicked, set state of reuseable element LOGIN loginClicked = yes
On REGISTER, create a ‘do when loginClicked = yes’ (every time) and set state of reuseable element LOGIN loginClicked = no. And then in the same workflow, hide LOGIN and show SIGNUP.
So, when login is clicked, we set a state in the reuseable element, hide that reuseable element, show another, and reset the state.
This topic was automatically closed after 70 days. New replies are no longer allowed.
