How to embed components in your app

Add a slot to your app

A slot is a placeholder in your app's markup that tells Flows where to render a component. Give it a unique ID, you'll use this same ID later in the Flows editor.

import { FlowsSlot } from "@flows/react";

const Sidebar = () => {
  return (
    <div>
      <h1>My app</h1>
      <FlowsSlot id="my-slot" />
    </div>
  );
};

You can add as many slots as you like, each with its own ID. Place them anywhere in your layout - sidebars, dashboards, empty states, or between sections.

Create a workflow

Workflows are where you define user experiences. Each workflow contains the logic and content for your embedded component.

To create a new workflow:

1. Go to the Flows dashboard and click Workflows in the sidebar.
2. Create a new workflow.

You'll start with an empty canvas. Add a Start block to define when users enter the workflow. For now, leave the Start block without any user property filters so that any user can enter the workflow.

Add a Card block

Click the blue + under the Start block and select Card from the list of available blocks. The Card block will automatically connect to Start.

Configure the Card

With the Card block selected, you can customize its content in the properties panel:

• Title - the heading shown on the card
• Body - supporting text, accepts HTML
• Primary button - label and action when clicked (e.g. continue, link to a page)
• Secondary button - optional second action
• Dismissible - shows a close button if enabled

See the Card component docs for a full list of properties.

Set the slot

Still in the Card block's properties panel, find the Slot section. Set the Slot ID to match the ID you used in your code - in this example, my-slot.

If you're placing multiple blocks in the same slot, use the Slot index to control the order. Blocks with a lower index render first.

Learn more about the Slot property.

Test your workflow

Before publishing to real users, verify that the card appears in the correct location.

1. Click Publish in the top-right corner.
2. In the publish dialog, select a staging environment to limit exposure during testing.
3. Visit your app and check that the card appears where you placed the slot.

To reset the workflow and run through it again:

1. Open the Users page in Flows.
2. Find your user profile and open the Workflows tab.
3. Locate the workflow and click Reset progress.
4. Refresh your app.

Learn more about testing workflows.

Publish to users

Once you're happy with the result, publish to production.

1. Optionally configure user property filters in the Start block to target a specific segment. See the guide on targeting only new users for an example.
2. Click Publish and select the production environment.