Post thumbnail
Product announcement

Introducing group blocks: easily ship better product walkthroughs and checklists

Phil Vander BroekPhil Vander Broek
  • January 19, 2023
  • 2 min read

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.

The new group blocks not only speed up setting up flows, but they also help us create more dynamic onboarding experiences where users can choose what and when they learn during their onboarding progress.

Martin Rajdl
Martin RajdlSoftware Engineer, Attio

Build better flows with group blocks

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

Flow with group block
Using group blocks to build an interactive walkthrough in Dopt’s visual flow builder.

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:

  • state - the state of a block for a user, like active or completed
  • data - like size — the number of blocks in a group block
  • intent methods - functions to update block state, like complete(), which updates the state of the block and progresses the flow

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:

Ordered group

The ordred group block is helpful for building:

  • An interactive walkthrough that allows users to go to the next and previous steps using group.next() and group.prev().
  • A product tour with a step counter (step 2 of 3), using group.getCompleted() and group.size.
  • any multi-step experience you can design!

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:

Ordered group

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

The unordered group block is helpful for building:

  • Getting started checklist where the items can be completed in any order, and when all are completed, is followed by a “Learn more” step.
  • A set of hotspots that call out important areas of a UI.
  • A related set of embedded contextual tips for a new feature.

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:

Progress bar

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:

  • targeting based on your customer data
  • Dopt manages the user states in a flow, simplifying business logic and user state management for devs (like storing state in a DB, migrating that DB as you iterate, etc)
  • versioned flows that make it easy to iterate and know the source of truth
  • visibility across flows and users to understand user behavior to discover what’s working

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.