Small language change

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.

Validate text inputs with regular expressions

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.

Delicious UX improvements: Keyboard navigation, copy/paste, undo/redo

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

Amplitude integration

Great news for our friends using Amplitude!

Amplitude is a powerful product analytics platform.

The Userflow-Amplitude integration enables you to analyze how users interact with your flows/checklists, and correlate it to other behavioral analytics that you collect in Amplitude.

Userflow-generated events, such as Flow Started and Checklist Task Completed , can be continuously streamed into your Amplitude project of choice.

See the new Amplitude setup guide to get started.

Add Amplitude

Mixpanel integration

Great news for our friends using Mixpanel!

Mixpanel is a powerful product analytics platform.

The Userflow-Mixpanel integration enables you to analyze how users interact with your flows/checklists, and correlate it to other behavioral analytics that you collect in Mixpanel.

Userflow-generated events, such as Flow Started and Checklist Task Completed , can be continuously streamed into your Mixpanel project of choice.

See the new Mixpanel setup guide to get started.

Add Mixpanel

URL pattern matching

Userflow now has a completely new URL pattern matching feature, which makes it much easier to match pages in your app.

Previously, you had 2 options for matching URLs: 1) Exactly match the full URL (the “is” option), which doesn’t work if part of the URL is dynamic, or 2) match just a fragment of it (the “contains” options), which means it could potentially match wrong URLs, too. If you wanted to match multiple URLS (or exclude other URLs), you had to add multiple “Current page” conditions and fiddle with AND/OR settings.

The new URL pattern matching solves all of these problems! It supports:

  • Wildcards (e.g. /app/* )
  • Single dynamic segments (as in /projects/:id/details )
  • Multiple patterns to include/exclude
  • The option to leave out URL parts that you don’t care about (e.g. /app matches the exact path /app on any domain)
  • Intelligent URL query params handling ( ?key1=value&key2=value2 will match key1 and key2 individually)
Page condition popover

See the new URL pattern matching guide for more info and examples.

Custom checklist launcher button

Traditionally, when users minimize a checklist, Userflow’s launcher button shows in the corner of the page:

Launcher button

When users click it, the checklist will be shown again.

We now have a couple of controls that let you render your own button to show the checklist.

Here’s how to do it:

  1. In the Checklist builder: Uncheck Show launcher button when minimized in the Checklist settings panel.
  2. Optional: If you want to remove the Dismiss checklist button and prevent users from dismissing the checklist permanently, also check Prevent users from dismissing the checklist .
  3. Add a button in your app with a JavaScript click handler that runs userflow.start(checklistId) , where checklistId is the ID of your checklist (find this under the Link/Embed tab).

Customize chrome border color/width

You can now add a border around your Userflow tooltips, speech bubbles and modals. It can work great to make the Userflow UI even more prominent.

Here’s an example of a tooltip with a 2 pixels wide blue border:

Chrome border example

Find the new Chrome border width and Chrome border color under Settings -> Themes -> pick a theme -> Chrome in the accordion menu. “Chrome” is what we call the bubble around the Userflow content.

The tooltip notch (the little arrow) will automatically reflect your border color.

Tooltip backdrop matching round elements

Previously, when using tooltip backdrops, it would look like this if the target had round corners (i.e. using border radius):

Before

Those white areas around the button’s corners were a thorn in the eye.

Userflow now matches the target element’s border radius, making it look much nicer:

Before

Version history

The new Version history tab makes collaborating on flows even better than before!

Version history

Here, you can see:

  • Version history lists all your previous versions. Userflow automatically creates new versions periodically, when you publish, or if multiple users edit the same flow.
  • Environment overview displays the status of each environment, i.e. which version is currently published.
  • Publish history shows a log of when flows were published and by who.

If you click the three-dot icon next to a version, you can:

Version options
  • View its content as it were in the Builder in read-only mode.
  • Compare 2 versions, which lets you inspect changes between 2 versions.
  • Publish it, for example, to revert to a previous version.
  • Restore it in case you want to undo some changes you’ve made.

If you click the three-dot icon next to an environment, you can:

Environment options
  • Publish the latest version if the flow has not been published yet, or there are pending changes.
  • Unpublish , which is useful if you temporarily want to prevent the flow from starting.