Changelog

Oct 31, 2023

SDK and API performance improvements

In the last few weeks, we’ve reduced peak p95 and p99 latencies for our blocks and users SDKs and APIs by over 56% through better caching, database indexing, and horizontally scaling our services.

We’ve also shipped performance improvements for our analytics and user flow monitoring workflows.

Dopt React 4.0 SDK

Now, with even more of the things you love! Our SDKs have always supported cross-tab, cross-device usage, and we’ve always relied on websockets and pub-sub to push changes to client state and user properties to our SDKs as quickly as possible.

With @dopt/react 4.0, we’ve made our react SDK more resilient and performant by:

improved session reconnectivity — when your connection to Dopt goes down, we’ll wait for it to come back and pick up where you left off
fewer API calls — we’ve moved our flow /start requests into our API so that the SDK doesn’t have to manage starting flows
better hook caching — we’ve reduced the number of updates our hooks trigger by simplifying our dependencies and leaning on refs.

We love all our SDKs, and we’ve folded these changes into @dopt/javascript and @dopt/vue as well — we didn’t publish major changes there since those packages were already previously rewritten deeply when we first built out support for Vue.

SDK changelogs:

@dopt/react: https://github.com/dopt/odopt/blob/main/packages/%40dopt/react/CHANGELOG.md
@dopt/vue: https://github.com/dopt/odopt/blob/main/packages/%40dopt/vue/CHANGELOG.md
@dopt/javascript: https://github.com/dopt/odopt/blob/main/packages/%40dopt/javascript/CHANGELOG.md

Other improvements

We added search on the users page. You can search over user identifier and email (if you identified it to us).
Text areas for string fields now wrap.
Paths are easier to connect because we made the drop zone larger and eliminated a dead spot zone.
Tab selection on the flow view panel is now sticky, so if you select “Fields” on a block, if you navigate to a new block you’ll stay on the “Fields” tab.
It’s easier to pan on the flow view while holding the space bar.
When you switch workspaces, you’ll now land on the flows page rather than a URL.

Sep 20, 2023

Getting started checklist

We updated our new user onboarding experience by creating a checklist. The checklist includes key steps needed to start using Dopt. We of course used Dopt to create the checklist with our own custom components ✨.

Billing page

The new billing page lets you see your plan, details about your MTU and flow usage, and the ability to upgrade plans. If you’re on a paid plan, you can access your invoices. You can access the billing page in Settings → Billing.

We've also updated our Free plan experience to better display your usage in the main navigation.

Essential setup example

We released a new Dopt example: setup experiences. Setup experiences are useful for walking a user through crucial steps that might be necessary to get running in your product such as connecting to data sources or installing browser extensions. They are also helpful for gathering contextual information about a user to aid in building customized experiences in your app.

Check out the interactive setup example and code repo →

Other improvements

We’ve updated our Vue docs and in-app usage guides. In addition to the SDK’s README and technical typedocs, we’ve added a new in-depth guide that walks through how to use blocks, flows, and fields within your Vue app. We’ve also added pointers to each of our Vue composables, allowing you to directly and headlessly work with our Checklist, Tour, Modal, and Card components in your apps.

Sep 12, 2023

Introducing the new Dopt Vue SDK

We’re super excited to release our Dopt Vue SDK, a new SDK that makes it easy to build better onboarding and education experiences in any Vue app.

Our Vue SDK offers a convenient way to access, update, and react to flows and blocks to build onboarding experiences. The SDK exposes a DoptPlugin which you can add to your Vue app. Once you’ve added the plugin, you can use our composables to bind Dopt state with your own UI.

The Vue SDK has full parity with our React and JavaScript SDKs, and our composables allow you to work headlessly with all of Dopt’s components like our Tours and Checklists.

It’s published to npm as @dopt/vue, and you can dig into our implementation by visiting Github (dopt/odopt).

See an example tour built with our Vue SDK →

Improved users pages

We enhanced the users pages to show the user’s email if the user has been identified with an email property. This should make it much easier to view and understand your users.

If a user doesn’t have an email property, we’ll show their identifier instead.

Learn more about identifying users in Dopt →

Other improvements

We added framework-specific guides for Next.js, Remix, and more when working with our React components.
We made our JavaScript SDK a lot easier to work with. It’s now updated to support full reactivity for all flows, blocks, and components. You can access these instances at any time and always receive updates when they change. The SDK also supports use as a singleton in your application (i.e. creation at application start and subsequent reconfiguration when users, flows, etc., change). Under the hood, we use our improved JavaScript SDK to power our new Vue SDK. You can see a detailed changelog for 3.6.0.
You can now use the delete key in addition to backspace to delete things on the flow canvas.
We now keep your environment setting sticky across all pages.

Sep 6, 2023

Carry over in-progress users beta

The new “Carry over in-progress users” transition enables you to seamlessly transition users and their state to a new flow version without having the user restart or exit the flow, so you can iterate on flows without users losing progress. For example, if you have 150 users on a checklist version who have completed different amounts of items, you could create a new checklist version with new items and transition the in-progress users to the new version. If a user's state can't be carried over due to incompatible changes like loops in the flow, those users will be restarted from the beginning of the flow. This feature is currently in beta — we’d love your feedback!

We also renamed the other transition methods and redesigned the transition modal to be much more clear.

Read the docs →

Enhancements to built-in analytics

We’ve upgraded our in-app analytics capabilities to better encapsulate funnel analysis. Only users who have started in the specified period will be counted towards the finished and stopped statistics.

We’ve also included percentage markers and trend indicators to show how many users out of the ones that started the flow have finished or stopped and if that number has increased or decreased since the previous period.

Improvements to how we build our open source packages

Our open source packages previously produced build artifacts that were intended to be friendly to various build and module systems by using "type": "commonjs" in their package.json (the default and less modern configuration) and by using file extensions to delineate between module systems (e.g. mjs for ESM and cjs for CJS). This strategy caused issues for older build tools that do not support these file extensions.

We’ve moved all of our open source packages and their transitive "dependencies" to use @dopt/pkg-build, our newly created CLI for building packages in the most backward compatible way we can come up with.

This strategy shifts us to:

Use "type": "module" in our package.json
Output files with .js extensions
Produce a ./cjs directory in the build output that contains a thin package.json, which configures "type": "commonjs" explicitly, conceptually overriding the "type": "module" configuration of the actual package.json.

Improvements to component types

We now export the component hook return type definition to make it easier to type the custom components you build on top of our component hooks. Here’s an example of using them to define props in a custom checklist:

import { type ChecklistItem } from '@dopt/react-checklist/hooks';
interface CustomChecklistItemProps {  completed: ChecklistItem['completed'];  title: ChecklistItem['title'];  body: ChecklistItem['body'];}

Other improvements

Our new HTML rich text render enables you to use Dopt’s rich text fields in all non-React UIs you’re building. Read the docs →
You can no longer reset the flow state when the flow is disabled.

← Previous Next →