Logo

Flows

Onboarding for modern SaaS

A better way to onboard users and drive product adoption.

No-Code or In-Code

Prefer quick iteration detached from deploys or want to keep things stable? You can do both with Flows.

Create flows with an WYSIWYG editor

Flows comes with an easy to use editor that allows you to create and publish flows in minutes.

Change flows on the fly

With our cloud solution you can update your flows anytime, and publish the changes with a single click.

No performance penalty

Flows is developed with performance at it’s core. Your flows will look native regardless of whether they are loaded from our cloud or your code.

No code

Define flows in your codebase

Onboarding flows can be stored as a separate files inside your codebase and launched automatically or with a function.

Automatic tracking

Flows SDK automatically tracks data of your flows to give you insights into how they perform. You can opt-out or provide your own tracking.

1import { init } from "@rbnd/flows"; // Fully typed
2
3init({
4 projectId: "my-project",
5 flows: [
6 {
7 id: "my-first-flow",
8 element: "#start-flow-1",
9 steps: [
10 {
11 element: "#start-flow-1",
12 title: "Welcome to FlowsJS!",
13 body: "This is a demo of FlowsJS. Click the button below to continue.",
14 },
15 {
16 title: "This is a modal",
17 body: "This is a modal. It is an useful way to show larger amounts of information.",
18 },
19 ],
20 },
21 ],
22});

Combine both approaches

Store stable flows in you codebase for stability and create experiments or quick announcements with no-code.

No code
1<head>
2 <title>Vanilla JS example - Flows JS</title>
3
4 <!-- How you would use Flows in your own code -->
5 <script src="https://cdn.jsdelivr.net/npm/@rbnd/[email protected]/dist/index.global.js"></script>
6 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rbnd/[email protected]/public/flows.css" />
7
8 <script src="flows.js"></script>
9
10 <!-- See more examples in our SDK repo - https://github.com/RBND-studio/flows-js/tree/main/examples -->
11</head>

Advanced flow steps

Apart form the basics like tooltips and modals, Flows offers a range of advanced steps that allow you to craft better flows.

Flowchart illustration of conditional step with two branches

Conditional step

Show different steps based on the user's input, their segmentation, or any other condition. Conditional flows are infinitely nestable and can be used to create complex flows.

Flowchart illustration of call step that opens a dropdown menu in UI

Call step

Call steps are versatile steps that can be used to trigger any action such as opening a menu, changing a state in UI, or anything else that you can do with JavaScript.

Preview coming soon

Flowchart illustration of wait step that waits for user to click a button

Wait step

Give users time to complete a task before showing the next step. Wait for a specific amount of time or until the user completes a specific action. Then the flow will continue automatically.

Flowchart illustration of AI decision step that sends user input to AI to analyze it and decide on the best route the user should take in the onboarding flow

AI decision

Send user input to AI to analyze it and decide on the best route the user should take in the onboarding flow. AI steps allow you to create conditions from forms and other unpredictable controls.

Preview coming soon

Modern onboarding platform

No code

Fast and lightweight

Native-like performance and small bundle size.

Flow analytics

Track how users interact with your flows, identify problems, and improve them.

Fully customizable

Controll the look and feel of your flows with themes and custom CSS.

Reliable

No need ot hack around ad-blockers. Our flows show up every time.

Opinionated

The only way to create great products. No fluff, bloat, or bs.

Open source

The core will be open with paid access to our cloud service.

Logo

Join Flows waitlist today

Be the first one to know about our beta launch.