This guide will walk you through the basics of building new content, or flows, in Appcues.
What's covered in this guide
- What is a flow? What is the Flow Builder?
- Pattern types
- Step settings
- Adding components to a step
- Building a flow across pages
- Advanced building tips
What is a flow?
Flows are a series of steps designed to guide your users through an experience. Appcues helps you build, publish, analyze, and iterate flows - without requiring development resources when you want to make a change.
Flows can span multiple pages across your site - so you can lead users from the central dashboard to a settings page, for example.
Flows are made up of steps, and each step is one of our core patterns (more on patterns next). Inside the step are components, like images, buttons, text, or even HTML. We cover those a little further down.
What is the Flow Builder?
The Appcues Flow Builder is a Chrome Extension. Chrome Extensions are little programs you can install to extend the Google Chrome Browser. Using the Flow Builder, you can build and edit flows right on top of your site (and building in context is key for a great user experience).
Requirements for using the Flow Builder
Before you get started, here's what you'll need:
- The Google Chrome browser (and it certainly helps if its up-to-date).
- The Appcues Flow Builder Chrome extension (download it here).
Once the Flow Builder is installed, you can open it by clicking the Chrome Extension icon, or by creating a new flow from within your Appcues account.
Flow Builder overview video
This quick (1 minute) video covers all the key parts of flows and the Flow Builder. It'll have you feeling confident building flows in no time!
For more video content and upcoming webinars, check out our webinar series page.
The pattern types that make flows
Big, screen takeover experiences. Because they have more space, they are great for giving users context at the start of the flow. Read more about how we've used them to welcome and motivate users, announce new features, or give your users a "choose your own adventure" onboarding experience.
Helpful guideposts in your product. Great for "passive" feature discovery. Use hotspots to provide your users with on-demand guidance or tips, or point out smaller UI changes.
Next action pointers. Tooltips are best used to direct sequences and walk-throughs.
The presentation and behavior of each step in your flow can be customized using step settings. Here's a lightning quick tour of the options in the step settings panel.
- Theme: choose which theme to apply to that step (or step group).
- Position (slideouts only): select where on the screen the slideout should display.
- Backdrop (slideouts and tooltips only): add a backdrop to the step (for making sure the user is able to focus on it).
- Progress bar (modals and slideouts only): display a horizontal bar for users to track progress through the flow.
- Skippable: allow the user to dismiss this step (exits the entire flow).
- Beacon (hotspots and tooltips only): style the point the step is anchored on.
- Alignment (hotspots and tooltips only): customize the arrow that points to the beacon.
- Progress on click of (tooltips only): define how the user should move to the next step in the flow (by clicking an Appcues button, or by clicking the element the tooltip is anchored on).
Adding components to a step
Components are how you make the flow content yours. Add images, videos, text, buttons, survey options, and even custom HTML to your steps. Just choose the option from the menu to get started. After adding an element, you can re-size it as well.
Once added to your step, components can also be styled using the options in the Flow Builder, in Themes, or by adding custom CSS to a theme. Read more about that topic in the guide to styling flow content.
Our goal is to make working with components in the Flow Builder easy. But some components have advanced options, so we have specific guide for them below.
Working with buttons
Modals and Slideouts support custom buttons. Use buttons to:
- Move users to the next step in your flow. 👍
- Direct users to a specific path (inside your app) or URL (outside your app).
- Direct users to a custom step in the current flow (good for creating choose-your-own-adventure experiences). Learn more about branching logic.
- Trigger a different flow (also good for self-direction around an app).
- Track custom events and update user properties (which you can use for creating segments and goals, and targeting flows).
By default, these buttons will adopt the styles set in the theme. To change the button background color and button font color, edit your theme's colors. When creating a button, you can also modify the alignment, margins, styling and add a handful of button actions.
Pro-tip: custom buttons aren't supported in hotspots and tooltips. If you need to get a button in a hotspot, try using an image of a button instead.
Working with videos and GIFs
You can add videos and GIFs to any pattern type - and we recommend you do! They are a great way to explain workflows visually.
To add a GIF: add an `image / gif` component, and then upload the GIF. You can re-size or move it around the step from there.
To add a video: add a new `video` component, and then paste in the embed code from a web video service. We explicitly support Wistia, Vimeo, and YouTube embeds, but any that utilize `iframes` will likely work.
To save you some time, here are the guides for generating embed codes for each service
- How to get video embed codes from Wistia
- Embedding videos overview from Vimeo
- Embed a video guide from YouTube
Working with Custom HTML
When our component options aren't enough to achieve your design, or when you want to add content from other platforms to your steps, use the Custom HTML option.
Preview your flow
While building, you can review how a specific step or entire flow will behave by using the Preview option. Preview is great for making sure all the steps in the flow work together just how you intended.
You can find preview in the builder bar (look for the 👁️ icon). Head to the guide on testing flows for more.
Building a flow across pages
If you're working on a flow that goes across different pages of your app (or if the URL will change as users navigate through the flow), there are a few key topics to review:
- how you change pages while building a flow
- page change settings
Check out this quick video for an intro to building across pages.
Changing pages while building a flow
The Flow Builder has two modes:
- Build - The default mode, for adding steps and editing content. While in this mode, certain interactions may be blocked on your app so that you can work on your flow without interruption.
- Navigate - This mode allows you to navigate to another page, as well as interact with your app. It is also helpful in surfacing dynamic elements on your page, such as a dropdown menu.
When you're ready to add steps on a new page, select Navigate from the toggle at the top of the page. Go to the next page as your user would, or paste in a new URL.
Page change settings
After navigating to a new page and creating a step, a page change will be added automatically. Page changes define how your user will get to the next page in the flow.
There are two types of page changes:
- Redirect Automatically - the user will be taken directly to a URL. Redirects are best when the user will click a link or button inside the step to navigate them, for example a "Next" button in a modal or tooltip.
- Let Them Navigate - the user will navigate themselves to the page. This option is best when the user will need to interact with your app to move to the next step of the flow, or when the next step is on a dynamic/unique URL.
To update the settings for a page change, select the arrow icon from the bottom bar. In the settings modal, you can set the URL where the next step will be shown. By default, it will be set to the URL you built the content on.
Building Across Dynamic or Personalized URLs
In some cases, that URL should be personalized for the user. For instance, if that URL is created dynamically with the ID for their account, or for the ID of the item they are looking at, etc. In that case, two options for getting that set up:
Using Wildcards (Let the user navigate only)
Use an asterisk `*` as a wildcard token in place of personalized information. This option is available for let them navigate only.
For example, instead of:
Using custom properties
You can use user properties in both your Redirect Automatically and Let Them Navigate page changes. Simply insert the user property name inside two curly braces, and the user property will function as a variable.
User properties can be included using double curly brackets, for example:
Could be achieved using the firstName user property:
Tying it all together
Once you've got the basics down, this video can help you bring it all together. It covers flow building, use cases, themes, targeting & publishing, troubleshooting, and reporting & goals.
Advanced tips for building flows
Building on Dynamic Elements
- If you'd like a slideout to be tied to a dynamic element, you'll need to combine your slide out with a tooltip or hotspot.
- Hotspots work independently from each other and will appear at once as a group: if any hotspots in your flow are on dynamic elements, all other hotspots will appear first and continue to persist (unless clicked) until the dynamic element is exposed.
- Tooltips are sequential and will always launch in order: if your first tooltip is hidden on a dynamic element, the entire flow will not appear until that element is visible to your end user
Placing Hotspots & Tooltips On Dynamic Elements
To place hotspots and tooltips on dynamic elements:
- Select the 'Navigate' in the upper portion of the screen which will allow you to navigate to the page where these elements will appear and create a new hotspots or tooltip
- While in 'Navigate' mode, open up the dynamic element and then select 'Design' or 'Continue Building' (at the bottom of the screen).
- If you've changed URLs, you will be prompted to add a 'page change'. If not needed, select 'Cancel' to continue building your flow.
- Place the tooltip or hotspot on the now-exposed element.
- In the editor, when your element is not exposed you will see an error message that states "This [hotspot/tooltip] isn't attached to anything visible right now. You can click to reposition" -- you can still edit your text/HTML and when your element is again exposed, the tooltip or hotspot will re-position itself onto it
- You can also preview your flow to verify that your tooltip or hotspot is attached to the right element (click the eye icon in the bottom right of your editor to preview the current flow or group)
- While most hotspots and tooltips can attach to most dynamic elements, we don't currently support elements that appear and disappear upon hover
- If your dynamic element exists on a different URL, you'll have to create a separate flow on that URL to place hotspots or tooltips
Placing multiple hotspots on a dropdown is not a great experience for your customers, especially because the dropdown might be closed and they will not be able to advance to the next step in the flow. Consider having a singular hotspot, at least, to let them know to open the dropdown first.
Adding Full-Screen YouTube Videos
To allow the option for full-screen mode, add the below snippet in the HTML section within the iframe embed link (provided by YouTube):
allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true"><iframe>
Linking Flows Together
Once a user completes a flow, you can trigger a subsequent flow to show that takes that user through a new experience. Linking flows will give you the ability to keep each flow under 5 steps (our recommendation) but then still support a multi-step experience for your end users.
You'll find this setting in the Target & Publish settings, towards the bottom, and it will look like the photo below. It is important to remember, linked flows only show once the user completes the flow prior. The act of linking will override all targeting for the subsequent flow. So essentially, you are telling Appcues that you want to show Flow 2 to anyone who completes Flow 1, regardless of if they fit our original targeting of Flow 2.
In order to do this, you'll need to have the linked flows created in advance. Once they are created, you'll have access to them in the drop-down menu for "Trigger Appcues content".
Once you have your flows created, follow these steps:
- Starting from the flow you want to show first, go into the Settings option on your flows dashboard, or the Target & Publish settings in the Chrome extension.
- Under Actions, select Trigger Appcues Content
- A drop-down menu will appear: select the name of the flow you would like to appear next
- If the select flow is set for another URL, select Redirect to a different page and enter the page of the flow that will trigger upon completion.
- If the triggered flow is located at another domain, be sure to enter the full URL, including the http(s)://
- Keep in mind: Redirecting to a different page will automatically show flows targeted to that page. Triggering a flow is really helpful when the user is not changing pages, but you want Appcues to know that something else should show.
- Repeat steps 1-3 to link more flows and patterns
- Publish your work. All linked flows must be live in order to give your users the full experience.
Because your flows are linked together, targeting rules from pattern/flow 1 will be respected by all following flows.
Pro-tip: You will not be able to preview the full sequence of linked flows through the Flow Builder. To test your linked flows, you will need to publish each flow to an installed domain and view them in their published state. We recommend using "Show only to my team" targeting to limit the audience during your test runs.
Known limitations for flows
As edge cases or cross-browser support issues come up, we'll list them here (until we have addressed them).
- We are not able to provide the backdrop feature to IE 10/11 or Safari users due to browser restrictions.