Easiest path to Substack-style "subscribe" pop-up/over

Looking for the simplest way to do this, ideally via code injection or html/script snippet. I’ve reviewed the various ways to script some kind of timed pop-up CTA for email subscribers, testing for logged-in member, loading the portal, etc. I’ve also looked at third-party options like popupsmart that are pretty easy (and easily customized) but don’t allow for testing for logged-in members.

Anyone have updated recommendation(s) on how best to do this?

Thanks much.

1 Like

Maybe this should be a feature request, not a how do I?

1 Like

@ITGuy3000 What theme are you using?

Many themes have something along these lines included.

1 Like

Currently using Headline. I’m testing out using Popupsmart but it requires some additional integrations to pass the collected info, and so far haven’t figured out if I can test for logged-in members (to not show it or to show an upsell to paid message).

Would love to see existing themes that have something like this built in!

2 Likes

@ITGuy3000 The design isn’t exactly like that modal, but my Laminim theme has a Substack-inspired fullscreen welcome mat that converts surprisingly well (see it in use here) as well as an option for a “scroll box” optin widget identical to the one you can see in use here.

I’d be happy to give you the code for either of them if you’re interested, as a starting point to integrate into your existing theme.

(Also available to implement/integrate something like this at my normal freelance rate.)

1 Like

Thank you, I’ll take a look!

2 Likes

Any updates on where you landed with this? I, too, was hoping to find the right code injection solution, rather than changing theme (since the one I have now works for my purposes otherwise).

Add this snippet just before the </body> tag in default.hbs and pop-up smart will not show up for logged in users.

 {{#unless @member}}
    <script src="https://cdn.popupsmart.com/bundle.js" data-id="12345" async defer></script>
{{/unless}}

To register new Ghost members from pop-up smart…

  1. Sign up for a free forever account with make.com
  2. Create a new scenario in Make and import this Make Blueprint

ZIP archive: popupsmart-ghost.json

Click the three dots to import a blueprint…

The Blueprint will create this scenario

  • Receive data from pop-up smart
  • Check if the member already exist, using the filter
  • Create a new member

  1. After importing the blueprint, create a new Webhook in the first Module, Custom Webhook.

Add this webhook to pop-up smart form. The hook will look like this

https://hook.eu2.make.com/fo4jfjdibprlswovw0bto5ob6mjksjkjsttsg

Here’s how to add a Webhook to pop-up smart

https://popupsmart.com/help/detail/how-to-connect-your-popupsmart-account-with-a-webhook

  1. Make is waiting for the hook to determine incoming data. Trigger the hook from Pop-up smart by submitting your form.

  2. Create the Ghost integration in Make, From Ghost’s Custom Integration you need (1) api URL, (2) the admin API key and (3) the Integration ID from the adress bar, the key after /integrations/

image

  1. Update the two Ghost modules with e-mail and other fields from the incoming hook/data.

Note: If you edit the pop-up form update the Make Scenario with data from your fields. Click Redetermine Data Structure and submit your Pop-up smart form. Make will update with data you are submitting and make it available to your scenario.

  1. Set the Scenario Live

New members will be created in Ghost when submitting the form.

Thank you so much for all of this, @mheland! I managed to get down to #5 on your instructions, but now I’m getting stuck-- I can’t figure out where in Make to enter the Ghost API info (I know how to find it from Ghost) and though I’ve got an account in Make, when I try to save the blueprint /custom webhook thingo you helpfully guided us through, I get this error message: “Account doesn’t exist: Connection not found ‘ghost:909090’.” – not sure if I need to put in the API key and etc before it’ll happily save, or ?? (I’ve already hit publish on the popupsmart side of things, with the webhook in place and everything.) Any advice?

Thanks again.

Did you create a new Connection to Ghost? Hit the Add button

And then select your new connection in both Ghost modules, seems like Make is trying to use the connections from the Blueprint

1 Like

This is one of those things that fits more naturally into Themes, as a design choice, rather than a core feature but we’re always watching and listening so never say never :wink:

As we’ve heard in the thread already several themes include a popover.

For those who don’t have it in their theme, you can add something via code injection.

There are services that offer a side-loadable widget via a line of JS code. https://popupsmart.com/ is mentioned around the forum a lot.

My preference is to use a few lines of JS to load the Ghost portal. It just seems the all-around lightest (on the pocket, on the page) option. This post on the forum gives a good solution: How to connect a pop-up solution to collect emails for newsletter? - #3 by jtraverso

I implemented it here so you can see it working: Simple "sign-up" pop-up for Ghost

6 Likes

Thanks to @mheland and @jonhickman for all of this! I’ve played around with a popupsmart integration and it definitely checks some of the boxes. I’m also going to use the tools from the folks at Outpost.pub, which add some great bells/whistles and other features like a customizable welcome email series (though not free to use).

To Jon’s suggestion (and his provocative tease of new features ;) the challenge with Portal as it is today has to do with messaging and format, neither of which are exposed/addressable via the Ghost dashboard. Some of this can be addressed via building custom membership and signup pages as done in a custom themes, e.g. by @Norbert and @brightthemes, but that means spending some time/money and turning off the portal entirely.

At minimum, if the portal had some of its text/messaging exposed for editing/customization, that would go a long way. For instance, in Jon’s example, there’s no way to add any verbiage, image, etc., to make that popup explanatory and more compelling: The signup form as it stands doesn’t offer any text at all, just a pop-up for name, email, and a sign-up button. Sign-up for what? And the sudden appearance of the full Portal, with all tiers and verbiage, is not a great user experience.

As I’ve noted in a few email threads with Jon and Sarah, the language on the “Your Account” page in Portal also doesn’t work for my use case – a publication with voluntary paid subscriptions but no paywall, so no need to upsell a paid subscription “for full access.” (I have a registration wall in some places; that CTA can be easily customized in the theme or via code injection.)

If that language on the account page was exposed for editing in the dashboard, well, I’d dance a jig. (First I’d learn to dance a jig, then I’d dance it…)

More broadly, it would be great to make Portal more flexible, like adding functionality that includes options for a custom-amount tier and built-in one-time option (choose an amount that’s Monthly, Yearly, One-Time), etc. To Jon’s point, while a pop-over may seem like a design choice, I’m thinking more generally about Portal functionality that could then be incorporated more easily into design choices. Given how fundamental membership/payment tiers are, that seems like something for the dev team to consider more seriously/expeditiously.

Indeed, given the evolving nature of paid publications/newsletters and subscription models, expanding and improving Portal to provide more features and flexibility would be a huge win for Ghost. (And me/us… ;)

Thanks!

:speak_no_evil: :laughing:

Really great notes on Portal here, thanks for sharing!

1 Like