Embedded tips

This example demonstrates how to use Flows to build contextual in-app 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.
• For feature discovery - surfacing capabilities users haven't explored yet, reducing the need for outreach or support.

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 - unlike floating tooltips, they render inline without interrupting the user.
• 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.

How Flows renders embedded tips

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:

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 components 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:

• Flows documentation
• Join our community