Introducing group blocks: easily ship better product walkthroughs and checklists

We started Dopt to give developers and PMs tools to build great in-product onboarding and education flows. We do this by providing a visual flow builder composed of connected blocks to define targeting and logic paired with SDKs to build the flows directly into your product.

Today, we’re super excited to introduce a new, powerful block type: group blocks.

Group blocks act as a container of steps. They let you set how the steps must be completed: sequentially or in any order. Our SDK provides methods to track, access data about, and manipulate the state of the group block and the steps inside the group block.

These primitives enable you to build experiences like:

With this new block type and associated methods in the SDK, you save valuable development time and can build better interactive walkthroughs, product tours, checklists, progress bars, feature education, and more. All of this, built natively into your product, using your components.

Build better flows with group blocks

Just like other blocks in Dopt, you use group blocks in a flow.

Our SDKs give you access to group blocks and the blocks they contain. These are the primitives you use to develop the flows in your product. All blocks in Dopt have:

Group blocks also expose intent methods for updating their children’s state and convenience methods to help with presentation, making development easier.

There are two types of group blocks — ordered and unordered. Let’s dig into them!

Ordered groups power flows like interactive walkthroughs

With ordered group blocks you can build flows where the user completes steps in order. Here’s an example interactive walkthrough onboarding from Retool.

Here’s an ordered group in Dopt and what’s available via the SDK:

The ordred group block is helpful for building:

Unordered groups power flows like checklists

With unordered groups you can build flows where the user can complete steps in any order, like this getting started checklist from Airtable.

Here’s an unordered group in Dopt and what’s available via the SDK:

When all the contained steps are completed, the group block will then be completed.

The unordered group block is helpful for building:

Example: building a simple progress bar

Let’s look at a simple example. Say you want to create a progress bar based on the steps a user has taken in a checklist like this:

Here’s the code that uses an unordered group and its data and methods to power the progress bar:

import { Card, Flex, Link, Progress } from '@chakra-ui/react';
import { IconArrowRight } from '@tabler/icons';
import { useGroup } from '@dopt/react';

export function ChecklistPreview() {
  const [checklist] = useUnorderedGroup('checklist-f7oaGfQYNJ1Ktu');
  return (
    <Card>
      <Flex>
        <Link>Getting started</Link>
        <IconArrowRight size={16} />
      </Flex>
      <Flex>
        <Progress value={(checklist.getCompleted().length / checklist.size) * 100} />
        {checklist.getCompleted().length} / {checklist.size}
      </Flex>
    </Card>
  );
}

You can see the full example of building a checklist and progress bar with a group block in our example gallery.

Built for flexibility to fit your product

The group block is a powerful new addition that fits with our existing philosophy: providing primitives to build within your existing UI, design system, and product. When building with Dopt’s SDKs a checklist could be in a popover or a sidebar. Feature education could be an empty state or a bespoke component in your design system. Whatever is best for your users and your product!

The group block also works with the rest of the Dopt platform:

No other onboarding and education tools are built for developers: they cut developers out and only offer boilerplate components, forcing teams to create yet another tooltip tour. With Dopt, we give you the tools to create the best flows for your product.

Get started

To get started building onboarding and education flows with Dopt, sign up for our beta. You can also read our group block docs to learn more or check out examples of flows built with Dopt.