Building Flows

The information below will walk you through the basics of Appcues, including creating and editing content in the flow builder, building segments, targeting flows, analytics, and installation resources. 

In this article we'll cover the following topics:
Best Practices
Creating Flows
Building Across Pages
Navigate and Build Mode
Using Page Change Actions
Page Change Settings
Flow Patterns Modals
Slideouts
Tooltips
Editing Steps Custom Buttons
Templates
Dynamic Elements
Previewing Flows
Testing Flows
Publishing Flows  
Publishing to Dynamic URLs Linking Flows Together
Re-launching Flows

Below is one of our Basic Training webinars to learn the ins and outs of our product! We will cover flow patterns, use cases, themes, targeting & publishing, flows diagnostics, and reporting & goals. 



Best Practices for Creating Flows

Keep it Simple

Each tooltip or action item should be concise and easily understandable. A flow should also be geared toward one goal, and you can link multiple flows together to create a series.

Example 
Comparably allows users to choose a tutorial from a limited set of options, and then each tutorial is geared toward one feature. See the flow on Really Good UX.

Keep it Short

Flows are best when they take no more than a minute or two to complete. For example, an onboarding tutorial should generally contain three to six steps.

Example
Amplitude's redesign tour allows users to opt-in and then quickly walks them through the new product features. See the flow on Really Good UX.

Target Appropriately

New users probably don’t need to see feature announcements on their first day in your product, and a small change to your app probably doesn’t need a full screen modal. Think about who should be seeing the information and how.

Example
Zlien redesigned their product, but new users would never know there was an old product. Their announcement only displayed to users that had accounts prior to the redesign release date. See the flow on Really Good UX.

Don’t Over-Flow' Your Users

You can overwhelm and frustrate users with too many flows at once. Create a cohesive strategy around when you’re going to show flows and how often. This is especially important if you have multiple people creating Flows for your product. See the Targeting Settings overview.

Drive Toward Value

Identify what users are trying to accomplish. Build flows that guide them toward those goals and increase the value of your product.

Example
Reddit knew their user base would quickly click through tooltips, without retaining the information. To solve this, they opted for one clear pop-up, in which they fit every new feature the user needs to know, while offering multiple exit routes. See the flow on Really Good UX

Back to top



How to create a new flow

There are two ways to launch the Flow Builder and get started. Check them out below.

Before you begin, you will need the following:   
  • The Google Chrome browser, running the latest version. 
  • The Appcues Flow Builder Chrome extension (download it here).
Open the builder from your Appcues dashboard:
  1. From my.appcues.com, select the "Flows" option from the navigation on the left-hand side.
  2. Click on the Create button in the top right corner of the Flows list.
  3. Enter the page on your website you'd like to start building your flow on, and then select Next.

Open the builder from your website using the Appcues Flow Builder Chrome extension:
  1. Navigate to the specific URL you'd like your flow to start on.
  2. Click on the Appcues Flow Builder icon in your Chrome extension list.

Back to top


Building Flows 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 know: how you change pages while building a flow, and the two types of page changes you can utilize. 


Back to top


Changing Pages - the Navigate and Build Modes

The Flow Builder has two modes:
  1. 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.
  2. 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.

Back to top


Using Page Change Actions

After navigating to a new page and creating a step, a Page Change Action will be added automatically. Page Change Actions define how your user will get to the next page in the flow.

There are two types of Page Change Actions:

1. Redirect Automatically - the user will be taken directly to a URL. Redirects are best when the user will click a link or button in a flow step to navigate them, for example a "Next" button in a modal or tooltip.

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


Page Change Settings

To update the settings for a Page Change Action, 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:

Wildcards (Let Them Navigate only)

Use an asterisk * as a wildcard token in place of personalized information. This option is not available for the Redirect Automatically setting.

For example, instead of:
<a href="http://appcues.com/account/123456/new">http://appcues.com/account/123456/new</a>
you can use: 
<a href="http://appcues.com/account/*/new">http://appcues.com/account/*/new</a>


Appcues User Properties 

You can use your Appcues user properties in both your Redirect Automatically and Let Them Navigate actions. 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:

<a href="http://appcues.com/user/guru">http://appcues.com/user/guru</a>

Could be achieved using the firstName user property: 

<a href="http://appcues.com/user/{{firstName}}">http://appcues.com/user/{{firstName}}</a>

Back to top


Flow Pattern Overview

The Flow Builder will load on the page designated. Once ready, select   Create New, and select the pattern you'd like to use for the first step in your flow. Each flow can span multiple pages within a single domain, contain as many steps as you like, and utilize all patterns. You may want to start out with some text, an image or even a video. 

When should I use each patterns?

These patterns are great when you want to draw attention to certain elements of the page. We recommend using them in different ways:

What page elements will these patterns work with?

Hotspots and tooltips can be placed on any elements that are immediately visible when the page loads. Buttons, images and any text that is immediately visible to the user is fair game.

This also means that elements that require additional user action aren't supported by these patterns just yet. Examples include modals, dropdown menus and other elements that first require the user to take action before the element will appear.

Back to top

Using Multiple Patterns

Oftentimes you will want to use more than one pattern together for the best impact. For instance, if you want to encourage users to use a new or exisiting feature: Show users a slideout the next time they log in that emphasizes how the feature helps them out, then redirect them to that feature page with tooltips or hotspots to educate them on how to successfully use the feature.

You can add more steps to your pattern by clicking Add Step at the bottom of your Appcues editor. 

There may a case where you would like to add steps of a different pattern, though, such as in these cases:

  • A welcome modal that connects with onboarding tooltips
  • A feature announcing slideout with guiding tooltips/hotspots
  • A tooltip tutorial followed by a slideout or modal with a feedback Typeform

Back to top


Modals

Modals have enough screen real estate to build user motivation and orient new users about the value proposition of your product and what they are there to accomplish. Modals can be multiple steps and you can include images, videos, text, and more.

Above is a customized modal in its standard pattern. Modals are also available as sidebars or full-screen takeovers. 

Creating Modals
  1. Open the Appcues editor; click Create and select Modal
Editing Modals

Step-level: You can make changes to individual steps within a flow that will not affect other steps.

Changing button text

To change the text of the buttons in your modals (that your end-users will see), simply click on the button and start editing the text 

Skippable

Flows can be skippable or required for you end users. Skippable modals include a X button in the top-right corner of the modal to let your users opt out. If you uncheck the Skippable box, the X button will be removed and users will have to click through your entire flow before it closes.

Theme

You can apply any of the themes you create at your Styles page to your flow. Select a theme from the Theme dropdown and it will automatically apply its styling to every step in your flow.

Back to top


Slideouts

Slideouts are a great way to push notifications to more experienced users. They're built similarly to modals but allow for greater customization: you can select where on your page they appear and whether they come with a backdrop or not.

Below is an example of a bottom-left slideout with the backdrop on:

Creating Slideouts

In the example above, the Projectcu.es team has targeted a slideout to accounts with just one user to encourage them to add team members.

To create a slideout:

  1. Open the Flow Builder; click Create New and select Start From Scratch.  Then select Slideout.
  2. The first step of your flow will automatically appear - click the + icon to start adding media: you can add text, images, emojis, videos, forms, and more.
    1. To add custom HTML or to embed iframed content, select Advanced and open the HTML editor brackets </> icon to insert the snippet
  3. To add another step in your flow, click Add Step > Add Slideout from the editor bar
  4. Once you've created all your steps, set your targeting rules at the Target & Publish page.

Editing Slideouts

You can make changes to individual steps in your slideout flow that will not affect the entire flow.

Changing button text

To change the text of the buttons in your slideouts (that your end-users will see), simply click on the button and start editing the text.

Group-level Options

There are a couple of options you have available to edit your entire slideout flow within the settings of the flow builder.
Backdrop

If you'd like to draw even more attention to your slideouts, you can turn on the Backdrop setting. A backdrop will dim out other parts of your site while a user goes through you slideout flow.

Position

Slideouts can appear in one of 9 areas on your page. Select Position to set this flow to show at the upper or bottom corners, sides, or middle of your page.

Skippable

Flows can be skippable or required for you end users. Skippable slideouts include an X button in the top-right corner of the modal to let your users opt out. 

If you uncheck the Skippable box, the X button will be removed and users will have to click through your entire flow before it closes.

Theme

You can apply any of the themes you create at your Styles page to your flow. Select a theme from the Theme dropdown and it will automatically apply its styling to every step in your flow. Learn more about creating themes here.

More Advanced Guides

For even more advanced guides on slideouts, see:

Back to top


Hotspots

Hotspots appear on your page either with a circle or question mark beacon. To expand and read a hotspot, a user must click on it.  
Hotspots are a great pattern for existing customers or users who are already familiar with your interface. 

Above is a hotspot with a question-mark beacon

Creating Hotspots

To create a hotspot:
  1. Open the Appcues editor; click Create and select Hotspots
  2. Your cursor is now in editing state to place your first hotspot: as you move your cursor around the page, you'll notice it highlights elements you hover over with a blue outline
  3. Place your first hotspot on the element you're pointing to: get as specific as you can, though you can always re-position this later
  4. To add another hotspot, click Add > Hotspot in the bottom of your editor bar
  5. Continue adding hotspots until your flow is complete: once it looks good, click Target & Publish to edit your targeting rules before publishing your flow

Editing Hotspots

You can edit hotspots per-step, or make adjustments that affect your entire hotspot flow. To access your individual hotspot settings, click the cog icon next to the number of the step you'd like to work on.

Repositioning hotspots 

To reposition hotspots, you can click the hotspot in the editor and it will unanchor itself and allow you to position it where you'd like. You can also go to the settings and click on " Placement" and then click "Place Hotspot".

If you notice the selector in your step settings is too general (or your hotspot throws an error/does not show up when published), you can then fine-tune the position of the hotspot by going to the settings of the tooltip and click on "Placement". You can then fine-tune numbers from the left or top of the page as well as the Z-index.

Tooltip arrow position

This controls where your text box will appear from in relation to the hotspot beacon. By default, your arrow is set for the optimal position (based on the browser size and where the element sits on the page), but you can select for your text to appear from other corners, the top, or the bottom of your beacon.

To access settings that will impact your entire hotspot group, click on the cogwheel icon while selecting the hotspot group. 

Beacon

Beacons come in two styles: question-mark icons or circles.  

Tip: You can create a theme with a pulsing beacon under your Themes page

Skippable

Hotspot flows can be skippable or required for your end users. Skippable hotspots include an option for users to Hide these tips

If you uncheck the Skippable box, the Hide these tips option will be removed and users will have to click through your entire flow before your hotspot beacons disappear.

Theme

You can apply any of the themes you create at your Styles page to your flow. Select a theme from the  Theme dropdown and it will automatically apply its styling to every step in your flow.

Back to top


Tooltips

Tooltips are the best pattern to guide new trialers and users who are unfamiliar with your application. Built just like hotspots, tooltips will automatically launch upon page load (based on your targeting preferences). If you create more than one tooltip in the same flow, they will link to each other in a sequential order. Like hotspots, you can set tooltips to be skippable or required by your users.

Tooltips can have no beacon, a circle beacon, or a question mark beacon. You can also get them to have an backdrop to better focus your users' attention, or leave them without a backdrop to allow users to interact with your site while going through your tooltip flow. Here's what a default tooltip looks like:

Use tooltips to explain sequences and walkthroughs, or  link them with a welcome modal to create an onboarding flow

Creating Tooltips

To create a tooltip:
  1. Open the Appcues editor; click Create and select Tooltips
  2. Your cursor is now in editing state to place your first tooltip: as you move your cursor around the page, you'll notice it highlights elements you hover over with a blue outline
  3. Place your first tooltips on the element you're pointing to: get as specific as you can, though you can always re-position this later
  4. To add other tooltips, click Add > Tooltip in the bottom of your editor bar
  5. Continue adding tooltips until your flow is complete: once it looks good, click Target & Publish to edit your targeting rules before publishing your flow

Editing Tooltips

You can edit tooltips per-step, or make adjustments that affect your entire tooltip flow.

To access the step level tooltip settings

Click the step of the flow you'd like to edit, or if the settings are already open select the of the step you'd like to work on. The settings bar will appear on the left side of the editing screen. 

Repositioning tooltips 

To reposition tooltips select Reposition at the top right corner of the step settings. Your cursor will again start outlining the elements you can place your tooltip on.

If you notice the selector in your step settings is too general (or your tooltip throws an error/does not show up when published), you can enter more specific selector in the Selector field. Adjust where you'd like the beacon to appear accordingly by changing the numbers under Distance from left/top edge.


Tooltip arrow position

This controls where your text box will appear from in relation to the tooltip element. By default, your arrow is set for the optimal position (based on the browser size and where the element sits on the page), but you can select for your text to appear from other corners, the top, or the bottom of your chosen element.

Progress this tooltip when...

Tooltips by default include a Next or Close button to guide users all the way through your entire tooltip flow. There may be cases where you'd like your tour to continue or end as your user clicks an action element on your page instead. To remove the Next or Close button for an individual tooltip, opt to progress on click of "Element" (hides the Next button)".

   

To access settings that will change a group of tooltips, click on a step in the tooltip group. The settings will appear on the left side of the editing screen.

Theme

You can apply any of the themes you create at your Styles page to your flow. Select a theme from the  Theme dropdown and it will automatically apply its styling to every step in your flow.

Beacon

Tooltips by default have no beacons, but if you'd like to direct even more attention to the elements you're describing you have two beacon styles to choose from: question-mark icons or circles.  

ProTip: You can create a theme with a pulsing beacon under your Styles page

   

Backdrop

If you'd like to draw even more attention and focus on the elements your tooltips are built on, choose one of the Backdrop options. 

Note: We are not able to provide the backdrop feature to IE 10/11 or Safari users due to browser restrictions

Focus 

Places a radial focus on your element but allow your users to still click through on other elements on the page. 

Highlight 

clearly outlines the element your tooltip is attached to and requires your user to continue or complete the tooltips before interacting with your page.


Skippable

Flows can be skippable or required for you end users.  

Skippable tooltips include an option for users to Hide these tips or a close X button. If you uncheck the Skippable box, these options will be removed and users will have to click through your entire flow to complete it.

As a guiding pattern, tooltips generally have a 'Close' or 'Next' button that allows users to move at their own pace as they learn more about your platform. 

Occasionally you'll need your users to complete an action outside of clicking a 'Next' button to progress through your tutorial. 

For example, you may have a tooltip pointing to a button, link, or tab in your platform that you'd like the user to click.

To reduce friction and avoid redundancy by asking users to select a 'Next' button  and click on a non-Appcues element in your platform, our Action-Driven tooltips will allow your users to progress through (or end) a tour by clicking only the element the tooltip points to, rather than an Appcues 'Next' button.

Here's an Action-Driven tooltip:

Create an Action-Driven Tooltip

  1. Create a new tooltip flow or open one you've already created in your editor
  2. Select the element you want your action-driven tooltip to interact with - in the below example, users should click the Add Project button to close this tooltip. 

    Pro Tip: make sure the element you are selecting is the whole entire button and notjust the text inside the element
  3. Select the cog icon next to the tooltip to display its settings. 
  4. Scroll a bit down to the 'Design' tab and find the 'Progress this tooltip when...' section, then select 'Element'
  5. Your changes will auto save and you're good to go!

Back to top


Building on Dynamic Elements

Many pages have elements that aren't immediately visible upon page load. We call these dynamic elements. Drop-down menus and pop-out modals are common dynamic elements that require a user's action (clicking a button, tab, or menu) in order to be exposed. 


Hotspots On Dynamic Elements

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 On Dynamic Elements

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

Slideouts On Dynamic Elements 

If you'd like a slide out to be tied to a dynamic element, you'll need to combine your slide out with a tooltip or hotspot. 


Placing Hotspots & Tooltips On Dynamic Elements

To place hotspots and tooltips on dynamic elements:

  1. 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
  2. While in 'Navigate' mode, open up the dynamic element and then select 'Design' or 'Continue Building' (at the bottom of the screen).
    1. If you've changed URLs, you will be prompted to add a 'page change'. If not needed, select 'Cancel' to continue building your flow. 
  3. Place the tooltip or hotspot on the now-exposed element.

Notes:

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

Edit steps in a flow

Reordering Steps

To reorder your steps : drag and drop the step into place.

Deleting Steps

To delete a step:
Click on the step you'd like to delete, click the cog icon to expand the settings menu. From there, click the trash icon and then red delete button for confirmation.

Switch Edit Page

You can change the page you build or view your flow on by clicking the Switch Preview Page button. Once this button is clicked, you'll be able to navigate through your app normally.  

When you've found the page you'd like to work on, select  Display flow on this page from the bottom bar on your screen.

Back to top


Adding Media

Adding rich media, like images, GIFs, and videos, to your flows is easy with Appcues. Here's an example:

Adding Media to Modals and Slideouts:

In a modal or slideout, add media by clicking the green circle icon containing the '+' sign to open the menu. From this menu, you can add emojis, hosted video scripts, and images into your Appcues flows. 

If you need to add HTML, hover over the Advanced section to select HTML. Here's an example of what that looks like in a modal or slideout:

Adding Media to Tooltips and Hotspots:

The menu for Tooltips and Hotspots is also accessed by clicking the green circle icon.

For images or gifs, select "Image" in the media section, and you can drag and drop the file in. For videos, paste the video embed code into the HTML section. 

Keep in mind: For security reasons, Appcues will block scripts that are placed inside our content.  

Adding Full-Screen Videos (YouTube)

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>

More about GIFs

GIFs are a great visual to include in an Appcues flow. They are effective for building motivation and explaining core parts of your UI. However, they can also be very large files and take a long time to load. We recommend keeping them below 2MBs. 

Back to top


Adding Custom Buttons

You can add your own customizable buttons in your Modals and Slideouts. 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 modify the alignment, margins, styling and add a handful of button actions. Read on for more details on each of the customizable settings.

ProTip: If you need to get a button in a hotspot, try using an image of a button instead. It won't have all of the same functionality as a button component, but hopefully it can be a useful alternative until that feature is made available.

Alignment

Your button will occupy a single row in your step. On this row, you can align the button Left, Center, or Right.

Margins

You can add space around your button with the Margin settings. By default, there will be a 5px margin to the top and bottom of your buttons. You can set negative margins for interesting effects!

  

Button Styling Options

This setting allows you to adjust the roundness of your buttons, change the font size, add padding, and change the width of your buttons. All values are measured in pixels. The above values are set by default but feel free to modify to your liking.

Button Actions

The last, but arguably the most versatile option in the button settings bar (thus far) are the 'Button Action' settings. Here, you can assign various actions to your buttons to happen on click. Let's dive into each available action.

    

Go to URL

This option will direct your guest to another page, either within your application or outside of it. You can trigger the page to open a new tab, and/or ensure that the flow is marked as complete once they've clicked the button! This is best used at the end of a flow to ensure that the flow closes and is marked in your analytics as completed.

ProTip: The URL section supports URL paths in the link field. For example. Say your guest is on appcues.com/dashboard and we want them to reach appcues.com/dashboard/flows. Entering /flows in the URL section will append it to the current URL path. 

Note: Please enter the full URL including the 'https://' to ensure that they are redirected appropriately

Go to Custom Step

Assigning a custom step number to your button will take your guest to a specific step within your Modal or Slideout group. This is especially handy for flows that require a bit of 'branching logic'.  You can go here to learn more about branching logic.

Enter the step number you'd like your guest to be taken to when they interact with this button. You'll notice the total number of steps in the modal or slideout group. You'll only be able to travel within the step group at this time, but if you'd like more functionality, please let us know here!

Trigger Appcues Flow

This action will launch the specified Appcues flow, allowing you to provide the user options for what to do next. You can get the ID from the  'Share' link, accessible on the Flow Settings page. 

  • Keep in mind that using this option will not redirect the user to the appropriate page if they aren't already on it. If you have a flow published to another page that you'd like the user to trigger with the button, use the 'go to URL' option above instead.  
  • This will trigger a flow only from the beginning. Utilizing a stepchild ID will not work with this feature.

 

Track Event

You can now create and track an event within Appcues and use it for segments and targeting! Selecting "Track Event" will allow you to customize an event based on clicking your custom button. This event will then show up under the "Events" section of targeting.

  • Note that these events will only be viewable to Appcues and cannot be pushed to any integrations or your own user properties.

Update User Properties

Appcues allows for custom buttons to update user properties you're passing in your installation! Simply check off the box in the custom button and choose the property you want! This will update the user property when the user clicks the button.

Other Options

  • Skip to Next Step Group: This action will skip the current Modal or Slideout group, and trigger the next step group in the flow. If there are no step groups to follow, then the flow will be skipped and completed.
  • Go To Next/Previous Step: This option will navigate your guest to the next or previous step within the current Modal or Slideout group
  • Dismiss Entire Flow: Users can exit out of a flow with this button action. Think of it like a 'skip' action. That means that the flow will not be considered complete when a button with this action is clicked. 
  • Skip to Next Step Group: This action will dismiss the current Modal or Slideout group, and trigger the subsequent step group in the flow. If there are no step groups to follow, then the flow will be dismissed and completed.


Using CSS To Style Buttons

You can add your own customizable buttons in your Modals and Slideouts. By default, these buttons will adopt the styles set in the theme. To change the button background color and button font color, you can edit your Theme's colors or use this article to create custom buttons with different styling as you see below!

15445dc95cf276cfd110464caa720f0a.png

To have two different button colors on the same modal (pictured above):
  1. Click the add "+" button on the right and choose Button to add the custom buttons within the same row. Here is our help doc with more info about creating custom buttons.  
  2. After the buttons have been configured, on the same line as the recently added buttons, click the + button, go to Advanced and choose HTML 
  3. Enter the HTML code to change the color and save the changes.

    6bdf26d0e8ce7233319b5956d011d876.png

Here's the needed CSS in plaintext... 

<style>   .zone-container:nth-of-type(1) a.appcues-button {     background-color: gray !important;   }   .zone-container:nth-of-type(2) a.appcues-button {     background-color: blue !important;   } </style> 	

Please note: you can use "blue" or "0000FF" when changing the colors in the code above.

Back to top


Saving Steps as Templates

You can save and re-use the content you build in Appcues by saving those steps as templates. This tutorial will walk you through the process of doing so. 

  1. Hover on the current step and you will see a 'folder' icon that will have a save templates option
  2. Name your new template. Give your template a useful name. We will provide an image of the template for future reference.
  3. Add a New Step. Once your template is saved, click 'Add Step' to launch the step creator menu. View your saved templates in the 'Saved' tab. Hover to preview and choose!

Rename, Replace, or Delete your templates

You can rename or delete templates at any time. We check to make sure that all your templates have unique names. If we notice that a saved template has the same name, you'll be prompted to update the name or replace the other template.

Back to top


Preview the flow

Before you've installed Appcues, you can create and preview content on your site using the Flow. It's possible to build and preview individual flows without installing because the Editor works as an interactive overlay on your site, but because of this, there are also a few limitations. 

What Previewing can do:

  • Preview what a single flow will look like on your site
  • Allow you to interact with your page to:
    • Find and view hotspots/tooltips that are built on dynamic elements
    • Preview action-driven tooltips
    • Interact with form fields or embedded content

What Previewing can't do:
  • Show content live on your site. The editor will always need to be open to view content when you're not installed
  • Show flows that are linked together. We can only show you one flow at a time, but not any flows that are triggered from buttons, or by completion.
  • Fill in user properties for content personalization (read more about personalization through user properties).

How to Preview:

  1. Open your flow in the Appcues Flow Builder.
  2. Find and select the eye icon in the bottom right of the builder, and choose to view either the current step group or the entire flow.
  3. Once your review is complete, select Return to Builder to continue building, or Restart Preview to run through the flow again from the start.

You can preview any flow created in your account from the Chrome builder. If you'd like to choose another flow to preview select the flow name in the lower right. Once a different flow is chosen, you'll be redirected to the Build URL (set in the flow settings page for that flow).

     

But what about my linked flows? 

To preview flows that are linked you will have to publish them to either your staging or production site. Don't worry, you can still view them before your users do! Learn more below.

Back to top


Testing Flows

Before you publish flows to your users, you may want to share them with your team or make sure your targeting is correct.

  • Test Mode: use test mode to test that the flow works as expected. You can share with colleagues that do not have an Appcues account. 
  • Internal Testing: test whether User Properties and Events are working correctly.

If you're not yet familiar, see overviews on User Properties and Events.

Test Mode

In order to test a flow, simply click the yellow "Test" button in the header of the flow's page. Appcues "test mode" allows you to quickly and easily test flows live on your site, just how they'll appear to end users. 

This will open a modal with a link to your test. You can share this link with your teammates, or use it yourself by clicking the "Open Test in New Tab" button. 

While you're testing the flow, you'll see a yellow banner at the bottom of your site. This allows you to control the test by restarting the flow, or simply ending your test session.

To test the flow again, you click the "Restart flow" in the Appcues test mode banner. 

To end your test session, click "End Test" from the Appcues test mode banner. 

Note: When you're testing a flow, audience targeting and frequency targeting are both ignored. This will allow you to test the flow as many times as you'd like and no matter what credentials you used to sign in to your product. 

Internal Testing

To test this way you'll need to be able to create new "fake"/"test" users and manipulate their User Properties. 

  1. Go to flow settings (pictured above)
  2. Set up targeting
    Set up your targeting on the flow's settings page exactly like you expect to target when you publish your flow. 
  3. Add your test user(s) to Audience
    This is how we make sure your general users don't see the flow while you're testing. In the Audience section, add a property targeting criteria that only your test user(s) will have. 
  4. Publish
    Since the flow will only show to users with those specific emails you can publish and see whether your targeting is working with those users. 
  5. Troubleshoot
    If your test users aren't getting the flow as you would expect, open the Debugger and check out the Flow Diagnostics / Eligibility for your user.

Here's an example using specific email addresses the users will have:

  • You could also target with "Email *contains* @yourcompanynamehere.com", among other options. 
  • Ensure you're using the "All" setting so each criteria is connected with an "AND".

Tip: creating a Segment of "Internal Test Users" can save your testers for use across multiple flows over time. See the Segments Overview for more on creating Segments. 


Publishing Flows

Once you've built, previewed, and targeted your flow (and maybe used test mode for good measure), you're ready to publish. 

If you have the Appcues script installed on your website, it's as simple as hitting the green  Publish button at the top right corner of the flow's settings, and you're live! 

Afterward, you can continue making changes to your flow content and settings, and use the  Push Changes button to publish the updates.

Publishing to Dynamic URLs

Sometimes URLs within your application can contain dynamic variables that are randomly generated or related to a specific user or account. Dynamic URLs tend to have one base structure but include a string of letters, numbers, and occasionally characters that change frequently. 

For example:

http://yourapp.com/dashboard/23944-3 and http://yourapp.com/dashboard/9543-55

Both URLs above are dynamic URLs. They look identical except for a unique string of numbers at the end of the address based on who is logged into your application. 

  

To publish a flow on a dynamic URL:

  1. Create your flow at one version of your dynamic URL (ex: http://yourapp.com/dashboard/23944-3)
    Just note, these URLs must appear the same for your end users: if certain page elements are missing from some versions of this URL, your flow may not appear.
  2. In the Settings step of your flow, target and publish the flow to URLs that contain stable keywords:
In the *rare* case that your URL does not contain stable keywords publish the flow to all versions of this URL by using a regular expression (regex):

While using “contains” is good for basic keyword matching, you may require more advanced targeting. For instance, what if you wanted to only target /dashboard/2392/view but not /dashboard/2392/? Matching URLs that contain /dashboard would result in too many matches.

When this is the case, we can use Regular Expression matching. Regular Expressions (or "regex") are a simple way of representing strings in a URL by patterns in its characters. 

   

Common Regex Patterns

Here is a little cheat sheet on a few common regex patterns

The most common regex pattern you will probably want is simply: 

.+

The "." is the wildcard match, and the "+" means "match the previous item one or more times. Thus, ".+" means "match one or more of any character." So, the following pattern would work to match anything (say, a user's individual dashboard page) in a url:

/users/.+/dashboard

Here are some other common regular expressions that come in handy when using regex to target specific pages within Appcues: 

•  Any number: [0-9]+
•  Either of two values: (Option1|Option2)
•  Any word: [a-z]+

For additional help with Regex, check out  this cheat sheet and this Regex tester

Back to top


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:

  1. 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.
  2. Under Actions, select Trigger Appcues Content
  3. A drop-down menu will appear: select the name of the flow you would like to appear next
    1. 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.
    2. If the triggered flow is located at another domain, be sure to enter the full URL, including the http(s)://
    3. 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.
  4. Repeat steps 1-3 to link more flows and patterns
  5. 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.

Keep in mind: You will not be able to preview the full sequence of linked flows through our Chrome extension. 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. 

Back to top


Re-launching Flows

You might want to offer your users a chance to re-launch a tutorial or recall an announcement you've published to show just once.

Appcues offers three ways to re-launch flows based on flow patterns and use cases. The first way is entirely non-technical and the latter two will require access to your platform's code. You can relaunch flows by:

Use a flow's permalink to relaunch a flow

Appcues Permalinks will allow guests to re-launch flows with one click. If your platform remembers logged-in statuses, you can share permalinks in email or through chat to let your users retrieve flows they may have initially skipped out on. Every flow has its own permalink. 

Learn how to create your flow's permalink here.

Embed a 'Show Hints' button onto your page 

Every flow comes with an embeddable button code that will re-launch that specific flow when clicked. Clicking the 'Show hints' button will override any targeting rules you've set up, so as long as the elements you've attached your hotspots or tooltips to are visible on the page, the 'Show hints' button will display them all. 

To find your flow's embeddable button code:
  1. Publish your flow 
  2. Select the 'Permalink' button from your flow's settings 
  3. Copy the code below the 'Show hints' button [Note: you can change the text of this button by editing it directly in the code] 

Install our in-app widget 

This will allow your users to recall feature announcements, offers, or updates. Our in-app widget will store slideouts and modals. We use our widget in our Appcues dashboard and have it set to look like an inbox icon, but you can use any image file that makes the most sense for your platform, like a question mark or alarm icon. 

Learn more about installing and using our in-app widget here.

Back to top


Submit feedback on this doc ➤