> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.unicornplatform.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://help.unicornplatform.com/en/article/how-to-create-popups-gc9ynw/)) and replace "popup-01-success_default" with the ID of the popup you want to display:

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/chromecwfvuiyua8_qi46vn.png)

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.

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/chrome2xyn3oikqj_suv9gl.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/chromeyqppkf0oho_1ueqwhz.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/chromevveqxj7quu_d5ofoy.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/chromeejnloz2h9t_13nyqsm.png)