Introducing fields: Use Dopt as a lightweight in-product CMS
Phil Vander Broek- February 23, 2023
- 2 min read
Today we’re super excited to announce the launch of 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 enable anyone to update in-product content without taking valuable time away from engineering, streamlines workflows, and enables you to make any surface area in your product targeted and editable. Like the rest of Dopt, it’s flexible and configurable to your needs and your product.
Define and update in-product copy and configuration
With fields, you can:
- enable anyone to edit and update the copy of a new user onboarding checklist
- tailor the copy of a contextual feature call-out to a specific user role, like an admin
- more easily bring assets like links, videos, and images in-product, centralize them, and enable non-developers to keep them up to date
- make an in-product tip configurable, such as if it’s dismissable or not
Outlign is using Dopt and fields to power their new user product onboarding. Outlign builds software to help agencies more easily work with their clients. They use Dopt to power contextual hotspots that help their users discover and understand key features, like how to set up project phases, making Outlign easier to use.
Dopt powers the hotspots that help users discover and understand key features.
Outlign uses Dopt’s flow builder to define the order the user sees the hotspots and the copy of the hotspots.
Outlign defines the copy in Dopt and accesses it with Dopt’s SDK to power the in-product experience.
They use Dopt’s SDKs to access user states, flow states, and content. They also use Dopt’s SDKs to progress users through flows without having to manage business logic or user states.
Dopt simplified building onboarding by centrally managing user and flow state while letting us have complete control over the UI and experience. The addition of fields makes it easier for anyone on our team to update the onboarding copy - not just the dev team.
Example experiences built with fields
To see what’s possible with Dopt, check out our 6 new example onboarding and education experiences on that are built with Dopt: simple checklist & progress bar, simple embedded tips, tours, hotspots, modals, and custom components. We’ve also updated all of our existing examples to use fields.
How fields work
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> );}Field values can be updated and deployed by anyone in the flow builder without a code push.
Get started
At Dopt, it’s our mission to enable engineering and product teams to build faster, collaborate more effectively, and ship better onboarding and education flows.
To get started with Dopt and our new fields feature, sign up for a free account. You can also read our fields docs to learn more.