An open library of custom blocks for subscription customer portals
All blocks
No. 12Self-serve

Customer Check-in

Asks what’s up and offers fixes before cancel.

Elliot MitchellLinkedIn
Code coming soon
Preview animationNeeds a live customer portal to run
Customer portal · Customer Check-in
Customer Check-in preview

This block reads live subscription data, so it only runs inside a real customer portal. The animation shows what subscribers see.

What it does

Asks “What’s on your mind?” and answers with fixes for that subscriber, before they reach the cancel flow.

Why it exists

For subscribers who want to change something, or are thinking about canceling. Offering the right fix first means fewer people reach the cancel flow at all.

The code

Code coming soon

The builder is cleaning this one up for sharing. Check back shortly.

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.
  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.

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>