Theodore Roosevelt Presidential Library Labs

TRPL Labs  /  Content Tool

Content Tool

Pop-ups

A self-hosted replacement for OptinMonster: a brand-locked builder that publishes through Google Tag Manager.

View on GitHub Open live demo Fork this repository
Screenshot of Pop-ups

Try it right here

This loads the live project from its own domain, exactly as a visitor would see it.

What it does

An in-house replacement for a pop-up subscription service. A five-step builder designs a banner, pop-up, slide-in, or full-window takeover in the brand system, previews it with the real runtime, and hands back code to paste into Google Tag Manager. One small runtime script decides which pop-up shows, where, and how often.

Publishing stays where it already is: only people who can publish the tag container can put a pop-up on the site, and the builder cannot change the live site. Pop-up settings are data, never code, and each carries a check value the runtime verifies. Email sign-ups go straight into Constant Contact, and every impression, click, and conversion lands in GA4.

What it can do

  • Five formats: top or bottom banner, pop-up, slide-in, and takeover
  • Guided builder that counts the pages a pop-up will appear on from the sitemap
  • Background photos with an automatic readability check and Canva templates
  • Embedded Constant Contact sign-up form styled to match
  • GA4 events with six custom dimensions, plus a JavaScript API
  • Debug, preview, and clear switches on any page URL
  • One-time GTM import that creates the loader, template, and event tags

Make it your own

Start by forking the repository into your own organization. Everything below assumes you are working in your fork, not this one.

# clone your fork git clone https://github.com/YOUR-ORG/Popup.git cd Popup
  1. Fork the repo and update the site object at the top of popup.js: your fixed header, alert bar, and chat-button selectors, and the hostnames the runtime may run on.
  2. Replace the brand looks in the builder and fonts.css with your own.
  3. Import gtm/trpl-popup-setup.json into your GTM container (merge, rename conflicts) and register the six GA4 custom dimensions.
  4. Point scripts/fetch_sitemap.py at your sitemap and move its workflow into .github/workflows/.
  5. Enable Pages from main at the root and protect main — pushing to it changes the script every visitor runs.

Stuck on a step? Open an issue on the repository. Questions from people adapting these for their own institution are the most useful feedback we get.