Introducing in-app announcements

What are in-app announcements?

Have you ever wanted to tell your users about a new feature you just launched or perhaps showcase a changelog for all the improvements you’ve shipped? You probably wanted to reach for an in-app announcement! They’re especially effective for reaching users because they have a 100% open rate (unlike email or other forms of communication) and they can be hyper contextual to the user’s task at hand.

In-app announcements can be used for a bunch of use cases such as highlighting a new feature, displaying a changelog, notifying about upcoming system maintenance, or promoting blog posts and events. They’re also flexible in terms of the form they take. Some announcements might be a modal that pops up when the user logs in or a persistent banner at the top of the page.

How Dopt supports in-app announcements

Check out this quick demo video for a rundown on how to launch your own Dopt-powered announcement (or skip to the next section for an in-depth guide):

We just launched two great features that will help you nail any announcement you might want to launch. The first is the ability to restart users from the beginning of a flow when they encounter a new flow version. This is exposed as a new flow version transition setting called Restart all users. You can set this when you a commit a new version of your flow.

While we’ve already had the ability to deploy content changes without a code push, this method allows you to restart all users from the beginning of the flow thereby re-engaging with users who have already seen the announcement.

The second feature we introduced is a new way to reference the latest version of a flow when you initialize Dopt in your app. You can now use the latest tag to point to the most current version of your flow rather than a specific version number.

<DoptProvider  userId={USER_ID}  apiKey={BLOCKS_API_KEY}  flows={{    'feature-announcement': 'latest',    'setup-checklist': 4,    'onboarding-tour': 2,  }}>  ...</DoptProvider>

By using these two features in conjunction, you can launch self-serve in-app announcements without having to make any additional code changes. Other Dopt platform features like user targeting to get your message to the right people and pre-built components to get up and running faster can also be a big help for building announcements.

Building your first in-app announcement

Let’s walk through how to build an in-app announcement using Dopt. Imagine that we want to tell our users that we just launched a new feature: dark mode. We want to display this announcement in a modal that appears when users log in. We also want to re-use this modal for future feature announcements.

First, we’ll create a new flow for our announcement:

In this case, we’re using a pre-built modal component to get things rolling, but you can absolutely use any of the other UI components we offer or your own. We’re also using Dopt to define content like text and images for our modal.

Next, we’ll commit an initial version of this flow.

After that, we’ll add our flow to the DoptProvider so it gets initialized with the latest version tag:

<DoptProvider  userId={USER_ID}  apiKey={BLOCKS_API_KEY}  flows={{    'feature-announcement': 'latest',  }}>  ...</DoptProvider>

Then we’ll add our modal component and hook everything up:

import Modal, { useModal } from '@dopt/react-modal';
export function App() {  const modal = useModal('feature-announcement.modal');
  return (    <>      ...      <Modal.Root active={modal.active}>        <Modal.Overlay />        <Modal.Content>          <Modal.Header>            <Modal.Title>{modal.title}</Modal.Title>          </Modal.Header>          <Modal.Body>{modal.body}</Modal.Body>          <Modal.Footer>            <Modal.CompleteButton onClick={modal.complete}>              {modal.completeLabel}            </Modal.CompleteButton>          </Modal.Footer>        </Modal.Content>      </Modal.Root>    </>  );}

Awesome! We’ve got our feature announcement modal running. Here’s how it looks like:

At this point, we could also fine tune our targeting rules so only certain users see this modal or further edit the content for this particular announcement.

Pushing new announcements without code changes

Let’s say a few days later, you launch another new feature: two-factor authentication. Let’s walk through how we can push a new announcement through that same modal we implemented earlier without having to make any additional code changes.

First, let’s update some of the content that we have for the modal. Note that we’re making changes in the uncommitted version of our feature announcement flow.

Since we’re not editing the content for the dark mode announcement, but rather, creating a new announcement for our two-factor authentication announcement, we’ll want to push a new commit with the Restart all users version transition.

This will create a new version of the flow that restarts all users (those who have started, finished, and stopped the flow) from the beginning of the flow. The end result is that any user who meets the flow’s targeting rules will see the modal again. Here’s what the new announcement looks like:

Note how we did this entirely through Dopt without having to update any code. For any future feature announcements, we would just repeat this part of the process!

Looking at analytics

An important part of the product development loop is checking in to see if things are working. Dopt’s flow analytics can help tremendously here. Navigate to the Analytics tab for your announcement flow to see how many users have seen your announcement and how many have taken action on it.

You can also pipe Dopt’s analytics data downstream to your own analytics tool like Amplitude, Heap, or Mixpanel by setting up one of our many integrations.

Next steps

We look forward to seeing what announcements you all launch soon. In the mean time, check out:

✨ By the way, we also launched a Dopt-powered in-app announcement in Dopt for our own feature announcements: