Examples library

Embedded tips

Inline contextual tips to help users learn about product and UI concepts

Embedded tips example application – Flows

This example demonstrates how to use Flows to build contextual, embedded tips for onboarding users. Each page includes a simple tip designed to help users learn about important product and UI concepts.

When to use

Contextual tips are simple yet highly effective and super flexible. They can be used:

  • Throughout the user journey for onboarding, education, announcements, or empty states.
  • To teach key concepts contextually, ensuring users know how to use your product and get value from it.
  • As entry points to important next steps, facilitating relevant onboarding and education flows.
  • To integrate external content like documentation and support at the right time and place, driving a product-led growth (PLG) motion.

Why it works

  • Progressive disclosure: Tips reveal content incrementally and contextually while users interact with the app
  • Seamless integration: Embedded tips feel like a natural part of the UI, avoiding distractions or spammy experiences.
  • Simplicity: Tips are straightforward and often include an option to explore more information
  • Ease of implementation: Their simplicity makes them quick and easy to set up.

The embedded tips could be a simple bit of text, a banner, a card with video and links, or a carousel with many images. They can be used individually, or since they’re embedded, they can be combined with checklists and as a part of a multi-step workflow.

Features

When a user enters the workflow and visits one of the pages with FlowsSlot components, an inline tip will appear to help them learn about the features on the page. Each tip uses a custom component to render the content.

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

Flows workflow setup for the Card example

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. Create three block templates based on the components found in src/components/flows
  5. Recreate the workflow in your organization and publish it.
  6. Run the development server with pnpm dev.

Learn more

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

Framework

Next.js

Tags

Adoption
Education
Engagement
Onboarding
Self-serve

Build anything with Flows