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  flowVersions={{ "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  flowVersions={{    '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

A fresh new look

We’re live with our official rename, our new brand, and new website. You can read more about it here.

Documentation

As a part of this launch, we’re releasing our first version of our documentation where you can read about Dopt concepts, how to get started, and how to use Dopt to more easily develop onboarding and engagement flows.

Improved concept naming

We renamed some concepts in our application to make them easier to understand. Journeys are now Flows. Entry blocks are now start blocks. Entry conditions are now targeting rules. Model blocks are now step blocks.

Other improvements & fixes