Skip to main content

Getting started

In this guide, we’ll learn how to use Dopt in your web app to develop your first onboarding or engagement flow.

1. Sign up for a Dopt account

To get a Dopt account, sign up for our beta and we’ll set up your account and give you access.

2. Install Dopt

Add Dopt's React SDK to your frontend

Run the following command to install the Dopt package:

npm install @dopt/react

Create API Keys

In order to use Dopt, you'll need API keys. You can generate API keys for both the users API and the blocks API on the environments page. Reminder that API keys are scoped to a specific environment in Dopt. Learn more about environments and API keys →.

Switch to the development environment before the next steps.

The users API is a secret key whereas the blocks API is a public key. Since the users API, is a secret we'll only show it to you once. Don't worry if forget it, you can always generate another.

Copy both keys you've generated.

3. Identify users to Dopt

The users API key allows you to identify users to Dopt. Initially, you can identify a test user. The user will belong to the development environment since you used the development environment API key.

Make sure to substitue your users API key for $USERS_API_KEY.

curl \
-H "Content-Type: application/json" \
-H "x-api-key:$USERS_API_KEY" \
-d '{ "name":"Mr. Tumnus", "email": "mrtumnus@narnia.com", "city": "Narnia" }' \
-X POST \
https://users.dopt.com/identify/afaun

If you navigate to the users page you should see Mr. Tumnus' id, afaun. Click it to see that the properties that you identified have been associated with him.

Learn more about identifying users to Dopt at our guide on identifying users.

4. Design a flow in Dopt

Create a flow on the flows page. When you land on the flow canvas, you'll have a start, step, and finish block created by default. Design the flow needed for your onboarding or engagement flow. Commit the changes to create version 1 of your flow.

Learn more about designing flows at our guide on designing flows.

5. Develop the flow with Dopt

Initialize Dopt

Add the <DoptProvider /> component to your app. You'll need the following information to configure it:

  • The block API key
  • The test user ID from above (e.g. afaun)
  • The flow identifiers and versions you want your users to experience

The example below wraps the <Application /> component with the <DoptProvider />.

Make sure to substitue the $ prefixed variables with actual values.

import { DoptProvider } from "@dopt/react";
import Application from "./application";

const rootElement = document.getElementById("root");
ReactDOM.render(
<DoptProvider
flowVersions={{ "$YOUR_FLOW_ID": $FLOW_VERSION }}
userId={$USER_ID}
apiKey={$BLOCKS_API_KEY}
>
<Application />
</DoptProvider>,
rootElement
);

Access steps and update state

The <DoptProvider /> leverages React's Context API to make accessing steps in your flow simple. Use the associated useBlock React Hook to access the state of a step in the flow you designed and bind that state to afaun's actions.

You'll need the step's Reference ID which you can copy Dopt's flow canvas UI.

Below, we are going to implement the <Application /> component from the example above. This has a simple usage of the useBlock hook.

import { useBlock } from "@dopt/react";
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
} from '@chakra-ui/react'

export function Application() {
const [block, intent] = useBlock("$YOUR_STEP_BLOCK_ID");
return (
<main>
<Modal isOpen={block.active}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Welcome to Acme App!</ModalHeader>
<ModalCloseButton />
<ModalBody>
Let's get started!
</ModalBody>
<ModalFooter>
<Button onClick={intent.complete}>
Let's go!
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</main>
);
}

You've done two things in this example:

  1. You've bound the state of the step for the user to the visibility of the modal
  2. You've bound the user's interactions to the step's lifecycle method

With this, your user should see the Welcome Modal once, and upon clicking "Let's go!" never see it again.

Next steps

Congratulations! You’ve learned the basic building steps of developing onboarding and engagement flows with Dopt. What’s next?