Trial countdown banner

This trial countdown banner example shows how to display a persistent, dismissible banner that counts down the days left in a user's trial, using a custom component powered by Flows.

Unlike a hardcoded banner tied to your billing logic, this one is driven by a Flows workflow. Target it at users on a trial plan, update the copy or urgency threshold from the workflow editor, and let Flows remember the dismissal per user, all without a code deploy.

Features

• Trial end date: a date property (not a static number) drives the countdown, so it stays correct on every visit instead of drifting out of date.
• Message: a short, editable line of supporting copy.
• Upgrade action: a configurable button that links to your pricing page.
• Dismiss button: calls close() to advance the workflow and hide the banner. Flows remembers the dismissal so it does not reappear for that user.

The banner is registered as a custom component in providers.tsx and rendered through a FlowsSlot placed above the main app layout.

Getting started

1. Sign up for Flows if you haven't already. You can create a free account here.
2. Clone the repository from GitHub and install the required dependencies in the project directory.
3. Add your organization ID in the providers.tsx file.
4. Import the workflow, including the TrialCountdownBanner component configuration, by clicking Use this example at the top of this page and publish it.
5. Run the development server with pnpm dev.

Learn more

To learn more about Flows take a look at the following resources:

• Flows documentation
• Join our community