Guides

Pendo Help CenterGuidesGuide creation

Guide creation

Overview

Guides are created within the in-app guide designer. For an overview of the designer, click here.

Guide Types

Once your application is loaded in the guide designer, click "Add New Guide" in the bottom-left corner to create a guide. You will be presented with four guide types.

guideType.png

Tooltip

Tooltip guides anchor to a target element within your application. These are most commonly used for highlighting an element or feature.

Tip! Use a badge activated tooltip next time you want to call attention to a certain element or feature. It won’t interrupt the user experience.

Lightbox

A lightbox is a type of guide that is centered on the page. Lightboxes are commonly used for global announcements such as outages or major new feature releases.

Banner

Banner guides are a great way to provide information (new feature announcements) or solicit feedback (polls and surveys) from users without interrupting their workflow. Banners pop into view from the top or bottom of the window.

Walkthrough

A walkthrough is a grouping of the above guide types. They are often used for user onboarding. If you have a workflow that users are struggling with, you could build a walkthrough to help a user understand the process or accomplish the task.

Guide Status

Public

The guide is public to all visitors targeted in the guide’s segment and will appear in the designated "Location" on all environments with Pendo installed. Public guides will still appear on your designated staging servers.

Staged

The guide is only visible on your designated staging servers. Staging servers can be managed by admins of your subscription here. More information on staging here.

Draft and Disabled

The guide will not appear on any environment but can still be edited. While there is no functional difference between Draft and Disabled, these categories are useful for guide organization.

Delete

This will delete the guide and all of its data permanently.

Build a Walkthrough: Pt. 1

Click on Manage Guides In-App on the guides list page to navigate to the guide designer.

Note: If this is your first time in the guide designer, please read the in-app designer overview.

This example outlines building a walkthrough type guide. First, click "Add New Guide" in the bottom-left corner and select Walkthrough. Steps will later be added.

Name your guide

Click "Unnamed" to name the guide.

walkthroughOne.png

Segment

Who should see this guide? Use the default "Everyone" if you want the guide to display to all visitors, and "Only Me" if you are testing and only want to display the guide to yourself. You can also use a previously created segment from outside of the designer, or create a custom one on the fly.

segment.png

Activation

Guides can be activated in a few different ways. A guide can use these activation methods simultaneously. For example, you can set a guide to both Automatic and Launcher activation so that the guide automatically appears when a user visits the page, but is available in the Launcher if they want to reference it again. ​

  • Automatically: The guide will automatically display to the targeted segment upon page load or previous step completion (if building a Walkthrough).

  • Launcher: The guide will not display until the user goes into the Launcher and clicks on the guide. You can also provide search keywords if you have enabled search within the Launcher to make guides easier to find. Click here for information on enabling the Launcher.

activation.png

  • Badge: A small badge icon will display next to the anchor element in which the user can activate and view the guide. When you select badge as the activation method, additional styling and location options will appear below.

Click here for more information on guide activation methods.

badge-activation.png

Scheduling

If you want a guide to display for a specific period of time, you have the option of adding a "Guide Start Date" and "Guide Expires" date and time.

expiration.png

Note: If you select a start date for a guide, the guide status must be set to Scheduled in order for the guide to publish on the selected date.

Advanced

Here is where you have the option to specify which devices you would like the guide to display on, as well as specify if the guide is meant for onboarding. If you select Guide meant for onboarding, a link to activate the walkthrough will be placed in the Launcher (regardless of activation method).

advanced-walkthrough.png

Click "Save" in the top-left corner to confirm the overall walkthrough settings.

Build a Walkthrough: Pt. 2

Adding Steps

In this example, we will build a walkthrough composed of several different guide types. To start, click ‘Add a Step’ and select ‘Lightbox’ for your first step.

addStep.png

Content

You can select a template from the dropdown or customize the content/design of the lightbox as you see fit by modifying the HTML, CSS, and JavaScript.

content.png

Layout

These options allow you to adjust the size of the guide.

layout.png

Transition

How do you want the guide to progress to the next step? ​

  • Advance on Element Click: This option is only available for tooltip type guides. The guide will advance when the targeted element in your application is clicked.

  • Advance on Hover: This option is only available for tooltip type guides. The guide will advance when the targeted element in your application is hovered over.

  • Advance on Button/Link/Script: The guide is advanced when the user clicks a button, link, or a code script within the guide.

transition.png

Location

  • Only on this Page: This allows you to select a specific URL (or URLs) you want the guide to display on. The designer will automatically suggest Pages you have created in Pendo based on the URL that is loaded within the designer frame.

  • Sitewide: The guide will display anywhere in your application (where Pendo is installed).

location.png

Element Matching

(required for tooltips only) If you want this guide to only appear when a specific element in your application is shown, you can use the Target HTML feature. When that element is visible to the end-user, the guide will display. This targeted element is what a tooltip guide anchors to.

Polls

Are you looking to add a poll? This tab provides you the option to add them here. Click here to learn more about polls.

Was this article helpful? Yes, thanks! Not really

Awesome!

Thanks so much for your feedback!

Sorry this article wasn’t helpful.

Don’t hesitate to reach out to help@pendo.io with further questions.

© 2017 Pendo  |  Terms of Service  |  Privacy Policy

Have a question?

We would love to help.

x