Skip to main content

How Dopt works

Dopt is a developer-first platform for building self-serve product onboarding and education. Our pre-built components and SDKs make it easy to build set-up wizards, new user onboarding checklists, tours, and more.

Dopt consists of two foundational concepts:

  • A visual flow builder that you use to design the targeting, logic, and content of the onboarding and education your users will flow through.
  • Pre-built components, SDKs, and APIs that you use in your application to build the experiences by fetching and updating state and content from flows.

Visual flow builder

Flow builder

A flow defines an end user’s onboarding or education experience. This could be a simple flow with a single step, like a dismissible alert, or a flow with multiple steps, like a getting started checklist. You create and manage flows through our visual flow builder.

Flows are composed of connected blocks. A block defines a step of the end user’s experience. There are different kinds of blocks, like Checklist and Tour component blocks, true/false branching blocks, and webhook blocks. Blocks contain content, user targeting rules, and other configuration.

So for example, you might have a "New user onboarding" flow that contains a Start block with targeting rules, a Checklist block with 3 checklist items, and a Tour with 3 steps.

Flows and blocks also encapsulate user state. You can think of flows like user state machines. As a user moves through a flow, Dopt tracks the states of the user like which blocks they’ve completed and which blocks are active.

Flows are versioned which makes it easy to deploy, restore, and audit your changes across development environments.

Pre-built components, SDKs, and APIs

Components and SDKs

Once your flow is designed, you use our SDKs and APIs to develop the flow in your app.

When a user enters your application, Dopt will evaluate the targeting conditions in your flows to determine if a user should qualify for the flow and which state and content to return to your app. You use the returned data in your app to natively render experiences.

You can either use our pre-built, customizable React components or use Dopt headlessly in React, Vue, and other web frameworks with your own components. Our components solve common UI problems like positioning and order of steps.

Our SDKs and APIs are simple and easy to use. Under the hood, we handle the complex backend tasks of storing and updating user states so you don’t have to model user states in your DB or use localstorage. And we provide elegant client-side abstractions which enable you to fetch and update user state from anywhere in your application

All of these tools enable you to build deeply integrated, in-product onboarding and education experiences.


Here’s a short demo of how to use Dopt to build a getting-started checklist.