A popup for Ghost

I had a client who needed a popup. It happens a lot. Like, seriously a lot. Nobody wants to be on Substack, but everyone wants their popover.

I keep building basically the same popups. I'm tired of building them. So here you go. Here's a tool that lets YOU build your own.

(OK, I'll actually still build you one if you insist.)

This tool is at most in beta. It might be alpha. You're welcome to try it, but I suggest that you not use it for anything super mission critical yet. I'm mostly sharing it today so that you can tell me everything that you want it to do that it doesn't.

If you want slightly more stability, change the url for the loader to say sws-popover.v1.js, which will not change. Or feel free to download the client side javascript and host sws-popover.js yourself!

If you scroll a little bit, you'll probably trigger the popover CTA. I've got it set to a little bit hair-trigger.

How it works:

• The header, subhead, and body of the popover come from a Ghost page.
• The buttons are configured in the popup tool. Nothing I did with a Ghost page was going to give this style of buttons, and I wanted to be able to tweak how they behaved for different users.
• I use the Content API to get the contents of the page, and store the buttons within the embed code provided. Nothing is stored on my server. You could also have the sws-popover.js code on your server if you wanted to have zero off-server dependencies.
• Yes, it is 100% safe to put your Content API key in the front end. In fact, Ghost does this already to make Portal and Search work. NEVER share your Admin API key that way.

Styles?

I'm deliberately not putting the popup in an iframe. That's so that it can mostly inherit styles from your site. It's not going to be perfect, but if it isn't, you can probably quickly tweak it with some code injection. I've added classes to make that easier, but you may need !important, too, since I've got some styles inlined.