Easily include rich text, images, and videos with rich text fields

We’re excited to bring you a new field type: rich text. Rich text fields allow you to define content like text, headings, lists, formatting, images, links, embeds, and more! Now you can easily add your on-brand images, looms, and Calendly links to your Dopt-powered experiences. We’ve built a WYSIWYG editor on top of this field type to make it easier for you to create the perfect piece of content.

We’ve created @dopt/react-rich-text to make it easy to consume rich text content in your app. Additionally, all of our components also utilize rich text for certain pieces of content. For example, you can use rich text when defining the modal’s body content.

Read rich text docs →

New sign-up options, workspaces, and user management

You can now sign up to Dopt with any email provider. We also added the ability for users to join multiple Dopt workspaces, invite users to a workspace, and disable and enable users in a workspace.

Pre-built, customizable onboarding and education components

We're excited to introduce pre-built, configurable React components that help you start building onboarding and education experiences quickly and come with best practices built in.

Today we're launching checklist, tour, and modal components.

The components are represented as new blocks in the flow canvas. The blocks give you the ability to define content like copy, images, videos, and configuration, like whether or not a checklist must be completed in order.

In code, you import the component and access the content and state of the block with a hook.

Here's an example modal:

import Modal, { useModal } from '@dopt/react-modal';
function MyModal() {  const modal = useModal('my-flow.four-pandas-jam');
  return (    <Modal.Root active={modal.active}>      <Modal.Overlay />      <Modal.Content>        <Modal.Header>          <Modal.Title>{modal.title}</Modal.Title>          <Modal.DismissIcon onClick={modal.dismiss} />        </Modal.Header>        <Modal.Body>{modal.body}</Modal.Body>        <Modal.Footer>          <Modal.DismissButton onClick={modal.dismiss}>            {modal.dismissLabel}          </Modal.DismissButton>          <Modal.CompleteButton onClick={modal.complete}>            {modal.completeLabel}          </Modal.CompleteButton>        </Modal.Footer>      </Modal.Content>    </Modal.Root>  );}

Our components are fully composable and give you easy access to all children for customization, such as adding your own event handlers, composing with your own components, or removing children you don't need.

Styling and theming Dopt components is flexible and easy. Dopt components ship with default theme tokens that can be fully customized or extended. You also can style with vanilla CSS, custom themes, and remove default styles.

You can use the components out of the box as a pre-built component or break out and use it headlessly with your own UI component.

We'll be releasing more components in the near future, like cards and banners.

We hope our new components help you get started quickly while still giving you the flexibility to build best of breed product onboarding and education!

You can read more about components at our website and our docs.

Segment and Heap integrations

We’re excited to announce new integrations to send events from Dopt to Segment and Heap.

These integrations enable you to do deeper analysis on Dopt flows in your tool of choice without having to instrument any events in the client. For example, you could create an end to end funnel of your Dopt flows in combination with your other product usage data.

Once set up, these integrations will send three events downstream:

This release lays the foundation for all downstream integrations, so we’ll be releasing integrations with Amplitude and Mixpanel soon!

Check out the docs for more details.

Measure flow performance with analytics

We’re excited to launch flow analytics directly in Dopt. With analytics, Dopt now has a set of built-in metrics that help you track, understand, and optimize the performance of your flows. These flow insights can help you understand user engagement, learn which flows are working, and pinpoint flows that may need improvement.

With flow analytics, you gain visibility into how many users have started, finished, or stopped a flow. You can see these metrics aggregated across all flow versions and individually for each flow version, enabling you to compare the performance of changes across flow versions. You can also choose a time frame to view your metrics, such as the last 7 days.

These analytics work out of the box and don’t require any custom setup or integrations.

Because Dopt experiences are developed in code, your current instrumentation approaches for CDPs and analytics work along side our out of the box analytics. We’ll also be releasing first party, server side integrations with product analytics and CDPs in a few weeks, so stay tuned!

Other improvements & fixes