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

Creating a Newsletter Pop Up

Avatar

Avatar
Level 1
kushal_srivastava
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
kushal_srivastava
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
View profile
kushal_srivastava
Level 1

25-02-2021

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.

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 1
MVP
raj_mandalapu
MVP

Likes

124 likes

Total Posts

203 posts

Correct Reply

72 solutions
Top badges earned
Validate 1
Contributor
Shape 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
MVP
raj_mandalapu
MVP

Likes

124 likes

Total Posts

203 posts

Correct Reply

72 solutions
Top badges earned
Validate 1
Contributor
Shape 1
Give Back 5
Give Back 3
View profile
raj_mandalapu
MVP

25-02-2021

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

 

 

 

 

 

Answers (1)

Answers (1)

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

274 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

274 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

25-02-2021

@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