Creating a Newsletter Pop Up

[kushal_srivastava]

Hey Everyone,

My objective is to create a newsletter pop up that appears on a certain page as soon as half the page has been scrolled.

please let me know If there is anything out of the box that can be used else How should I proceed?

Thanks in advance.

[raj_mandalapu · Accepted solution]

@kushal_srivastava  There is no OOTB functionality and this is more of a front end work, if you are familiar with jQuery then you can try the below approach.

First, you need to find out the scroll position to find half of the page, for this, you can use the below sample code

https://gist.github.com/JPustkuchen/d436d189d1840489454b982e90559999

When the scroll reaches the middle of the page you need to call the function and that function should perform below step.

The important thing is how are we authoring popup, if you are planning to author popup content on a separate page then you need to make a call to that page URL by using jquery Ajax call and get the page main content, then you need to put this content inside the hidden div something like this ${'.popup').html("<page content>") and this hidden div should be visible only when scroll reaches the middle of the page.

If you are not going to author popup content on a separate page then you can directly put popup content in the hidden div and show when scroll reaches the middle of the page.

[Anudeep_Garnepudi]

@kushal_srivastava 

I don't think there is anything such OOTB. I suggest to create a custom component(if content is authorable). Use Intersection Observer to show the content on scroll. Below is API documentation.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API