How to connect a pop-up solution to collect emails for newsletter?

Memberships & subscriptions
3

Hi! instead of a plugin, I will share how I manage to do this on my blog with code injection, I used this script:

  1. The first part of the script is a function to find out if the visitor is logged in as a member or not, I decided to not show this pop up to already registered members.

  2. The second part oppens the pop up, In my case I decided to show it once a day only, so it waits 86.400 seconds before showing it again (it stores this value in a cookie)

  3. The third part is the trigger, it tries to open the pop up if visitor scrolled more than 25% of the page.

Here is the code:

<script>
// Define an async function to check if the current user is a member.
async function isMember() {
  // Fetch the member status from the API and store the response.
  const response = await fetch(`${location.origin}/members/api/member/`);
  // Check if the response status is 200 (OK) indicating that the user is a member.
  const bMember = response.status === 200 ? true : false;
  // Return the member status.
  return bMember;
}

// Define an async function to control the opening of a popup.
async function openPopup() {
  // Check if the current user is a member.
  const member = await isMember();
  // Retrieve the timestamp of the last popup from sessionStorage.
  const lastPopup = sessionStorage.getItem('POPUP_OPENED');
  // Calculate the time passed since the last popup was opened.
  const timeDelta = lastPopup ? (new Date() - new Date(lastPopup)) / 1000 : Infinity;

  // Show popup once a day if the user is not a member.
  if (!member && timeDelta > 86400) { // 86400 seconds in 24 hours
    // Record the current time as the new 'last popup opened' time.
    sessionStorage.setItem('POPUP_OPENED', new Date().toISOString());
    // Create a temporary link element to trigger the popup.
    const popupLink = document.createElement('a');
    popupLink.href = '#/portal'; // Set the href to your popup's URL or anchor.
    document.body.appendChild(popupLink); // Add the link to the body to make it clickable.
    popupLink.click(); // Simulate a click on the link to open the popup.
    document.body.removeChild(popupLink); // Remove the link from the body after opening the popup.
  }
}

// Add an event listener for the scroll event on the window.
window.addEventListener("scroll", () => {
  // Get the current scroll position.
  let scrollTop = window.scrollY;
  // Get the total height of the document.
  let docHeight = document.body.offsetHeight;
  // Get the height of the window.
  let winHeight = window.innerHeight;
  // Calculate the percentage of the page that has been scrolled.
  let scrollPercent = scrollTop / (docHeight - winHeight);
  let scrollPercentRounded = Math.round(scrollPercent * 100);

  // Try to open the popup if the visitor has scrolled more than 25% of the page and is not a member.
  if (scrollPercentRounded > 25) {
    openPopup();
  }
});
</script>
3 Likes