Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Creating a Newsletter Pop Up

kushal_srivastava
Level 1
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
raj_mandalapu
Correct answer by
Community Advisor
Community Advisor

@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
raj_mandalapu
Correct answer by
Community Advisor
Community Advisor

@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

Anudeep_Garnepudi
Community Advisor
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