Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Creating a Newsletter Pop Up

Avatar

Level 1

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.

 

1 Accepted Solution

Avatar

Correct answer by
Level 8

@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.

 

 

 

 

 

View solution in original post

2 Replies

Avatar

Correct answer by
Level 8

@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.

 

 

 

 

 

Avatar

Community Advisor

@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