Blog

You can now build Checklists in Userflow!

Checklists work great as the anchor of new users’ onboarding experience. If a user leaves your onboarding guide, they always have a chance to get back - or to pick other tours - using the checklist. Giving users a sense of progress also gives them a sense of fulfillment, which they’ll hopefully chase and get even more involved with your product.

How to build checklists

Checklists are created just like regular (step-based) flows, using the New flow button in Userflow. Just pick the new Checklist type here. Checklists work in general a lot like regular flows, in that they can have auto-start conditions, are published and show up in your app through Userflow.js (no extra installation required).

Checklists contain text (rich content) at the top.

There’s a progress bar, which is automatically updated as users complete tasks.

You can add as many tasks as you want. Each task has a name, an optional subtitle, a completed condition and one or more actions. Example: Completed condition could be when users have created their first project in your app, and the action could be to start a tour showing the user how to do so.

What users see

Once a checklist is triggered for a user, it appears in the lower right corner (by default).

When a task is clicked, it’s actions, such as starting a tour or navigating to a page, are performed.

If the user minimizes it, a launcher button (saying “Get started”) appears in the same corner, containing a circle with a number representing the number of tasks left to do.

When the user completes a task, the checklist is automatically shown and its checkmark is checked with a cool animation.

Bonus: New flow condition

To mark tasks as completed when users have seen or completed a flow, we’ve added a new condition type:

This is an update I’ve been excited about for a while… A brand new Flow Builder!

The new Flow Builder is much more visual. It will feel familiar to existing users, and more welcoming and intuitive to new users. Here are the highlights.

Horizontal UI

Steps are now laid out horizontally. You scroll horizontally to get to them. It feels more like a storyboard.

I think it’s nice that all the content is at the same horizontal line of sight. It makes it easier to scan through. For most flows, it’s also a more optimized use of space.

Links between steps

Blocks that have actions (buttons, tooltips and triggers) now have a little light-blue outgoing port to the right of them. Steps have an incoming port in their top left. Arrows are drawn between blocks and steps that are linked. This provides a visual overview of how steps are tied together.

You can link from a block to a step simply by clicking the outgoing port and then clicking the step you want it to go to. You can also click the “+ Add step” on the far right to add a new step and link to it in one go. You can click an existing link’s outgoing port to edit it. Press Delete/Backspace to remove it. Cmd + click on an outgoing port to scroll the target step into view (it’ll flash yellow, too).

Fidelity

Steps are now displayed almost exactly as they’ll look in the user’s browser. Same size and full theming. Here’s an example from Roger with their custom font, colors and avatar:

Side panel

Contextual options for blocks/steps (e.g. if you click a button) now open in a panel sliding in from the right. I think this is better than the popover that appeared in the middle of the screen before for 2 reasons: 1) It doesn’t block other content (e.g. the other blocks around it). 2) No vertical scroll necessary to make the popover fit into the viewport.

I hope you’ll like the new Flow Builder! 😀

Userflow just got an awesome rich content editor. When you focus a step’s content in the Flow builder, you’ll see this (notice the new toolbar):

We’ve put a lot of work into making it incredibly smooth to use. It’s custom-built on top of something called Slate.js, which means it’s not like a regular boring WYSIWYG editor that seems out of place. It uses proper Userflow components, supports user attributes, and allows for much more advanced and customized content in the future.

Attributes

Before, user attributes could be inserted by putting a variable name in curly brackets, e.g. {{name}}. Not very user-friendly. Now it’s as simple as clicking “Insert user attribute”. You can still use the {{name}} - or just {name} - syntax, which will automatically be replaced with an attribute. This way, we also validate that the attribute actually exists. Finally, attributes now support fallback values, which will be displayed if the attribute is missing for a user.

Links

Links can be inserted by selecting some text and then clicking the “Insert link” button or pressing Cmd + K (on Mac, use Ctrl + K on other platforms). The URL field is even a “rich” content editor itself supporting variables!

Images

Images can be uploaded directly into Userflow, or you can enter a URL where an existing image is stored.

The width of the image can be specified in a percentage of the flow width or an exact number of pixels. Height is automatically calculated to keep the same proportions.

Images can also be links. Just select the image and click the “Insert link” button (or press Cmd + K).

Videos

You can also embed videos from popular video providers. We currently support YouTube, Vimeo or Wistia. Let us know if your favorite provider is missing, and we’ll add it!

Video sizing can be managed just like with images.

Basic text formatting

You can, of course, still use bold and italic text. We’ve also added text-align controls (left, center, right). We’re planning to add more formatting options soon, such as block styles (Normal text, Heading 1, Heading 2), text color, code blocks and more.

One pattern that’s been a little cumbersome in Userflow has been to perform an action - such as go to next step - when the user is done filling in an input field.

Before, you could make a condition such as if Name input has any value. The problem here is that this condition becomes true immediately as the user types the first character. But, it’s usually not appropriate to continue to the next step until the user is done typing.

This is where the new User fills in input condition type fits perfectly. It only becomes true once 1 second has passed without the user typing any more characters. This 1 second is reset with every keystroke, giving the user a natural feeling when being sent to the next step.

Here’s a demo of how it works:

It’s now easier to select elements containing dynamic text (e.g. user-chosen names) in your web app.

In the example below, we’re trying to select the first row in the table, which contains a dynamic project name. Our flow should not depend on the exact name since it will be different for other users. Notice in the lower-left corner how Userflow, by default, picks the name of the project:

If instead, we click the Settings (cog) icon, check “Ignore element text” and point to the element again, then we get this:

Now Userflow discards the element’s text and uses the best CSS selector it can find for it.

You can now view details about users’ flow sessions in Userflow. A session means a specific user viewing a specific flow.

If you click a session row on the view-user or flow-overview pages, you can see all its details:

You can dig into why/when the flow was started, why/when it ended, exactly which steps the user saw and how long time it took them.

You can now also delete individual sessions - or a whole user (including all their sessions) - using the new “User options” and “Session options” three-dot buttons on the view-user and view-session pages respectively. This is great for testing, as you can test flows’ auto-start conditions over and over with the same user. You can also delete a user’s complete history to comply with GDPR.

Many apps use custom input fields such as combo boxes, date fields or type-ahead fields.

Userflow has a nifty condition type, Text input value, which can read the value of a text input and compare it to some value you define. Such a condition could, for example, advance the user to the next step.

Until now, dealing with the value of custom input fields was a pain though. They simply didn’t work with +Text input value_ conditions. Now they do work!

It just takes a single line of configuration in your app (have your developers do this). With the new userflow.registerCustomInput() method, you can tell Userflow to treat your custom inputs as regular text inputs. Userflow will then read the text content of matching elements. Example:

userflow.registerCustomInput('.my-combobox-value')

Demo:

Let me know if you’d like help setting this up in your app!

We’ve released 3 new features, which make it easier to work with multiple flows.

Previously, a user could only have one active flow at a time. The flow would be visible at all times until it was closed for good.

Automatically hide flows

With the new “Hidden condition” feature, you can define a condition, which, when matching your user, causes the flow to be temporarily hidden. When the condition no longer matches your user, the flow will be shown again.

You can, for example, use this to automatically hide a flow if your user navigates to a different page. In the following example, the flow automatically starts if a user navigates to /products and is temporarily hidden if the user leaves the /products page before completing the flow:

Multiple active flows per user

Before, flows were either active or closed. Flows can now be in 3 different states:

• Active: The flow is visible to the user. This is the state all new flows start in.
• Hidden: The flow is not visible to the user, but may become Active again later.
• Ended: The flow is completely over and will never become visible again (unless the same flow is started over again later in a different session).

Users can have multiple flows in each state. Even multiple active flows. Only one active flow will be shown at a time though.

Having multiple flows active/hidden for a user, is very useful when you have different flows for different pages in your app. Imagine a “Products intro” flow only visible on /products, and a “Categories intro” flow only visible only on /categories. As the user navigates between the 2 pages, Userflow will automatically hide one and show the other.

Teaser: Userflow is getting checklists! With checklists, you can e.g. build a “Getting started” list of tasks new users should complete. For checklists, having multiple flows open (a regular flow and a checklist) is a requirement.

Assign start priorities to flows

When adding an auto-start condition to flows, you can now assign the flow a priority (Low, Lowest, Medium, High, Highest). If 2 auto-start conditions match a user, the flow with the higher priority will take precedence. The other flow will be started once the first flow is hidden or ended (assuming that the user still matches the condition).

A new flow can only be auto-started if the user does not have any active flows. I.e. flows can be auto-started if there are only hidden flows.

I’ve been wanting to do some work on the old top menu for a while:

It takes up too much space. It’s too dark - like a shadow over the important part of the app. The green accent under the active submenu item on top of the dark blue background is a little eye-irritating.

Here’s what the new top menu looks like:

Its smaller size means more room for content. This will be especially important for the next version of the Flow Builder.

It has a white background to take as little focus away from the main content.

It has just one row of content. When navigating to a nested resource, such as a flow, the top menu items are replaced with the flow’s navigation menu using a sleek, but subtle, animation. A back-arrow will take the user back to the Flows list.

The Settings page now has a simple side menu, which makes it easier to add more settings pages in the future vs. having a horizontal menu that’s harder to scan with your eyes.

The help menu and user account menu have also been simplified with 2 simple circular components on the top right.