Join the Webstudio community

Updated 3 months ago

Trigger Newsletter Subscription Popup at 50% Page Scroll

At a glance

The community members are discussing how to trigger a newsletter subscription popup when a user scrolls through 50% of a page. Some suggestions include using a dialog component, a webhook form, or an automation tool like n8n. However, there is some confusion around whether a dialog is the appropriate approach, as a dialog is typically triggered by a click rather than scroll position. The community members suggest alternatives like a basic div that grows into the viewport on scroll, or a scroll-triggered click on a dialog button. They also note that this pattern may not be the most accessible and recommend sticking to more popular patterns like button clicks or scroll animations. There is no explicitly marked answer.

Hi All, I want to trigger a newsletter subscription popup when the user enters 50% of the page one time. What is a good way to do that?
1
O
S
M
20 comments
dialog component
your automation tool n8n etc
or directly to whatever database solution you use e.g. baserow and automating from there
yes thats good. How do I trigger the dialog when the page is scrolled 50%
This is a perfect use case of animation engine right @Oleg Isonen
you don't need a dialog in this case
at this point I am not sure what UX you are trying to achieve
@Oleg Isonen I want a newsletter subscription popup / dialog to auto show with some transition when a user scrolls through 50% of a page ... anything to clarify?
that's not a dialog
dialog happens on click
you just want a basic div to grow into viewport on scroll
or you want the dialog opening to get triggered by scrolling and then be able to close it like a regular dialog?
I haven't seen this pattern, not sure if this is a great idea in terms of accessibility
I would recommend to stick to a more popular pattern, button click or scroll animation
you kinda want to have a mixture
if you really want this I guess you could trigger a click on a button with a dialog by detecting a scroll position
this is not a scroll driven animation, its just a scroll triggered click
a few lines of js would allow you to detect scroll and position and make a click on a dialog trigger button
I think he means like a pop up
Add a reply
Sign up and join the conversation on Discord