New feature badge example application – Flows
This example showcases new feature badge powered by @flows/react and floating-ui.
The badge is a small, floating element that can be positioned next to a new feature’s name, location, or any component you want to emphasize. It effectively draws attention to updates and changes in your application.
As products continuously evolve, keeping users informed is essential. The new feature badge offers a straightforward and effective way to communicate these changes.
Features
When a user enters the workflow and visits one of the application pages, a new feature badge will appear next a specific element on the page, helping to draw attention to the new feature. The badge is using a custom component to create a floating element that can be positioned anywhere on the page.
Below is a screenshot of how the workflow is set up in Flows:
Getting started
- Sign up for Flows if you haven’t already. You can create a free account here.
- Clone the repository from GitHub and install the required dependencies in the project directory.
- Add your organization ID in the providers.tsx file.
- Create a new block template in your organization with the following configuration:
- UI component: NewFeatureBadge
- Slottable: false
- Custom properties:
- Title
- Target element
- Side: top, right, bottom, left
- Offset X: number
- Offset Y: number
- Exit nodes:
- No exit nodes needed
- Recreate the workflow in your organization and publish it.
- Run the development server with pnpm dev.
Learn more
To learn more about Flows take a look at the following resources:
