Activity feed

The user profile page in Userflow has gotten a facelift.

The top contains the user's high-level details. Email and ID are now easy to copy by hovering over them and clicking the copy icon.

The right side contains a list of all the user's attributes. They can also be copied by clicking.

The middle now has 2 tabs. The default tab, Activity feed, shows a live view of all the events tracked for the user. Page Viewed events are automatically tracked by Userflow.js. Your app can track its own events through userflow.track(eventName). Click an event to expand its attributes.

The other tab, Flow sessions, shows a list of all the flows the user has seen.

user profile

Simplified Userflow.js installation

Technical post: This post is intended for our developer users.

The recommended way of installing Userflow.js, via the userflow.js npm package, is now much easier than before.

Before, you had to call loadUserflow() first, and then wait to get the userflow object back from the returned Promise. Besides not being perfectly ergonomic, this is problematic if different parts of your app needs to access it.

Now, the module exports a userflow object as its default export, which you can use synchronously. It'll automatically inject the real Userflow.js (from our CDN) into the current page, and queue all method calls.

Before:

import {loadUserflow} from 'userflow.js'

loadUserflow().then(userflow => {
  userflow.init('...')
  userflow.identify('...')
})

Now:

import userflow from 'userflow.js'

userflow.init('...')
userflow.identify('...')

Note that the real Userflow.js won't be loaded until you call one of the userflow object's methods. This way you still have complete control over when Userflow.js actually loads.

See full docs on npm

Customize button size and shape

A few new button-related options were added to Themes:

  • Button height: To make your buttons taller (or shorter) than default.
  • Button min. width: Especially in modals, making your buttons wider and more prominent can look great.
  • Button border radius: Userflow ships with a default border radius of 6 px. You can make the borders completely round or straight by adjusting this.
  • Button horizontal alignment: By default, buttons are right-aligned (except for modals, where they're centered). You can change this to always be left, centered or right aligned.

Find all the new options under the "Buttons" section on the edit theme page (Settings -> Theme).

Some pretty examples of customized buttons from the Userflow customer PurelyHR:

PurelyHR example 1

PurelyHR example 2

Automatically start flows based on browser content

Userflow can now automatically start flows based on content in the user's browser. This is highly useful, for example, if you want a flow to appear when a specific button appears in your app.

Until now, you could only auto-start flows based on user attributes, events or the URL of the current page. Now you can use all of the browser-side conditions, such as "Element is/is not present", "Input value is..." and "User fills in input".

Simply go to Flow settings in the Flow Builder, click Add start condition, and then pick any of the new condition types in the drop down menu.

Auto-start when element is present

Minimize speech bubble

Speech bubble steps consist of a speech bubble anchored to the corner of the browser window. They may sometimes be in the way of the content users are expected to interact with. Usually, when this is the case, I'd recommend using a Tooltip step instead, which places the tooltip outside of the interaction content.

If you must use a speech bubble step, your users can now minimize the speech bubble by clicking the avatar. Clicking it a second time will restore the bubble again. If a trigger causes Userflow to go to the next step, the speech bubble will automatically be restored, too.

Minimize speech bubble

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 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(user.id, {
  name: user.name,
  email: user.email,
  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(user.id, {
  name: user.name,
  email: user.email,
  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:

userflow.updateUser({
  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:

userflow.updateUser({
  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 it's 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.

Precision

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.

Background color and Standard Dark theme

Light layers on top of very light UIs can sometimes be hard to see. You can now customize the background color of your flows.

We've also added a new standard theme, Standard Dark.

Some inspiration:

Background color themes

Official Electron support

Userflow now officially supports Electron apps. Electron is a way to build cross platform desktop apps with JavaScript, HTML, and CSS.

Since it's just HTML/JS like in regular browser apps, Userflow works perfectly for Electron apps. The only thing that was missing, was the ability to preview flows in draft mode and use the element selector tool.

The only requirement is to use userflow-electron instead of userflow.js when installing Userflow.js.

When previewing flows, there's a new App type dropdown. It defaults to Browser app, which lets you enter the URL of an app running in a browser. Switch to Electron app to preview in an app running locally on your own machine.

Electron app type

It just works!

Here's a real-life example of the design documentation tool, ION, using Userflow in their Electron app:

ION modal

ION tooltip

Navigate to page actions

We've added a new kind of action that you can add to buttons, triggers, tooltips and checklist tasks: Navigate to page

With it, you can make Userflow navigate the user to a specific page in your app, e.g. when a button or checklist task is clicked.

Just click the block you want to add the action to, click Add action, click Navigate to page, and enter the URL you want to navigate the user to. The URL field even supports user attributes.

Navigate to page action

By default, a full page load to the given URL will be made. You can override this behavior in your Userflow.js installation using userflow.setCustomNavigate() to e.g. do in-app navigation instead.

Checklists

You can now build Checklists in Userflow!

Checklists work great as the anchor of new users' onboarding experience. If a user leaves your onboarding guide, they always have a chance to get back - or to pick other tours - using the checklist. Giving users a sense of progress also gives them a sense of fulfillment, which they'll hopefully chase and get even more involved with your product.

How to build checklists

Checklists are created just like regular (step-based) flows, using the New flow button in Userflow. Just pick the new Checklist type here. Checklists work in general a lot like regular flows, in that they can have auto-start conditions, are published and show up in your app through Userflow.js (no extra installation required).

Checklist builder

Checklists contain text (rich content) at the top.

There's a progress bar, which is automatically updated as users complete tasks.

You can add as many tasks as you want. Each task has a name, an optional subtitle, a completed condition and one or more actions. Example: Completed condition could be when users have created their first project in your app, and the action could be to start a tour showing the user how to do so.

What users see

Once a checklist is triggered for a user, it appears in the lower right corner (by default).

Example checklist

When a task is clicked, it's actions, such as starting a tour or navigating to a page, are performed.

If the user minimizes it, a launcher button (saying "Get started") appears in the same corner, containing a circle with a number representing the number of tasks left to do.

When the user completes a task, the checklist is automatically shown and its checkmark is checked with a cool animation.

Bonus: New flow condition

To mark tasks as completed when users have seen or completed a flow, we've added a new condition type:

Flow condition

New Flow Builder

This is an update I've been excited about for a while... A brand new Flow Builder!

The new Flow Builder is much more visual. It will feel familiar to existing users, and more welcoming and intuitive to new users. Here are the highlights.

Horizontal UI

Steps are now laid out horizontally. You scroll horizontally to get to them. It feels more like a storyboard.

I think it's nice that all the content is at the same horizontal line of sight. It makes it easier to scan through. For most flows, it's also a more optimized use of space.

Horizontal UI

Blocks that have actions (buttons, tooltips and triggers) now have a little light-blue outgoing port to the right of them. Steps have an incoming port in their top left. Arrows are drawn between blocks and steps that are linked. This provides a visual overview of how steps are tied together.

You can link from a block to a step simply by clicking the outgoing port and then clicking the step you want it to go to. You can also click the "+ Add step" on the far right to add a new step and link to it in one go. You can click an existing link's outgoing port to edit it. Press Delete/Backspace to remove it. Cmd + click on an outgoing port to scroll the target step into view (it'll flash yellow, too).

Step links

Fidelity

Steps are now displayed almost exactly as they'll look in the user's browser. Same size and full theming. Here's an example from Roger with their custom font, colors and avatar:

Fidelity

Side panel

Contextual options for blocks/steps (e.g. if you click a button) now open in a panel sliding in from the right. I think this is better than the popover that appeared in the middle of the screen before for 2 reasons: 1) It doesn't block other content (e.g. the other blocks around it). 2) No vertical scroll necessary to make the popover fit into the viewport.

Side panel

I hope you'll like the new Flow Builder! 😀

Rich content editor

Userflow just got an awesome rich content editor. When you focus a step's content in the Flow builder, you'll see this (notice the new toolbar):

Empty editor

We've put a lot of work into making it incredibly smooth to use. It's custom-built on top of something called Slate.js, which means it's not like a regular boring WYSIWYG editor that seems out of place. It uses proper Userflow components, supports user attributes, and allows for much more advanced and customized content in the future.

Attributes

Before, user attributes could be inserted by putting a variable name in curly brackets, e.g. {{name}}. Not very user-friendly. Now it's as simple as clicking "Insert user attribute". You can still use the {{name}} - or just {name} - syntax, which will automatically be replaced with an attribute. This way, we also validate that the attribute actually exists. Finally, attributes now support fallback values, which will be displayed if the attribute is missing for a user.

Attributes

Links can be inserted by selecting some text and then clicking the "Insert link" button or pressing Cmd + K (on Mac, use Ctrl + K on other platforms). The URL field is even a "rich" content editor itself supporting variables!

Links

Images

Images can be uploaded directly into Userflow, or you can enter a URL where an existing image is stored.

The width of the image can be specified in a percentage of the flow width or an exact number of pixels. Height is automatically calculated to keep the same proportions.

Images can also be links. Just select the image and click the "Insert link" button (or press Cmd + K).

Images

Videos

You can also embed videos from popular video providers. We currently support YouTube, Vimeo or Wistia. Let us know if your favorite provider is missing, and we'll add it!

Video sizing can be managed just like with images.

Basic text formatting

You can, of course, still use bold and italic text. We've also added text-align controls (left, center, right). We're planning to add more formatting options soon, such as block styles (Normal text, Heading 1, Heading 2), text color, code blocks and more.

User-fills-in-input conditions

One pattern that's been a little cumbersome in Userflow has been to perform an action - such as go to next step - when the user is done filling in an input field.

Before, you could make a condition such as if Name input has any value. The problem here is that this condition becomes true immediately as the user types the first character. But, it's usually not appropriate to continue to the next step until the user is done typing.

This is where the new User fills in input condition type fits perfectly. It only becomes true once 1 second has passed without the user typing any more characters. This 1 second is reset with every keystroke, giving the user a natural feeling when being sent to the next step.

Here's a demo of how it works:

User fills in input demo

Ignore element text

It's now easier to select elements containing dynamic text (e.g. user-chosen names) in your web app.

In the example below, we're trying to select the first row in the table, which contains a dynamic project name. Our flow should not depend on the exact name since it will be different for other users. Notice in the lower-left corner how Userflow, by default, picks the name of the project:

With text

If instead, we click the Settings (cog) icon, check "Ignore element text" and point to the element again, then we get this:

Without text

Now Userflow discards the element's text and uses the best CSS selector it can find for it.

User and session management

You can now view details about users' flow sessions in Userflow. A session means a specific user viewing a specific flow.

If you click a session row on the view-user or flow-overview pages, you can see all its details:

View session

You can dig into why/when the flow was started, why/when it ended, exactly which steps the user saw and how long time it took them.

You can now also delete individual sessions - or a whole user (including all their sessions) - using the new "User options" and "Session options" three-dot buttons on the view-user and view-session pages respectively. This is great for testing, as you can test flows' auto-start conditions over and over with the same user. You can also delete a user's complete history to comply with GDPR.

Custom inputs in conditions

Many apps use custom input fields such as combo boxes, date fields or type-ahead fields.

combobox

Userflow has a nifty condition type, Text input value, which can read the value of a text input and compare it to some value you define. Such a condition could, for example, advance the user to the next step.

Text input value condition

Until now, dealing with the value of custom input fields was a pain though. They simply didn't work with +Text input value_ conditions. Now they do work!

It just takes a single line of configuration in your app (have your developers do this). With the new userflow.registerCustomInput() method, you can tell Userflow to treat your custom inputs as regular text inputs. Userflow will then read the text content of matching elements. Example:

userflow.registerCustomInput('.my-combobox-value')

Demo:

custom input demo

Let me know if you'd like help setting this up in your app!

Multiple active flows and hidden conditions

We've released 3 new features, which make it easier to work with multiple flows.

Previously, a user could only have one active flow at a time. The flow would be visible at all times until it was closed for good.

Automatically hide flows

With the new "Hidden condition" feature, you can define a condition, which, when matching your user, causes the flow to be temporarily hidden. When the condition no longer matches your user, the flow will be shown again.

You can, for example, use this to automatically hide a flow if your user navigates to a different page. In the following example, the flow automatically starts if a user navigates to /products and is temporarily hidden if the user leaves the /products page before completing the flow:

Hidden conditions

Multiple active flows per user

Before, flows were either active or closed. Flows can now be in 3 different states:

  • Active: The flow is visible to the user. This is the state all new flows start in.
  • Hidden: The flow is not visible to the user, but may become Active again later.
  • Ended: The flow is completely over and will never become visible again (unless the same flow is started over again later in a different session).

Users can have multiple flows in each state. Even multiple active flows. Only one active flow will be shown at a time though.

Having multiple flows active/hidden for a user, is very useful when you have different flows for different pages in your app. Imagine a "Products intro" flow only visible on /products, and a "Categories intro" flow only visible only on /categories. As the user navigates between the 2 pages, Userflow will automatically hide one and show the other.

Teaser: Userflow is getting checklists! With checklists, you can e.g. build a "Getting started" list of tasks new users should complete. For checklists, having multiple flows open (a regular flow and a checklist) is a requirement.

Assign start priorities to flows

When adding an auto-start condition to flows, you can now assign the flow a priority (Low, Lowest, Medium, High, Highest). If 2 auto-start conditions match a user, the flow with the higher priority will take precedence. The other flow will be started once the first flow is hidden or ended (assuming that the user still matches the condition).

A new flow can only be auto-started if the user does not have any active flows. I.e. flows can be auto-started if there are only hidden flows.

New, sleeker top menu

I've been wanting to do some work on the old top menu for a while:

Old header

It takes up too much space. It's too dark - like a shadow over the important part of the app. The green accent under the active submenu item on top of the dark blue background is a little eye-irritating.

Here's what the new top menu looks like:

New header

Its smaller size means more room for content. This will be especially important for the next version of the Flow Builder.

It has a white background to take as little focus away from the main content.

It has just one row of content. When navigating to a nested resource, such as a flow, the top menu items are replaced with the flow's navigation menu using a sleek, but subtle, animation. A back-arrow will take the user back to the Flows list.

The Settings page now has a simple side menu, which makes it easier to add more settings pages in the future vs. having a horizontal menu that's harder to scan with your eyes.

The help menu and user account menu have also been simplified with 2 simple circular components on the top right.

Language support

The flow UI from your users' perspective now supports multiple languages.

Choose your desired language using Themes. If you don't already have a custom theme, go to Settings -> Themes, click the Standard Theme, and duplicate it.

If you use multiple languages, you should make a theme for each language and apply the proper theme on each flow depending on the flow's language.

The following languages are currently supported:

  • Danish
  • English (US)
  • German

We're looking to add more languages on an on-going basis. If you're missing your language, reach out at support@getuserflow.com, and we'll add it.

Tooltips

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.

Tooltip demo

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.

Themes

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

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

Theme designer

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.

Modals and primary buttons

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

Modal and primary button

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.

Beacon improvements

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:

New beacon

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:

New pointer

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!

Early Access Announcement: Userflow

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:

Flow example

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

Flow builder

What to do next

Now, go read all about Userflows 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!