Creating a Newsletter Pop Up | Community
Skip to main content
K
kushal_srivastava
February 26, 2021
Solved

Creating a Newsletter Pop Up

  • February 26, 2021
  • 2 replies
  • 1402 views

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.

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by raj_mandalapu

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

 

 

 

 

 

2 replies

raj_mandalapu
raj_mandalapuAccepted solution
Level 7
February 26, 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.

 

 

 

 

 

    Anudeep_Garnepudi
    Community Advisor
    Anudeep_GarnepudiCommunity Advisor
    Community Advisor
    February 26, 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

     

      Terms & ConditionsAccessibility statement

      Loading footer...