Blog

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

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.

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.

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)

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

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

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

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:

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.

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

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:

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

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:

• 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:

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

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:

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

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.

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.

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>