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

**URL:** <https://forum.ghost.org/t/how-to-connect-a-pop-up-solution-to-collect-emails-for-newsletter/41155>\
**Category:** Memberships & subscriptions\
**Created:** [September 12, 2023, 11:30pm UTC](https://forum.ghost.org/t/how-to-connect-a-pop-up-solution-to-collect-emails-for-newsletter/41155 "2023-09-12T23:30:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cieloazul](https://avatars.discourse-cdn.com/v4/letter/c/76d3ee/32.png) [@cieloazul](https://forum.ghost.org/u/cieloazul)\
**Post date:** [September 12, 2023, 11:30pm UTC](https://forum.ghost.org/t/how-to-connect-a-pop-up-solution-to-collect-emails-for-newsletter/41155/1 "2023-09-12T23:30:46Z")

</div>

Usually there are hundreds of popup plugins on the platform like wordpress but ghost does not have such a plugin unfortunately.

After researching, I found that this one is the best option for my case:  
[https://popupsmart.com](https://popupsmart.com/) (Free up to 10,000 page views)

But now I would like to know how to connect the sign up form to Ghost subscribers.

I would like to **not use Zapier**. Any ideas?

---

<div class="post-metadata">

**Author:** ![jtraverso](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/jtraverso/32/29307_2.png) [@jtraverso](https://forum.ghost.org/u/jtraverso)\
**Post date:** [March 7, 2024, 2:40pm UTC](https://forum.ghost.org/t/how-to-connect-a-pop-up-solution-to-collect-emails-for-newsletter/41155/3 "2024-03-07T14:40:25Z")

</div>

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:

```javascript
<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>

```

---

<div class="post-metadata">

**Author:** ![mheland](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/mheland/32/26236_2.png) [@mheland](https://forum.ghost.org/u/mheland)\
**Post date:** [March 7, 2024, 5:51pm UTC](https://forum.ghost.org/t/how-to-connect-a-pop-up-solution-to-collect-emails-for-newsletter/41155/4 "2024-03-07T17:51:26Z")

</div>

Use [Make.com](http://Make.com) - free tier no cost, here’s the How-to

1. PopupSmart Submit form, triggers…
2. Ghost Create Subscriber

and thank you @jtraverso for the native js pop-up, creating a link an then clicking it is very elegant.

> **[How to Integrate Popupsmart with Make](https://popupsmart.com/help/detail/how-to-integrate-popupsmart-with-make)**
>
> Enhance automation with Popupsmart-Make.com integration. Learn how to connect for efficient campaigns and streamlined engagement.

---

<div class="post-metadata">

**Author:** ![The\_Jetsetter\_Cheap](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/the_jetsetter_cheap/32/24019_2.png) [@The\_Jetsetter\_Cheap](https://forum.ghost.org/u/The_Jetsetter_Cheap)\
**Post date:** [May 15, 2025, 7:51pm UTC](https://forum.ghost.org/t/how-to-connect-a-pop-up-solution-to-collect-emails-for-newsletter/41155/5 "2025-05-15T19:51:41Z")

</div>

Brilliant, thank you so much for this