Blog

You can now add tooltips anchored to specific elements in your web app. Tooltips are great if a flow step asks the user to click a specific element on the page.

Choose Tooltip in the Step appearance popover next to a step. Then select the element you want the tooltip to be anchored to. Optionally add an action or enable backdrop.

Tooltips join our 2 other step appearances: Speech bubbles and modals.

Tooltips feature highlights:

• Tooltips are automatically scrolled into view.
• Perform actions, such as going to the next step, when users click the target element.
• Optional backdrop, which adds a semi-transparent layer on top of your app, revealing only the target element and the tooltip.
• Tooltips are automatically placed either above, below, to the right of or to the left of the element - depending on what seems best for the user. You can optionally set your desired placement.

You can now customize the look’n’feel of your flows with Themes.

The new Theme designer can be found under Settings -> Themes:

This theme has a custom avatar, which is slightly larger than the default size. The speech bubble is placed on the bottom right and is a little wider than the default. It uses the Roboto font and a Material Design color scheme.

There’s a standard theme, which you can duplicate to make your own customizations.

You can mark a theme as your default theme using the three-dot menu on the Theme designer page. This will make all new flows use this theme by default.

You can change the theme for a flow under the three-dot menu, then click Settings.

You can also choose a different theme for individual steps by clicking the step’s avatar and checking “Use a different theme for this step”. This way you could, for example, place the speech bubble in a different corner for just a few steps.

Avatar and voice, which was previously possible to edit per flow, have been moved under themes. This should make it easier to manage.

Let us know if there are any aspects of your flows that you miss customization options for.

We’ve added the ability to style the speech bubble and its buttons differently from step to step.

Modal steps allow you to put the content directly in the face of the user. This is great, for example, for the first step in an onboarding flow. This way, you make sure that the user sees it. To turn a step into a modal, click the avatar in the flow builder, and then check “Modal” under “Appearance”.

Primary buttons stand out with a more prominent appearance than regular buttons. This is useful when you want to lead the user in a specific direction. To make a button primary, click it in the flow builder and then check the “Primary” radio button under “Appearance”.

Coming up soon: Tooltip steps, where the speech bubble is anchored and placed next to an element you select.

We’ve released some improvements to our flow beacons. Beacons are used to draw users’ attention to specific elements, so it’s crucial that they’re highly visible, yet not intrusive.

The beacon animation is now two expanding rings. They expand over 2 seconds, 1 second apart, making it look like ripples. Here’s a GIF:

We stuck to a yellow color. I believe that red is too intrusive (you don’t want to welcome your new users with a bunch of error-like red). We’re now using Material Design’s Amber color (500), which is a reasonable default color since it increases the likelihood that it’s somewhat familiar to the user. This color will obviously be customizable very soon so that you can pick your own color (holla at me if you’d like this before it’s generally available).

Beacons now follow content around precisely and immediately. Before, they would either jump periodically or not move at all.

Beacons are automatically hidden if they’re scrolled out of view (it even works with nested scroll containers). If they’re outside of the browser’s viewport, an arrow will point in its direction, so the user knows where to scroll to:

Performance has also been improved, which could make a difference to users on very low-end devices with multiple beacons.

The changes also prepare us for the upcoming “highlighted areas” (WIP term). Instead of a pulsating dot, you’ll be able to highlight a whole element on the page with a rectangle around it. Optionally, you can also choose to mask everything around it, so the user can’t click there. Stay tuned!

TL;DR

Register for early access to Userflow today! All early access users get Flows free forever with unlimited monthly active users.

Introducing Userflow

For the last 6 months, we’ve been working on a new product. We’re incredibly excited to announce the beginning of Userflow. With Userflow, you’ll be able to build in-app experiences using our intuitive Flow Builder. No code required!

What you can build with it

Here are some ideas:

• Improve your sign-up conversion rate with an onboarding product tour that is automatically shown to new users.
• Announce new features inside your app to make sure users notice - and use - them.
• Send interactive help guides to users via links in emails/live-chat, showing them how to perform tasks that typically require a lot of support/explaining.

Why we built it

When our first product, Studio1 Videos, launched, we wanted a highly interactive flow that could guide new users from zero knowledge to rendering their first video in less than 15 minutes. We looked at the market for flows/product tours, but couldn’t find exactly what we were looking for.

You’ve probably seen onboarding flows like this in many other apps:

• You arrive in a new app, which you’ve never seen before.
• The whole screen goes dark, and a single small item is highlighted with a tooltip next to it.
• The tooltip has a Next button - you can’t click anywhere else.
• You just blindly click Next, Next, Next until you’re done.
• The tour doesn’t ask you to do anything, and you, therefore, don’t really learn anything.
• When you’re done with the tour, you’ve got a bunch of information, but haven’t actually achieved anything.

This is not what we wanted!

We wanted a flow that:

• Could discretely point the user in the right direction without taking over the whole UI.
• Could react when the user performed any kind of action on the page, e.g., clicked a button, navigated to a page or typed into a text field. Example: If you fill in a specific value in a text field, then go to the next step.
• Detect when things went wrong, and help the user fix it.
• Could branch in different directions depending on the user’s actions. E.g., if a user closed a dialog early, we would just skip the next step(s).
• Since we were already using synthetic text-to-speech voice-over, we thought it would be cool (and helpful) if the flow also talked to the user.

Granted, there are probably some offerings on the market, which could do sort of what we wanted, but they either have a very high cost and/or can be very difficult to use and maintain.

So, we decided to hard-code a flow. It went great! New users were really impressed with our automated onboarding. But, it was a lot of work to build and maintain.

We saw the opportunity to turn it into a separate product so that other companies could quickly build solid flows without spending weeks of development time. As of about two months ago, this hard-coded flow was replaced by a flow powered by Userflow itself (woof woof, mmm.. dog food).

Now we’re inviting you to build your own flows.

What it looks like

Your users will see a speech bubble appear in the corner inside your own web app:

You build flows using our intuitive builder. No code required. No need to wait for developers to do their thing.

What to do next

Now, go read all about Userflow or register for the wait list today. We invite new users every week. And, remember that it’ll be free for early access users forever!