Content fields

Fields enable you to define content in Dopt and access it with our SDKs to power in-product copy and configuration. You can think of fields like a lightweight in-product CMS — paired with the rest of our platform’s powerful building blocks to define the user targeting, logic, and actions of your onboarding and education flows.

Fields are key-value pairs that you can define as part of a block in Dopt’s visual flow builder. You can specify the type of the field: text, boolean, and number. We’ll be releasing more field types in the future.

Here’s a flow to power a simple modal:

These fields can then be accessed with Dopt’s SDKs to power your product experience.

import { useBlock } from '@dopt/react';import { Modal } from './modal';
export function Application() {  const [{ state, getField }, { complete }] = useBlock('$BLOCK_ID');  return (    <main>      {state.active && (        <Modal>          <h1>{getField('title')}</h1>          <p>{getField('body')}</p>          <button onClick={complete}>{getField('button')}</button>        </Modal>      )}    </main>  );}

Read the full blog post →

Read the fields docs →

1.0 SDK

The 1.0 release represents a significant milestone in terms of stability and our confidence in the core solution. It includes:

Here’s the updated useBlock hook type definition:

interface Block<T> {  readonly kind: 'block';  readonly type: T;  readonly uid: string;  readonly sid: string;  readonly version: number;  readonly state: {    active: boolean;    completed: boolean;  };}
interface BlockIntention {  complete: () => void;}
const useBlock: (uid: Block['uid']) => [block: Block, intent: BlockIntention];

We offer a useFlow hook as the primary mechanism for accessing and transitioning flows. Here’s the hooks type definition:

interface Flow<T> {  readonly kind: 'flow';  readonly type: T;  readonly uid: string;  readonly sid: string;  readonly version: number;  readonly state: {    started: boolean;    completed: boolean;    exited: boolean;  };  readonly blocks: Block[];}
interface FlowIntention {  complete: () => void;  reset: () => void;  start: () => void;  exit: () => void;}
const useFlow: (uid: Flow['sid']) => [flow: Flow, intent: FlowIntention];

The most powerful concept here is that the flow has references to its blocks — meaning that you can use this hook to access all state for a flow (its state and the state of its blocks) and get live updates as that state changes.

You might have noted in the type definitions above that the type property on the flow and block interfaces is generic — this is to support us building and exposing new block types.

Read the full blog post →

Read the SDK docs →

Blocks JS client

We released a blocks JavaScript client. The blocks client is simple, language specific client to interface with Dopt’s blocks API for both client-side and server-side integrations.

Read the Blocks JS client docs →

Other improvements and bug fixes