Userflow.js identify update

This post is mostly for developers :)

We’ve simplified how user attributes are sent to Userflow with userflow.identify() and userflow.updateUser(), and added the ability to add/subtract to/from number attributes.

This is in preparation for the release of our public REST API, which will look almost identical (just as JSON over HTTP).

The changes are fully backwards-compatible, so you don’t have to change anything in your code.

Simpler attributes

Before, we distinguished between standard attributes (such as name, email and signedUpAt) and custom traits (that were put in a nested traits object). Example of what userflow.identify looked like before:

userflow.identify(user.id, {
  name: user.name,
  email: user.email,
  signedUpAt: user.createdAt,
  traits {
    role: user.role,
    plan: user.plan
  }
})

Now there’s only one level and all attributes are just… attributes. You send whatever you want - they’re all treated the same. The word “trait” is gone. Updated example:

userflow.identify(user.id, {
  name: user.name,
  email: user.email,
  signed_up_at: user.createdAt,
  role: user.role,
  plan: user.plan
})

Notice how signed_up_at is now snake_cased. We recommend sticking to one naming scheme.

Setting an attribute only once

Say you want to track something a user did, but you only want to track it the first time. Example: We want to know which integration a user set up first. Instead of sending the name of the integration, send an object with a set_once key:

userflow.updateUser({
  integration_name: {set_once: 'My integration'}
})

The user’s integration_name attribute will get the value My integration, unless, if it’s already been set before, in which case we’ll leave it alone.

Adding/subtracting to/from number attributes

You can also increment attributes. Say you want to track how many projects a user has created, but you don’t want to recount the number of projects on every page load. Just call the following each time a project is created in your app:

userflow.updateUser({
  projects_count: {add: 1}
})

You can similarly subtract by using subtract instead of add.

See full updated userflow.identify docs.

Current page conditions

Before, to start a flow on a specific page, you had to use an Attribute condition, and find the Current URL attribute. It was a bit hidden, not very intuitive, and “current URL” isn’t really a user attribute.

We’ve now extracted it to its own condition: Current page is….

Page condition

Hidden flow steps

We already have 3 step appearance types: Speech bubble, Modal and Tooltip.

You can now also pick Hidden. In hidden steps, Userflow’s UI will not show up. This is useful if you have a trigger waiting for the user to perform some action before automatically taking them to the next step.

Appearance selection

You can change the step appearance type by clicking the first block in the step (usually called either Speech bubble, Modal or showing the target of a tooltip). Then see the step settings panel on the right side of the screen.

Viewer team member role

You can now invite read-only team members to your account.

Just pick the Viewer role when you send an invite. You can also change the role of a current team member by clicking the three-dot menu next to their name under Settings -> Billing, and then clicking Change role.

This is useful, for example, if you want team members to help test flows in preview mode, but you don’t need them to edit anything.

Require checklist tasks to be completed in order

Sometimes you don’t want to let users click a task before all previous tasks have been completed first. This is the case if a task depends on the user having done something in a previous task.

You can now tell Userflow to enforce task order.

Click the Checklist settings button (the sliders icon) in the top left of the screen. Then pick Tasks must be completed in order under Task completion order in the side panel.

Huge element selection usability improvement

This is a hugely important update! It’ll make it even easier for more non-technical people to build flows of even the most complex apps.

Dead-simple UI / UX

From a user’s perspective, the days of worrying about elements’ text or CSS selectors are over. You just point and click the element you want to target, and Userflow will deal with the rest.

All you see in the Flow Builder now is just a screenshot of what you clicked:

Tooltip block with screenshot

Pro-tip: In the side-panel, you can click the screenshot to zoom out and see the whole page as it looked when you selected the element.

Screenshot zoom

Here’s a full example of what the flow builder looks like now now. The use of screenshots makes it so much easier to understand what’s going on.

Flow builder

Dealing with dynamic text

Before, if you discovered that an element had dynamic text, meaning its text may change depending on the current user, you had to re-select the element or fiddle around with CSS selectors.

Now, it’s as easy as checking the Dynamic text checkbox. No need to re-select. Userflow will look for the same element, but will ignore the text of it.

Precision

Userflow’s algorithm to select elements and later find them again (e.g. the target of a tooltip) has been drastically improved. It’ll use many different facts about the element to find it again later.

In most cases, you should not worry about the following, but you can control how strict Userflow should be when looking for the element by adjusting the Precision slider.

We default to Strictest, which means that we’ll err on the side of not finding any element over potentially finding the wrong element. If you experience that Userflow has a hard time finding your element, try to adjust this to e.g. Loose or just Strict.

If you experience that Userflow tends to find the wrong element, then adjust it back up again towards Strictest.

Official Electron support

Userflow now officially supports Electron apps. Electron is a way to build cross platform desktop apps with JavaScript, HTML, and CSS.

Since it’s just HTML/JS like in regular browser apps, Userflow works perfectly for Electron apps. The only thing that was missing, was the ability to preview flows in draft mode and use the element selector tool.

The only requirement is to use userflow-electron instead of userflow.js when installing Userflow.js.

When previewing flows, there’s a new App type dropdown. It defaults to Browser app, which lets you enter the URL of an app running in a browser. Switch to Electron app to preview in an app running locally on your own machine.

Electron app type

It just works!

Here’s a real-life example of the design documentation tool, ION, using Userflow in their Electron app:

ION modal

ION tooltip

Background color and Standard Dark theme

Light layers on top of very light UIs can sometimes be hard to see. You can now customize the background color of your flows.

We’ve also added a new standard theme, Standard Dark.

Some inspiration:

Background color themes

Navigate to page actions

We’ve added a new kind of action that you can add to buttons, triggers, tooltips and checklist tasks: Navigate to page

With it, you can make Userflow navigate the user to a specific page in your app, e.g. when a button or checklist task is clicked.

Just click the block you want to add the action to, click Add action, click Navigate to page, and enter the URL you want to navigate the user to. The URL field even supports user attributes.

Navigate to page action

By default, a full page load to the given URL will be made. You can override this behavior in your Userflow.js installation using userflow.setCustomNavigate() to e.g. do in-app navigation ins

Checklists

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).

Checklist builder

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).

Example checklist

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:

Flow condition