Getting started checklist

Example

This example shows a checklist style onboarding experience built with Dopt. This checklist guides users through the three key actions to get value out of a simple analytics app.

When to use this pattern

Checklists work well when they’re action-oriented and create a journey that focused on valuable outcomes.

They’re especially useful for products that have long onboarding journeys, like products where admins have to set up integrations before the product is useful, the product has complex concepts, or the user has to download a desktop app or browser plugin.

They work well with other feature-level patterns like interactive walkthroughs and contextual education.

How to make this checklist with Dopt

This is the Dopt

flow that powers the checklist.

Dopt flow powering this example
This is the Dopt flow that powers the checklist.

The

flow contains blocks that define the targeting and logic of the checklist.

The

start block sets the flow to target trial users.

The

group block represents the checklist and the
step blocks
represents the checklist items and next steps.

Developers use Dopt’s SDKs to access and update the state of

step blocks and
group blocks
to develop the checklist in the application.

The

finish block finishes the flow, ending the experience for the user.

Initializing Dopt's React SDK

To start, you initialize Dopt with the <DoptProvider />. You’ll include the user ID of a

user you’ve identified to Dopt and the
flow
versions you’d like that
user
to see.

Developing the checklist items

The

step blocks in
getting started checklist
store the state of the checklist items. You access that state via the SDK to develop the checklist item UI: when
Connect a data source
is completed, the checklist item UI is checked.

The block states are used to develop the checklist items UI.

You access the state of the blocks with the SDK like this:

src/components/checklist/popover.tsx
1
<Checklist>
2
<Flex className={styles.checklistPopoverHeader} p="2">
3
Getting Started
4
</Flex>
5
{connectDatasourceBlock.state.completed ? (
6
<FinishedCheckListItem {...content.datasource} />
7
) : (
8
<CheckListItem
9
Icon={IconPlugConnected}
10
onClickButton={datasourceModalProps.onOpen}
11
{...content.datasource}
12
/>
13
)}
14
{addChartsBlock.state.completed ? (
15
<FinishedCheckListItem {...content.datasource} />
16
) : (
17
<CheckListItem
18
Icon={IconChartPie}
19
onClickButton={addChartsModalProps.onOpen}
20
{...content.charts}
21
/>
22
)}
23
{shareDashboard.state.completed ? (
24
<FinishedCheckListItem {...content.datasource} />
25
) : (
26
<CheckListItem
27
Icon={IconShare}
28
onClickButton={inviteModalProps.onOpen}
29
{...content.invite}
30
/>
31
)}
32
</Checklist>

Developing the progress bar and step counter

The

getting started checklistcontains metadata about the
step blocks
that can be accessed to develop the progress bar and “X/3” step counter.

The group block metadata is used to develop the progress bar.

The metadata is accessed via the SDK like this.

src/components/checklist/preview.tsx
1
import { Card, Flex, Link, Progress } from '@chakra-ui/react';
2
3
import { IconArrowRight } from '@tabler/icons';
4
5
import { useGroup } from '@dopt/react';
6
7
export function ChecklistPreview() {
8
const [checklist] = useGroup('f7oaGfQYNJ1KtueMLv4mm');
9
10
return (
11
<Card>
12
<Flex>
13
<Link>Getting started</Link>
14
<IconArrowRight size={16} />
15
</Flex>
16
<Flex>
17
<Progress value={checklist.completedSteps() / checklist.steps() * 100} />
18
{checklist.completedSteps()} / {checklist.steps()}
19
</Flex>
20
</Card>
21
);
22
}

The flexibility of Dopt

The power of Dopt is that you can use the SDK’s accessors and intent methods to develop the best experience for your product.

This example showed the checklist “chip” developed natively into the navigation and the checklist as a popover. The same

flow could also power other checklist UIs like a side bar checklist or embedded checklist.

Dopt’s flexibility enables it to power other types of checklist
experiences, like a side bar or embedded checklist.

Progressing flow state

When a user completes an checklist item, like connecting a data source, you progress the state of the

step block by using the complete() intent method.

src/components/modals/data-source.tsx
1
const [block, actions] = useBlock('HqEPQAwtTgbooQaoTAEwa');
2
3
return (
4
<ConnectDatasourceModal
5
onClose={props.onClose}
6
isOpen={props.isOpen}
7
onFinish={() => {
8
actions.complete();
9
props.onClose();
10
}}
11
/>
12
);

These intent methods enable you to develop a checklist that’s tailored to your usecase. They can be used in multiple places to support journeys that have multiple ways to complete an action, like if there area many different ways to connect to a data source.

And you can use these intents on both on the frontend and backend, enabling you to progress state at the application logic level, like when a data source is actually created on the backend.

Completing the checklist

When all

step blocks in
getting started checklist
are completed: true, then the
flow
will progress to
next steps
, setting it to active: true.

Finishing the flow

When

next steps is completed: true, the
finish block
will be triggered and the
flow
will be finished for that
user
.

Real world examples of getting started checklists

Shopify embeds their getting started checklist into their home page that can be accessed from the navigation. This pattern is nice because the user always knows where to find the checklist, but it’s never in the way. While the user completes each task, Shopify gives the user contextual help in a side bar. Each task is pretty complex, so the getting started checklist helps guide the user.

Loom uses a popover getting started checklist with an entry point in the navigation, similar to our example. Loom’s checklist is simple and helps their users create an account, record the first video, and get the first views.

Shopify and Loom videos provided by Page Flows.

Resources

More Dopt examples

Coming soon...

Embedded contextual education