User and session management

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:

View session

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.

Custom inputs in conditions

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

combobox

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.

Text input value condition

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:

custom input demo

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

Multiple active flows and hidden conditions

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:

Hidden conditions

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.

New, sleeker top menu

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

Old header

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:

New header

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.

Studio1 is now Userflow

With our increased focus on making software for onboarding and other in-app user flows, we’ve decided to change our name to something more fitting:

It’s still the same company and team.

Our flagship product going forward will be Flows (previously called Walkthroughs) and will simply be referred to as Userflow.

Userflow is still in early-access-only mode - join the wait list here. If you’re an existing user of our Screencast Video Automation software, you can also reach out at support@getuserflow.com and we’ll invite you immediately.

We cannot wait to launch Userflow for everyone to see!

Language support

The flow UI from your users’ perspective now supports multiple languages.

Choose your desired language using Themes. If you don’t already have a custom theme, go to Settings -> Themes, click the Standard Theme, and duplicate it.

If you use multiple languages, you should make a theme for each language and apply the proper theme on each flow depending on the flow’s language.

The following languages are currently supported:

  • Danish
  • English (US)
  • German

We’re looking to add more languages on an on-going basis. If you’re missing your language, reach out at support@getuserflow.com, and we’ll add it.

Tooltips

You can now add tooltips anchored to specific elements in your web app. Tooltips are great if a flow step asks the user to click a specific element on the page.

Choose Tooltip in the Step appearance popover next to a step. Then select the element you want the tooltip to be anchored to. Optionally add an action or enable backdrop.

Tooltip demo

Tooltips join our 2 other step appearances: Speech bubbles and modals.

Tooltips feature highlights:

  • Tooltips are automatically scrolled into view.
  • Perform actions, such as going to the next step, when users click the target element.
  • Optional backdrop, which adds a semi-transparent layer on top of your app, revealing only the target element and the tooltip.
  • Tooltips are automatically placed either above, below, to the right of or to the left of the element - depending on what seems best for the user. You can optionally set your desired placement.

Themes

You can now customize the look’n’feel of your flows with Themes.

The new Theme designer can be found under Settings -> Themes:

Theme designer

This theme has a custom avatar, which is slightly larger than the default size. The speech bubble is placed on the bottom right and is a little wider than the default. It uses the Roboto font and a Material Design color scheme.

There’s a standard theme, which you can duplicate to make your own customizations.

You can mark a theme as your default theme using the three-dot menu on the Theme designer page. This will make all new flows use this theme by default.

You can change the theme for a flow under the three-dot menu, then click Settings.

You can also choose a different theme for individual steps by clicking the step’s avatar and checking “Use a different theme for this step”. This way you could, for example, place the speech bubble in a different corner for just a few steps.

Avatar and voice, which was previously possible to edit per flow, have been moved under themes. This should make it easier to manage.

Let us know if there are any aspects of your flows that you miss customization options for.

Modals and primary buttons

We’ve added the ability to style the speech bubble and its buttons differently from step to step.

Modal and primary button

Modal steps allow you to put the content directly in the face of the user. This is great, for example, for the first step in an onboarding flow. This way, you make sure that the user sees it. To turn a step into a modal, click the avatar in the flow builder, and then check “Modal” under “Appearance”.

Primary buttons stand out with a more prominent appearance than regular buttons. This is useful when you want to lead the user in a specific direction. To make a button primary, click it in the flow builder and then check the “Primary” radio button under “Appearance”.

Coming up soon: Tooltip steps, where the speech bubble is anchored and placed next to an element you select.

Beacon improvements

We’ve released some improvements to our flow beacons. Beacons are used to draw users’ attention to specific elements, so it’s crucial that they’re highly visible, yet not intrusive.

The beacon animation is now two expanding rings. They expand over 2 seconds, 1 second apart, making it look like ripples. Here’s a GIF:

New beacon

We stuck to a yellow color. I believe that red is too intrusive (you don’t want to welcome your new users with a bunch of error-like red). We’re now using Material Design’s Amber color (500), which is a reasonable default color since it increases the likelihood that it’s somewhat familiar to the user. This color will obviously be customizable very soon so that you can pick your own color (holla at me if you’d like this before it’s generally available).

Beacons now follow content around precisely and immediately. Before, they would either jump periodically or not move at all.

Beacons are automatically hidden if they’re scrolled out of view (it even works with nested scroll containers). If they’re outside of the browser’s viewport, an arrow will point in its direction, so the user knows where to scroll to:

New pointer

Performance has also been improved, which could make a difference to users on very low-end devices with multiple beacons.

The changes also prepare us for the upcoming “highlighted areas” (WIP term). Instead of a pulsating dot, you’ll be able to highlight a whole element on the page with a rectangle around it. Optionally, you can also choose to mask everything around it, so the user can’t click there. Stay tuned!