An open library of custom blocks for subscription customer portals
All blocks
No. 18RetentionLive demo

Subs Invaders

A retro arcade game where subscribers earn a free gift.

Allen FinnLinkedIn
How to installCustomize with AI
Live: the real codeRunning in a sandbox, right here
Customer portal · Subs Invaders

What it does

A retro arcade game in the style of Space Invaders, inside the customer portal. The subscriber's hero shoots at three kinds of gremlin (Cancel, Pause and Skip in the sample), and clearing them all adds a free gift to their next order. It keeps score and a high score, plays 8-bit music and sound effects with a mute button, works with keyboard or touch, and pauses itself when scrolled out of view.

Why it exists

For subscription brands that want subscribers opening the portal more, with a playful, low-effort way to hand out a gift: subscribers earn it instead of just being given one. Best for consumable brands with a fun voice. The sprites, projectiles and music are all customizable, so any brand can make it its own.

The code

Paste it as-is, or download subs-invaders.html

How to install

  1. Copy the code above, or download the .html file.
Your portal
  1. Go to Storefront → Customer Portal → Branding → Layout and click Add custom extension.
  2. Pick HTML with embedded CSS and JavaScript and paste the whole file into the code editor.
  3. Swap anything the file asks you to, like [BRAND], product names or Quick Action IDs. The AI prompt below can walk you through it.
  4. Save, click + to add it to the layout, then Publish. Check it on a test subscription’s magic link with ?forcePreview=true, since some scripts don’t run in Preview.
Before you paste

It ships in demo mode, which hands out no gifts on a live site. In the CONFIG block, set REWARD.mode to 'quickAction', paste the stackId from an "Add Free Gift" Quick Action (Grow → Quick Actions → Modify an existing subscription, Universal link), and set TEXT.giftName. The gift claim uses Skio Quick Actions; on other portals, use REWARD.mode 'endpoint' with your own backend (not included). Re-skin it through TEXT, the --inv-* colors, SPRITES and MUSIC, and leave everything below the ENGINE line alone. It loads Press Start 2P from Google Fonts.

Customize it with AI

Paste this prompt into Claude Code or Codex. It asks for the code and your brand and product details, then writes a version for your store.

Blocks are shared as-is by the people who built them. Read the code before you add it to your portal, and test it with a test subscriber first.

Built a custom extension your subscribers love?

Share it with us, we'll review it, we'll get it live, then we'll add it to the site so anyone can copy + customize.

Submit a block How to build one
your-block.html
<!-- your-block.html -->
<div class="my-block">
  <p class="my-block__title">Your next order ships Friday</p>
  <button class="my-block__cta">Add a bonus item</button>
</div>

<style>
  .my-block { padding: 20px; border-radius: 16px; }
  .my-block__cta { background: var(--brand); }
</style>

<script>
  // read the subscription, then do the useful thing
  const sub = window.__subscription;
</script>