How to open popup on scroll

To make a popup appear when scrolling, you can use the following code:

<script>
	const scrollPercentage = 70;
	window.addEventListener("load", () => {
		window.addEventListener("scroll", () => {
		  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
		  const windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
		  const scrollPercent = (scrollTop / windowHeight) * 100;
		  if (scrollPercent >= scrollPercentage) {
		    unicornplatform.openPopup("#popup-01-success_default", 0, true)
		  }
		})
	})
</script>

You can create a new popup (GUIDE) and replace "popup-01-success_default" with the ID of the popup you want to display:



Also you can adjust "const scrollPercentage = 70" to the desired percentage at which the popup will appear.

Depending on where you want the popup to show, you can add the code:

- In a custom component on the page to show the popup only on that specific page.



- In the "</body> custom HTML code" section to show the popup on every page of your site.



- In the "Blog home page </body> code" to show the popup on the blog's homepage.



- In the "Each blog post </body> code" to show the popup on each blog post page.

Updated on: 22/07/2024