SDK updates

We introduced a useFlow hook and withFlow HOC in the React SDK. The flow.reset() function resets all properties of the blocks in the flow to false. The .reset() function enables you to build experiences like “Restart walkthrough” at the end of an interactive walkthrough or “Reset onboarding help” for a user in their settings or admin panel. We’ll continue to release more flow level functions, like the ability to exit a flow and get all blocks in a flow.

Here’s an example of using the useFlow hook.

import { useFlow } from '@dopt/react';import { Modal } from '@your-company/modal';
export function Application() {  const [flow, intent] = useFlow('new-user-onboarding', 1);  return (    <main>      <Modal>        <h1>👏 Your onboarding has finished!</h1>        <p>Want to reset? click the button below.</p>        <button onClick={intent.reset}>Reset onboarding</button>      </Modal>    </main>  );}

useFlow SDK docs →

We’ve released the first version of the JavaScript blocks SDK. Unlike our React SDK, this SDK is framework agnostic. Users of Svelte, Vue.js, Angular, etc. we see you and are building to support you. The JavaScript SDK, like the React SDK, allows for subscription to block updates and exposes block intent methods for manipulating block state and transitioning flows.

Thinking about building onboarding in a JS runtime that doesn’t use React? Check this SDK out!

JS blocks SDK readme →

Our blocks SDK is now much more responsive when progressing state because we optimistically progress the state rather than waiting for a backend response. This is an optional boolean property that can be set in the Dopt provider. The default is true.

DoptProvider docs →

Other improvements & fixes

Settings and Blocks React SDK 0.2.0

Settings and members listing pages

We released a new settings page that helps you administer Dopt.

Members listing page displays all the people in your company that have a Dopt account, helping with security and auditing.

Account page displays your account details: currently name and email.

Environments page is the same page accessed through the environments picker that displays your environments and enables you to create and view API keys, now also accessible through settings.

You can access settings through the main nav in the bottom left.

Blocks React SDK 0.2.0

We released @dopt/react:0.2.0. Here's what's new:

We renamed useDopt and withDopt to useBlock and withBlock to make it more clear the SDK is working with blocks. This also makes it possible for us to introduce flow level SDK concepts. This change is backward-compatible. The old methods are still in the SDK and have been marked as deprecated.

We introduced a socket connection in the React SDK to the Blocks API. /identify calls to the Users API now propagate state changes based on updated user properties in real-time to the client. For example, if a user property changes (e.g. current_plan: free to current_plan: pro) results in the user meeting a flow's targeting rules, then the user will qualify for the flow and the updated state will be pushed to the client in real-time. This change is backward compatible and doesn't change the SDK's interface.

There's now an optional logLevel property in the DoptProvider that configures severity-based logging for the React SDK. This accepts the values: 'trace', 'debug', 'info', 'warn', 'error', 'silent' (default). Here's an example usage:

<DoptProvider  flows={{ "user-onboarding": 2, "upsell-flow": 4 }}  userId={userId}  apiKey={blocksAPIKey}  logLevel=`warn`>  <Application /></DoptProvider>

Other improvements & fixes

Onboarding and users API client

We’re excited to showcase dogfooding our own product to create an onboarding experience for all Dopt users. We’re also introducing a JavaScript users API client to make using our users API even easier.

Dopt onboarding

We released an improved first time onboarding for Dopt to help users get started more easily. We built it using Dopt, of course 🙂. Our onboarding has a welcome modal and a few embedded messages that help explain the key concepts and link to relevant documentation. This is just the start of what will be many iterations!

Users API JavaScript client

The users API JavaScript client can be used to interface with Dopt's users API for both client-side and server-side integrations. The API client enables you to more easily identify users and send user properties to Dopt to power flow targeting.

Here’s an example of how you can use it:

import { IdentifyApi, Configuration } from '@dopt/users-javascript-client';
const doptUsersClient = new IdentifyApi(  new Configuration({    apiKey: 'USERS_API_KEY',  }));
const userIdentifier = '0001';const userProperties = {  email: 'oneill@acme.com',  name: `O'Neil`,  company: 'Acme Co',  projects: 2,  activated: false,  invited_users: null,};
doptUsersClient.identify(userIdentifier, userProperties);

The API client also provides an identifyBulk method to identify many users in bulk.

Read the users API client docs →

Other improvements & fixes

Environments, flow versions, & flow status

This release includes a set of features that enable you to confidently put flows developed with Dopt into production:

Environments

Environments enable you to manage your flows throughout your entire development lifecycle, from local development through production.

Default environments

By default, your workspace comes with two environments: Development and Production.

Logical separation of data

Environment ensures logical separation of data so you can develop and test flows locally with a set of users before shipping the flow to your users in production. Users identified in one environment are never accessible in another.

API keys per each environment

The separation of data is managed by using separate API keys for each environment. For example, in your local development, you use the Development environment's blocks API key to request blocks from the Dopt SDK and the Development environment's users API key with the Dopt users API.

Flows in environments

When you create a flow, it will be accessible across all environments.

Environments page

You can manage the API keys for each environment on the environments page.

Environments docs →

Flow versions

Flow versions give teams control over which flow version should be live in each environment. It also gives you visibility into the historical changes of a flow.

Drafting and committing workflow

When designing a flow, your flow will be a draft version. After making edits, you can then commit changes to Dopt which will increment the version of the flow. You can view the flow version history and roll back flow versions in the version history tab on the flow canvas.

Specifying flow version

You specify which flow version should be live for each environment when initializing Dopt in code. For example:

<DoptProvider  flows={{    'user-onboarding': 2,    'feature-callout': 4,  }}/>

Read more →

This gives teams a robust source of truth and the ability to easily make new flow versions live or roll flow versions back.

Flow identifiers

Flows now have an identifier to support specifying the flow version in code. You can see the flow identifier on the flow listing page or flow canvas.

Transitioning users to new versions

When changing a flow version, you can determine how users who have already started the flow will transition to the new version: either restart the flow in the new version, or exit the flow and have them never experience the new version.

Flow versions docs →

Flow status

You can now enable and disable flows with the flow status control. You can access the control on the flow listing page or flow canvas. If you disable a flow, no new users will start the flow and all users who are in the flow will immediately stop progressing through the flow.

Flow status docs →

Documentation improvements

Our documentation has an improved IA and new content including: a getting started guide, feature guides, better API & SDK documentation, and details about our Segment integration.

Dopt docs →

Other improvements & fixes