A product tour is a great way to quickly orient new users to your product, and it should:

• Show users where key features reside
• Stay high level, avoid going into much of the "how" to use your product
• Be concise
• End with a call to action (even if it's simply to close the tour)

The following video walks through building a product tour, and a text walkthrough is below:

Direct link to video

Building the tooltips

Let's begin by creating the actual content.

First, launch the Appcues Builder to create a new flow

There are multiple ways to create a new flow, one is from the flows page in your dashboard by clicking the green Create a Flow button:

Create a tooltip step

Once in the Appcues Builder, start by selecting the tooltip option: 

Attach the tooltip to the first item in your tour

A colored box will follow and help you select the proper "element" to attach your tooltip. The cursor bullseye will be where the tooltip will appear within that element.  

Add content to the tooltip:

A short header (Header 3 size often works well), description of the item you're pointing to, and a step count will create a great-looking tooltip. Click into the button to change the "Next" text.

Pro Tip: In the tooltip settings you can change the skip type from text to an "x":

Duplicate the tooltip

Once you're set with the layout of your first tooltip we can simply clone it for the next tooltip, and so on. 

Duplicate tooltips until you're created your complete tour!

Creating a call to action

At the end of your tooltips, create a call to action. Add a modal, thank your user for taking the tour (if you'd like) and prompt them to take the next logical step. 

And, for example, your modal could look something like this: 

Following this are some common things you may want to do or run into while building. They will complete the entire look and feel of your tour.

Tooltip orientation

By default, Appcues will automatically choose a tooltip orientation (the triangle pointer) based on where the tooltip is located on the page.

In a case like the one below, the Appcues default is on the left, but a better-looking orientation is shown on the right. 

To accomplish this, open the tooltip Settings, go to the Design tab, change the Alignment to "Fixed", and select a fixed direction:

Pro Tip: Keep in mind various user's screen sizes and device types. A fixed tooltip near the edge of the page may end up cut off to some users. Orient your tooltips toward the middle of the page whenever possible.

Page changes

If your next tooltip will be on a different page, great! When you click to add the next step, select the option to navigate:

Appcues will add a page redirect for you and you'll be able to continue creating content on the new page.

Backdrop options

You can focus a user's attention in various ways depending on your need. In the Settings for a tooltip, find the Backdrop section and make any updates that make sense for your case. 

In the Design section of the Settings you can also add padding to the spotlight if you'd like a little extra white space:

Setting a Theme

See the Theme Overview doc if you haven't already set a theme for your Appcues content.

Targeting the correct users

A product tour will often follow another piece of Appcues content. You can create a " Welcome Flow" that ends with the product tour getting activated.

If not with a Welcome Flow, you can ask users if they'd like a tour with a slideout and activate the flow in the same manner as the Welcome flow:

In either of these cases, you'll have the Modal/Slideout trigger the Product Tour. Scroll to the bottom of the Target & Publish window in the Modal/Slideout flow, select to "Trigger Appcues content", and choose your product tour (this is also the flow's Settings page back in the web dashboard):

If you'd like the tour to show automatically, make sure it shows after other flows you want people to see first and only to users that would likely find it helpful, i.e., new users: