Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form below and we will reply as soon as possible.

  • Appcues Certifications & Training
  • Contact Us
  • Home
  • User Experiences
  • Use Cases

Build Guide - Evaluator - Product Tour

Updated at November 28th, 2022

Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form with the details about the help content you'd like to see.

  • Installation & Developers
    Installing Appcues Installing Appcues Mobile API & Data Troubleshooting Extras
  • User Experiences
    Web Experiences Building Web Experiences Building Mobile Experiences Customization & Styling Targeting Studio Troubleshooting Use Cases FAQ
  • Mobile
    Installation & Overview Building Mobile Experiences Mobile Analytics Troubleshooting Mobile Use Cases
  • Account Management
    Subscription Users & Data
  • Analytics
    Experience and Event Analytics Data
  • Best Practices
    Use Cases Pro Tips PLG FAQ
  • Integrations
    Integration Documents Use Cases Resources
  • Post-mortem
    System Incidents
+ More

Table of Contents

Building the tooltips First, launch the Appcues Builder to create a new flow Create a tooltip step Creating a call to action Tooltip orientation Page changes Backdrop options Setting a Theme Targeting the correct users

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:

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Targeting by User Property
  • Studio: Diagnostics Tool
  • Styling Appcues with Custom CSS
  • Segments Overview
Appcues logo

Product

Why Appcues
How it works
Integrations
Security
Pricing
What's new

Use cases

User Onboarding Software
Feature Adoption Software
NPS & Surveys
Announcements
Insights
Mobile Adoption

Company

About
Careers
we're Hiring

Support

Developer Docs
Contact

Resources

The Appcues Blog
Product Adoption Academy
GoodUX
Case studies
Webinar Series
Made with Appcues
Appcues University

Follow us

Facebook iconTwitter icon greyLinkedin iconInstagram icon
© 2022 Appcues. All rights reserved.
SecurityTerms of ServicePrivacy Policy
Expand