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:
![](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)
Updated on: 22/07/2024
Thank you!