Trigger the Ghost Portal popup based on page scroll progress

The Ghost Portal became a very powerful and important part of Ghost CMS, it offers a seamless way to capture emails and present your membership to your audience.

This guide will help you understand how you can trigger the Ghost Portal popup based on the user's page scroll progress, but first let's see why this could be helpful.

Advantages of using scroll-triggered popups

Depending on your objectives and strategy, popups can be used to:

1. Improve engagement - strategically placing the popup after a certain scroll depth, you ensure that the user is already interested and engaged in your content. This increases the likelihood of the user responding positively to your call-to-action, whether it's signing up for a newsletter, making a purchase, or subscribing to your membership.

2. Reduced bounce rates - popups that appear immediately after a webpage loads can often be intrusive and off-putting to users, leading to increased bounce rates. However, by triggering the popup based on the user's scroll progress, you ensure that the user has had the opportunity to interact with your content and understand the value you offer before being presented with a call-to-action. This can significantly reduce bounce rates and improve the overall user experience.

3. Increased conversion rates - When users are presented with a relevant offer or call-to-action at the right time in their browsing journey, they're more likely to convert. Scroll-triggered popups give you the power to make this happen, turning passive browsers into active customers or subscribers.

Ghost Portal popup

You can develop your own custom popup, but a quick and easy way to implement this is using the existing Ghost Portal.

Ghost Portal is a built-in feature of Ghost, which allows you to handle member sign-ups and logins directly on your site. It is designed to provide a smooth experience for both site owners and users. Ghost Portal is highly customizable and integrates well with Ghost's Members & Subscriptions feature.

Ghost Portal can be triggered by links(#/portal), or using data properties (data-portal), but in this guide we will go one step further and trigger it based on the scroll progress.

Portal popup based on page scroll

The first thing we need for this is the scroll event listener:

window.addEventListener("scroll", () => {
  let scrollTop = window.scrollY;
  let docHeight = document.body.offsetHeight;
  let winHeight = window.innerHeight;
  let scrollPercent = scrollTop / (docHeight - winHeight);
  let scrollPercentRounded = Math.round(scrollPercent * 100);
  
  if (scrollPercentRounded > 25) {
    openPopup();
  }
});

In the code above the 'scroll' event listener calculates the percentage of the page that has been scrolled. Once the user scrolls through 25% of the page, the openPopup function is called.

Here's the openPopup function:

function openPopup() {
  const popupLink = document.createElement('a')
  popupLink.setAttribute('href','#/portal')
  popupLink.click();
}

This function will create a link element and assign the #/portal to its href attribute. You can point to different screens from portal like signup, or a specific membership tier. (Check your Settings > Portal for all the available links).

If you add those two function in your Code Injection footer, the Ghost Portal will appear once you scroll past 25% of the page, however you will probably want to add some conditions besides the scroll percentage. You probably want at least to make that the user is not a member, and to not spam the user by triggering the popup too frequently.

To solve this we will implement those checks. First, a function to check if the current user is a member:

async function isMember() {
  const response = await fetch(`${location.origin}/members/api/member/`);
  const bMember = response.status === 200 ? true : false;
  return bMember
}

Next, let's extend the openPopup function with those checks:

async function openPopup() {
  const member = await isMember();
  const timeDelta = (new Date() - new Date(localStorage.getItem('POPUP_OPENED'))) / 1000;
  
  if (!member && timeDelta > 60) {
    localStorage.setItem('POPUP_OPENED', new Date())
    const popupLink = document.createElement('a')
    popupLink.setAttribute('href','#/portal')
    popupLink.click();
  }
}

In the code above, we first determine if the user is already a member. If they are not, we then check the time since the popup was last opened. If it has been over 60 seconds, we trigger the popup.

Here's the complete code, which can be added either in your Site Code Injection or in a specific Post/Page Code Injection:

<script>
async function isMember() {
  const response = await fetch(`${location.origin}/members/api/member/`);
  const bMember = response.status === 200 ? true : false;
  return bMember
}
  
async function openPopup() {
  const member = await isMember();
  const timeDelta = (new Date() - new Date(localStorage.getItem('POPUP_OPENED'))) / 1000;
  
  if (!member && timeDelta > 60) {
    popupOpened = true;
    localStorage.setItem('POPUP_OPENED', new Date())
    const popupLink = document.createElement('a')
    popupLink.setAttribute('href','#/portal')
    popupLink.click();
  }
}
  
window.addEventListener("scroll", () => {
  let scrollTop = window.scrollY;
  let docHeight = document.body.offsetHeight;
  let winHeight = window.innerHeight;
  let scrollPercent = scrollTop / (docHeight - winHeight);
  let scrollPercentRounded = Math.round(scrollPercent * 100);
  
  if (scrollPercentRounded > 25) {
    openPopup();
  }
});
</script>

And here's a link to a working demo on the Saaga: https://saaga.brightthemes.com/new-horizons-probe

With such a strategy, you can subtly encourage your readers to become members, ensuring they've engaged with your content before being presented with the option to subscribe. It's a good example of how Ghost's flexibility allows you to provide a customized, user-friendly experience.