Blog

Today we’re adding support for two-factor authentication. Two-factor authentication helps safe-guard your Userflow account by asking for both your regular password and a time-based code from an Authenticator app when you sign in. This means your account can’t be breached even if someone were to get a hold of your email and password.

We recommend that all users enable two-factor authentication.

Go to Settings -> My account, scroll down, and click the Require two-factor authentication when I sign in switch to set it up.

Next time you sign in, you’ll see this after entering your password:

TL;DR: Userflow.js page load impact lowered by 40%. Closest comparable solution’s JavaScript footprint is 8x larger/slower than Userflow.js. Upgrade your userflow.js installation to take full advantage.

At Userflow we CARE about performance. In my past career, I’ve optimized the page load time of numerous web apps. I’d hate for Userflow to be a contributing factor in making our customers’ apps slow.

When you include any third-party JavaScript in your app (such as Userflow.js), it has an impact on your page load time. The browser has to download, parse and evaluate all this JavaScript. The more, the slower your web app becomes.

Userflow.js was already incredibly light-weight, but our latest update takes performance to the next level. Userflow.js now ships 2 separate builds:

1. A fast and small build for modern browsers (>90% of average global users). By taking advantage of modern browser features, we can ship a smaller amount of JavaScript that runs more efficiently. Our modern build is just 15.3 kB (52.2 kB uncompressed), which is around 40% less than before. The closest (JavaScript-size-wise) comparable solution ships 8x as much JavaScript, while other provider ships 23x as much.
2. A legacy build for older browsers. This allows us to support older browsers, without hurting performance in modern browsers. We’re even pretty close to supporting IE11 (full support coming soon!).

Your Userflow.js installation will automatically load the best build for each user’s browser.

Here’s a comparison between Userflow and 4 other providers, showing how much smaller Userflow.js is. Remember that less JavaScript = faster page load time.

We recommend asking your developers to upgrade your Userflow.js installation:

• If you’ve installed userflow.js via npm, please upgrade to v2.1.0.
• If you’ve installed Userflow.js via our HTML snippet, please upgrade to the latest one.

Here’s a new 😋 feature, which gives you an even more powerful way to target users or adapt to their behavior.

Event conditions can already be used in Auto-start conditions for flows, Completed conditions for tasks etc. Example: Start a flow when a user changes their subscription plan.

When your app tracks an event, it may add additional information about the event in the form of event attributes. Here’s an example of when a user changes their subscription plan, and we want to know which plan they change to:

userflow.track('subscription_plan_changed', {plan_id: 'pro'})

The new thing: Event conditions now support filtering based on these event attributes. Example: Start a flow when a user changes to the Pro subscription plan specifically.

Notice the new “Where Plan Id is pro” part.

Just like with regular user attribute conditions, you can add multiple event attribute conditions. The attributes can be strings, which you can compare with equality (is/is not) or whether they contain a substring. They can also be integers, which you can use to compare using equality, less than, greater than, etc. Date and boolean event attributes work, too!

You can even use this with Userflow-generated events, such as Flow Started, to e.g. start one flow 7 days after a user completes another flow:

You can now set a condition for whether a checklist task should be visible or not.

This is useful if a task should only be presented to users that can actually complete it. Here’s an example, where we only show a task to the owner of the account:

Simply switch on Only show task in the task’s side panel. You can use any of the regular conditions here.

It happens that a tooltip target element can’t be found in your app. For example, if the user navigates to the wrong page.

On Settings -> Themes under the Tooltip section, you can now configure how long Userflow should wait for a tooltip target to show up before giving up, and what to do when that happens:

Read our new Missing tooltip target guide for more information.

You can now embed any content that supports oEmbed in your flows. oEmbed is an open standard that 100s of providers use to make it possible to embed their content.

This means you can now use pretty much all video providers on the market.

You can also embed things like a TypeForm form:

Or a Genially game:

Simply click Embed (video etc.) under the + icon in the rich content editor’s toolbar:

Then paste the URL you want to embed. Userflow will automatically figure out how to embed it.

We’ve added a few improvements that help make your tooltip backdrops look even better!

Customize the backdrop highlight

By default, there’s a subtle white shadow around the tooltip target. Notice the area around the Project dropdown here:

You can now customize this highlight effect in the theme editor:

You could, for example, make it blue and more intense:

You can flip the shadow to be cast inside the target instead of outside:

Using the Backdrop highlight spread field, you can make it appear as a solid line around the target:

Prevent users from clicking the tooltip target

The Add backdrop section in the flow builder (in the tooltip settings panel) has 2 new options:

If you flip Block tooltip target clicks to ON, the user won’t be able to click anywhere in your app. Make sure to pair this with a button that takes the user to the next step.

Backdrop padding

The Backdrop padding field lets you expand the backdrop area, which is useful if the target element doesn’t have natural padding. For example, turn this:

..into this:

Our new Localization feature is landing soon!

The current way of dealing with multi-lingual apps in Userflow is to manage separate flows/checklists for each language, which is pretty tedious.

With Localization, you’ll be able to build a flow/checklist once, and then translate just the text parts to different languages. This will greatly improve the workflow for multi-lingual apps.

To prepare for Localization, we’ve made a small change around how you use languages in Userflow.

Previously, languages were tied to themes.

As of today, you now select a locale, representing both a user’s language and region, directly on each flow/checklist. See under the “Show advanced settings” button.

You can manage your locales under Settings -> Localization. All existing flows/checklists have been assigned a locale matching their theme’s old language.

We can’t wait to show you Localization very soon! Write us if you’re interested in getting early access.

You can now use regular expressions to match text input values in your triggers

This is useful, for example, when verifying that the user filled in an email field correctly.

Regular expressions are a bit technical, so this is definitely a power user feature. Ask your developers, or feel free to reach out to us for help, if you ever find need to match against complex patterns.

This is an update that I’ve been extra excited about! 🤩

Besides all pages having gotten a design facelift, the update mainly focuses on the ergonomics of the flow builder: A more intuitive layout, keyboard navigation for fast edits, copy/paste blocks (even between flows!), and full undo/redo support.

Since I started using Superhuman (a keyboard-focused email client), it’s been eye-opening how much better user interfaces can be when most interactions can be done solely via the keyboard.

Here’s a video walkthrough of how to get the most out of the flow builder:

Read full post