Examples library

Feature hint

Dismissible hint used to highlight a new feature in your product.

Feature hint example application – Flows

This example showcases a custom feature hint component that can be used to highlight new features in your product. The component is designed to be dismissible, allowing users to easily close it once they have acknowledged the new feature. The feature hint is built using the @flows/react and @floating-ui/react SDKs, and uses Flows to manage its state and behavior.

The component has two optional buttons: a primary button used to acknowledge the new feature and a secondary button that can be used to link to a page with more information about the feature or announcement post.

Features

When user enters the workflow and visits the home page, the feature hint will be displayed floating above the new Acme AI feature icon.

Below is a screenshot of how the workflow is set up in Flows:

Flows workflow setup for the Card example

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: FeatureHint
- Slottable: false
- Custom properties:
  - Title
  - Description
  - Image URL
  - Target element
  - Placement: top, right, bottom, left
  - Offset: number
  - CTA label
  - CTA URL
  - Learn more label
  - Learn more URL
- Exit nodes:
  - continue
  - close
Recreate the workflow in your organization and publish it.
Run the development server with pnpm dev.