Content organization, filters and labels

The Flows page (now called Content ) has gotten a major overhaul to make it easier to organize your flows.

Labels

A highly requested feature is the ability to group content based on topics such as user type, life-cycle stage or language. A few Userflow customers already have more than 100 flows!

You can now add your own labels, using the Manage labels button the new filter bar:

Content page

You can see and edit an item’s labels by hovering over or clicking the labels area on the right side of each row:

Label popover

More filters

The new Content page also lets you filter by content type (Flow or Checklist) and whether the items are published, not published or has pending changes. Soon there will also be a built-in Language filter here.

“Flows” -> “Content”

Previously, it was a little confusing that we referred to “Checklists” as “Flows”, too. Going forward, the collective term is “Content”, and under that you have “Flows” and “Checklists”. This makes room for future content types such as “Hotspots” and much more.

Embed Loom videos in your flows

We’ve added support for embedding Loom videos in your flow content.

Putting little screencasts in your flows is a great way of showing new users what a page will look like once they get real data.

Checkmark color

If you haven’t already heard about Loom , I definitely recommend checking it out. It’s a very convenient tool for quickly recording your screen and sharing the video.

How to use:

  • Focus the flow content in the Flow builder to make the rich content toolbar appear
  • Click the + icon
  • Select Video in the dropdown
  • Paste the Loom share link. Example: https://www.loom.com/share/<id>

Customize checkmark color

You can now customize your checklists’ checkmark color. It defaults to a sharp green color.

Find the new option under the Checklist section in the left sidebar on the theme editor page.

Here’s an example from a Userflow customer:

Checkmark color

Start checklists as launcher button

You can now choose whether your checklists should start:

  • Expanded checklist , showing the checklist’s tasks (the current default behavior)
  • Or, the new option, Launcher button , showing just the launcher button (usually with the text “Get started”)

Find the Initially show as section under Checklist settings in the Builder.

Multi-environment support

You can now run multiple environments - such as Production and Staging - under the same Userflow account. This makes it possible to test flows in your Staging environment before publishing them to Production.

Setting up environments

All Userflow accounts start out with a single environment, named “Production”. Under Settings -> Environments, you can add additional environments, such as “Staging”.

Once you add an extra environment, you’ll see a new Environment menu in the top right, which you can use to switch between your environments:

Environment switcher

Each environment has its own Userflow.js Token (the one you supply to userflow.init() ) and its own API keys.

Isolated user data

User data, including events and flow sessions, are completely isolated between environments. This means that your Staging users will not interfere with your Production analytics.

When you look at e.g. the Users tab, it’ll only show users in the currently selected environment.

Publish flows to individual environments

Flows, on the other hand, are shared between environments. If you have multiple environments, you can publish a flow to specific environments only. When you click Publish in the Flow Builder, you’ll now see this:

Publish dialog

Simply check the checkbox next to each environment you want to publish to. Unchecked environments will stay on their current version.

Example use case:<br/>Test in staging before publishing to production

  1. Create a new flow.
  2. Add some content to it.
  3. Click Publish in the Flow Builder to open the publish flow dialog. Check only your Staging environment. Click Publish in the dialog footer.
  4. Go to your staging environment (in your own app) and try out the flow.
  5. Optionally, repeat steps 2-4 as necessary.
  6. Once you’re happy with your flow, click Publish in the Flow Builder again. Now also check Production . Click Publish in the dialog footer.
  7. Your real production users can now see the flow.

Activity feed

The user profile page in Userflow has gotten a facelift.

The top contains the user’s high-level details. Email and ID are now easy to copy by hovering over them and clicking the copy icon.

The right side contains a list of all the user’s attributes. They can also be copied by clicking.

The middle now has 2 tabs. The default tab, Activity feed, shows a live view of all the events tracked for the user. Page Viewed events are automatically tracked by Userflow.js. Your app can track its own events through userflow.track(eventName) . Click an event to expand its attributes.

The other tab, Flow sessions, shows a list of all the flows the user has seen.

user profile

Simplified Userflow.js installation

Technical post : This post is intended for our developer users.

The recommended way of installing Userflow.js, via the userflow.js npm package , is now much easier than before.

Before, you had to call loadUserflow() first, and then wait to get the userflow object back from the returned Promise. Besides not being perfectly ergonomic, this is problematic if different parts of your app needs to access it.

Now, the module exports a userflow object as its default export, which you can use synchronously. It’ll automatically inject the real Userflow.js (from our CDN) into the current page, and queue all method calls.

Before:

import {loadUserflow} from 'userflow.js'

loadUserflow().then(userflow => {
  userflow.init('...')
  userflow.identify('...')
})

Now:

import userflow from 'userflow.js'

userflow.init('...')
userflow.identify('...')

Note that the real Userflow.js won’t be loaded until you call one of the userflow object’s methods. This way you still have complete control over when Userflow.js actually loads.

See full docs on npm

Customize button size and shape

A few new button-related options were added to Themes:

  • Button height: To make your buttons taller (or shorter) than default.
  • Button min. width: Especially in modals, making your buttons wider and more prominent can look great.
  • Button border radius: Userflow ships with a default border radius of 6 px. You can make the borders completely round or straight by adjusting this.
  • Button horizontal alignment: By default, buttons are right-aligned (except for modals, where they’re centered). You can change this to always be left, centered or right aligned.

Find all the new options under the “Buttons” section on the edit theme page (Settings -> Theme).

Some pretty examples of customized buttons from the Userflow customer PurelyHR :

PurelyHR example 1

PurelyHR example 2

Automatically start flows based on browser content

Userflow can now automatically start flows based on content in the user’s browser. This is highly useful, for example, if you want a flow to appear when a specific button appears in your app.

Until now, you could only auto-start flows based on user attributes, events or the URL of the current page. Now you can use all of the browser-side conditions, such as “Element is/is not present”, “Input value is…” and “User fills in input”.

Simply go to Flow settings in the Flow Builder, click Add start condition , and then pick any of the new condition types in the drop down menu.

Auto-start when element is present

Minimize speech bubble

Speech bubble steps consist of a speech bubble anchored to the corner of the browser window. They may sometimes be in the way of the content users are expected to interact with. Usually, when this is the case, I’d recommend using a Tooltip step instead, which places the tooltip outside of the interaction content.

If you must use a speech bubble step, your users can now minimize the speech bubble by clicking the avatar. Clicking it a second time will restore the bubble again. If a trigger causes Userflow to go to the next step, the speech bubble will automatically be restored, too.

Minimize speech bubble