Announcing Webhooks

With webhooks, external systems (such as your own back-end or other data providers) can subscribe to Userflow events, and be notified when they happen.

You could, for example, setup your own integration, which gets notified when a user’s attributes changes in Userflow, and then synchronizes those changes to your CRM.

Very soon, we’ll be offering Integromat and Zapier apps, which will make integrating Userflow to 100s of other services a breeze. These apps will allow for both watching Userflow users and events, as well as sending data into Userflow.

Webhook subscriptions are currently created via the Userflow REST API. A subscription is configured with a URL, which Userflow should POST to when there are new events, and a list of topics to subscribe to.

Read the Webhook subscriptions reference

The Userflow REST API is now live

I’m excited to announce the availability of our new public REST API. With the REST API, you can integrate your back-end with Userflow and pass attributes or events to Userflow. This is useful for 3 reasons:

  • Some attributes/events are only available on the back-end. E.g. if a back-end job updates a user’s status, which Userflow.js on the front-end will never know about.
  • Some attributes/events are sensitive and you may not want to expose the info on the front-end.
  • To import historic attributes/events.

The API is based on REST, and should look very familiar if you’ve ever worked with APIs such as e.g. Stripe.

With the API, you can:

  • Create/update users and their attributes
  • Get/list users
  • Track events
  • We’ll add more resources as needed

To access the API, you’ll need an API key, which you can obtain by signing into Userflow and navigating to Settings -> API.

Read the API reference

Custom events

You can now track any kind of user-related event with Userflow, and use those events to segment and personalize your flows.

Events are easily tracked directly from your webapp using Userflow.js’ new userflow.track method. Example:

userflow.track('subscription_plan_changed', {
  new_plan: 'plus',
  new_price: 279

The event will be associated with the currently identified user. You can optionally add attributes about the event (such as the new plan name in the example above).

Events are great to represent actions that users can take any number of times, which don’t fit well into regular user attributes. Some more examples of events:

  • Bill Uploaded
  • Project Created
  • Coworker Invited
  • Payment Details Changed

We’ve added a new Event condition type, which shows up under the Add condition menu, e.g. for conditions to mark checklist tasks as completed, or automatically starting flows.

Here we mark a checklist task as completed if the user has ever created a project:

Completion condition

Here we automatically start a flow for users who have not created any projects within the last 30 days:

Start condition

We’ll be adding a several further improvements to events soon:

  • Ability to filter on event attributes in the conditions
  • Group-related events (for events belonging to e.g. a company in your system)
  • More analytics about events inside Userflow

Backdrop color and opacity

When you build flows with Modal steps or use the Backdrop feature of tooltip steps, Userflow will add a semi-transparent layer on top of your app to give extra focus to the Userflow element.

By default this layer is 40% opaque black. This works well on light UIs (since it makes your own app’s UI look grayed out). It does not work well on top of very dark UIs (it just makes things slightly more dark).

Here’s an example of a dar-mode app with the default backdrop (#000 at 40% opacity). See how the focused element barely stands out:

Default backdrop

You can now change both the backdrop color and opacity under Settings -> Themes. Scroll down to the Backdrop section. Choose Modal in the Preview drop-down field to see a preview of it. Opacity is a percentage number between 0% (completely transparent) and 100% (completely opaque).

For apps with dark UI, we suggest using either a light backdrop color with low opacity (e.g. 25-50%), or a dark color with high opacity (>50%).

Here is the same app from above with a black backdrop color at 65% opacity. The contrast between the background content and the focused element is a lot better!

Black high opacity backdrop

Here it is with #aaa (light gray) at 40%:

Gray backdrop

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(, {
  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(, {
  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:

  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:

  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.


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.