Web Tools #523 - JS Utilities, Testing Tools, Uncats

JS Utilities, Testing Tools, Uncats

Issue #523 • July 27, 2023

The following intro is a paid product review for Dopt, a component library, SDKs, and APIs for building self-serve product onboarding and educational user flows.

There are certainly quite a few generic component libraries, platforms, and toolkits, and many of them are quite useful. But if you're building apps and user flows specifically for product onboarding, educational materials, wizards, feature introductions, and announcements, then you'll definitely want to check out Dopt.

The Dopt platform is based around the following features and concepts:

• A UI component library (modals, checklists, cards, etc.) designed for building onboarding user flows
• Tools to track users and user groups
• Blocks that define user flows (e.g. logic blocks, actions, and component blocks)
• Paths that define logic to determine how users can transition across blocks
• Fields for storing content for your custom blocks

When you create a flow (or edit an existing one), you'll be presented with a nice UI where you can edit existing blocks that make up the user flow and add blocks in the form of components, logic, and actions.

It's easy to use Dopt's visual flow editor to create new branches, edit existing ones, and deal with configuration and other settings associated with each of the blocks in your flow – all of which can be drag-and-dropped into the editor for easy creation of your product onboarding flows.

As mentioned, Dopt provides access to components along with blocks and fields that power those components. These are designed specifically for creating educational materials and feature onboarding.

One of the components that's particularly useful to onboarding is the tour component.  You can see a live example of this component on the Dopt website, which is part of a library of example components you can check out.

Other components include checklists, cards, rich text, and modals.

Of course, the components themselves are just one aspect of the Dopt platform. The basic steps for building an onboarding (or similar) experience are as follows:

• Install one of Dopt's SDK's (React or JavaScript) in your project folder using your package manager of choice (npm, Yarn, pnpm)
• In your Dopt dashboard, grab your API keys for users and blocks
• Register users by running cURL commands that include your user API key
• Design a flow in Dopt using the aforementioned flow editor, which includes logic via paths that you create
• Integrate your newly created flow into your app's code along with your blocks API key

This is certainly useful to analyze the kind of engagement you're getting and subsequently to use the information to improve your flows.

Analytics also includes user data. For example, you can look at details, properties, and flow state, so you can see what flows users have started, finished, and stopped, to understand their progress.

From the user analytics page you can reset a user's flow state, which will help debug your flows or simply allow a user to restart a flow.

Dopt allows you to integrate with data platforms like Segment, Heap, Amplitude, and Mixpanel.

Such integrations allow you to use your own tools to analyze Dopt-powered experiences for deeper insights into the effectiveness of your flows and onboarding experiences.

Dopt's components can easily by styled and themed via CSS. Dopt uses BEM naming conventions, which you can override to match your custom branding. In Dopt's docs you can view each component's classes in the styling API for that component. The image below shows the styling API for the checklist component.

All the tokens (in the form of CSS variables) that you can override can be viewed on the Tokens page in the Dopt docs.

There's so much more to cover when it comes to Dopt's features, so be sure to check out their full documentation along with the following useful pages:

• A gallery of example user flows created with Dopt
• A list of companies using Dopt for their onboarding and educational materials
• How Dopt stacks up against similar tools

Now on to this week's tools!