Guides overview

Last updated: April 11, 2025 14:45

This article provides an overview of guides created with the Visual Design Studio in Pendo, including guide types, use cases, and best practices. If you're a Pendo for Employees customer, see the Adopt Studio documentation instead. For an overview of Adopt Studio, see Take a tour of Adopt Studio.

Guide types

There are two main guide types created with the Visual Design studio in Pendo:

Overlay guides. Overlay guides appear over the top of your application as a lightbox, banner, or tooltip. Overlay guides are good when you want to provide step-by-step walkthroughs, guidance that highlights specific elements in your application, and information that you want users to notice.
Embedded guides. Embedded guides are integrated directly into your application to provide contextual information that flows with the rest of a page in the application. Embedded guides are good when a badge-activated guide is too subtle for your message but a lightbox or banner is too obtrusive.

Note: Embedded guides are only available if you have Guides Pro included in your subscription.

The following table summarizes the main differences between guide types:

	Overlay guides	Embedded guides
Description	Guides that appear over the top of your application as a lightbox, tooltip, or banner.	Content that's integrated into your application.
Activation	Multiple activation options. For more information, see Overlay guide activation and Order and throttle your guides.	Automatic. The guide is embedded into the page and isn't affected by guide ordering or throttling.
Styling	All styling options outlined in Edit overlay guide step settings.	Because the guide is embedded, there are no options that are specific to overlay guides: auto-focus, backdrop, and caret.
Positioning	Multiple options for positioning your overlay guide. For instructions, see Create an overlay guide.	Embedded guides are always positioned inside the selected element. For instructions, see Create an embedded guide.
Data	Reports first-time views and repeat views.	Because embedded guides are always visible unless dismissed, embedded guides report on first-time views only.

Themes and layouts

Pendo admins can set up specific themes and layouts for guide creators to use, helping your organization to manage guide branding.

Themes allow you to set the format and style of the building blocks used in guides. This helps your guide creators efficiently create visually consistent guide content. For more information, see Manage guide styling and themes.
Layouts allow you to save templates consisting of specific building blocks for reuse. You can also organize layouts into categories to help guide creators select the most effective guide layout to achieve the purpose of the guide. For more information, see Use guide layouts.

Overlay guide use cases

Use overlay guides for situations like the following:

Guiding visitors to a specific element in your application with a badge.
Walking your visitors through a new process. You can transition visitors through a walkthrough using buttons or by pointing to specific UI elements.
Creating a tooltip that opens next to a specific feature or element.
Creating a warning or notification that appears as a banner at the top of your screen.
Delivering polls and surveys to visitors, such as product feedback polls or NPS.

There are several types of overlay guides that serve different purposes: lightbox, banner, and tooltip. These guides can be activated in various ways, depending on your use cases. You can:

Configure a guide to open automatically whenever a visitor opens a page in your application. This is most common for lightboxes and banners.
Configure a guide to launch whenever a visitor interacts with a badge or UI element. This is required for tooltip guides.
Add guides to a Resource Center to provide on-demand access to guides that visitors can open whenever it’s convenient for them.
Configure a guide to consume a specific button selection and launch a guide that asks the visitor to confirm the action.

Consider the goal of the guide before choosing an overlay guide step type:

Tooltips

Tooltips point to a location in your application’s UI. They can be activated automatically, with a badge, or by interacting with an element in your application. Use tooltips for helpful, but non-urgent, microcontent, such as:

A tip or actionable advice.
A description for an unlabeled icon.
A new feature announcement.
Information about a keyboard shortcut.
A link to more information.
A prompt to upgrade for access to grayed-out features.

Don’t use tooltips for:

Critical information that’s vital to task completion.
Obvious or redundant text, like repeating button copy.

Lightboxes

Lightboxes are pop-up windows that can be activated automatically, through a badge or target element on the page, or as a confirmation modal when a visitor selects a button or link in your application. Use lightboxes for mission-critical messages and engagement such as:

Announcing a high-impact new product or feature.
Confirming a potentially destructive action.
Onboarding users through setup and key features for getting started.
An event announcement that’s directly relevant to the segment.
A compelling offer that’s directly relevant to the segment.
An error message or alert that guides the visitor to a resolution or source of support.
Research and testing.
Sign-up forms for things like beta recruitment, a demo, or webinar attendance.

Not every release needs a pop-up window that interrupts the userflow. Avoid using lightboxes:

For non-urgent, low-impact, or non-actionable content.
That will appear during critical task flows.
On a login or landing page, unless this is to guide the user through onboarding steps.
For lower-level information that could be a better candidate for a tooltip.

Banners

Banners are notifications that appear across the length of the page at either the top or bottom of your application. Use banners for simple messages that are important or time-sensitive, or for straightforward messages that require user action, such as:

Outages and bug awareness.
Issues that have a high customer impact.
Issues that could cause an influx of Support tickets.
Time-sensitive offers, such as a seasonal sale.
A required action, such dealing with a payment issues.
A simple poll, such as NPS or CSAT.

Don’t use banners for:

Multi-step guides.
More detailed information.
Non-essential updates
Information that could be presented in a more integrated way, such as with an embedded guide. For more information, see Create an embedded guide.

Embedded guide use cases

Use embedded guides when you don’t want to distract or interrupt your visitors, or want to deliver an important message without covering critical parts of your navigation. Use embedded guides for situations such as the following:

Advertising a new feature, event, or webinar on your login page to drive engagement and increase inbound interest.
Delivering a routine message or legal notice, such as a service maintenance announcement, new terms of service, or updated privacy policies.
Embedding an upsell or cross-sell message next to features or functionality in your application that customers don’t yet have access to.
Providing extra information for visitors filling out a form.
Advertising new features and events on your login page.
Reminding visitors or actions they need to take by a specific date.
Testing new UI elements and gauging their impact before development.
Establishing a designated informational space in your application.

Best practices

Regardless of the type of guide you're creating, we recommend that you consider the following:

Goals. Define the type of behavior you want to elicit with a guide before creating one.
Audience. Define the segment that you want to deliver your guide to.
Testing. Set up a staging server to test guides in your development environment and exclude data associated with the guide. For more information, see Stage your guide.
Brevity. Use short, effective messaging, with a few steps as possible, enough to keep visitors informed and engaged.
Intuitiveness. Use intuitive interactive elements (buttons and links) and behave as the visitor would expect based on clear and concise text.
Relevance. Create guides that enhance the user experience rather than interrupt it. Personalize guides based on visitor behavior and preferences to increase the effectiveness of in-app guides, making them more relevant and engaging for your visitors.

Some best practices depend on the guide type that you choose.

Best practices for overlay guides

Have a clear goal in mind for your guide and consider the user experience, like avoiding interruptions where possible and reducing guide fatigue.

Timing. If you deliver a lot of guides, make use of guide ordering and throttling. For more information, see Order and throttle your guides.
Volume. Don't overload visitors with too many guides. Employ a guide strategy and guidelines to help Pendo users decide when a guide is appropriate. For automatically activated guides, use Ignore Guide Throttling Settings sparingly.
Repetition. If visitors aren’t taking action after seeing a guide, reconsider your guide design, messaging, or friction rather than spamming your visitors. Use Repeat Guide Display sparingly.
Planning. Consider the goal of the guide before choosing a guide container (tooltip, lightbox, and banner) and activation method (automatic, badge-activated, element-activated, and confirmation). For an overview of guide containers, see Use cases for overlay guides in this article. For information about activation methods, see Overlay guide activation methods.
Design. Ensure your guides are visually consistent with the overall design of your web or mobile applications. Use guide templates and global CSS styling to achieve a consistent design in your guides.

Best practices for embedded guides

Engineering. Work with your engineering team to:
- Set up a div or container with a unique ID to serve as the embed location. Although not required, this ensures that the rest of your page behaves as expected.
- Help ensure that the embedded guide within an element in your application is aligned well, which depends on the position and alignment of the element and its parent.
Design. Work with ‌a design or UI partner to ensure that the guide fits in well with the rest of your content. Check that themes and styles are consistent with the rest of your brand.
Dimensions. Keep the dimensions of the guide’s container in mind. Content might be affected by the CSS of the container in your application.
Location. Don’t replace an existing element with your embedded guide unless its a background image that isn’t essential to page.
Carousels. Instead of creating multiple guides embedded into the same location, consider creating embedded guides with multiple steps. Because there’s no content ordering with embedded guides, you can’t guarantee the order of multiple guides, but you can control the order of steps in an embedded guide.

The Visual Design Studio for creating guides

The Visual Design Studio allows you to create guides, as well as to tag Pages and Features. This section walks through the Visual Design Studio for creating guides. For information about using the Visual Design Studio to tag Pages and Features, see Tagging with the Visual Design Studio.

The Visual Design Studio opens on top of your application in a new tab when you edit a guide. It consists of:

A toolbar at the top of your page. You can move this to the bottom of your page as needed.
A preview of your guide step in your application that you can select to edit.
An edit window to the left of your preview that, depending on what you select, allows you to:
- Configure the activation of a guide in the Activation Settings edit window. For more information, see Set up overlay guide activation or Create an embedded guide.
- Edit the style, location, and behavior of a guide step in the Edit Container edit window. For more information, see Edit overlay guide step settings or Create an embedded guide.
- Add and edit content (building blocks) in your guide. For more information, see Add and edit guide content.

Toolbar

VDS toolbar.png

The name that you give your guide is visible in the top-left corner of the Visual Design Studio. You can edit the guide name from the Settings page of the guide in Pendo. For instructions, see Create an overlay guide or Create an embedded guide.

The top-right corner of the toolbar includes the following:

Save Layout. Allows you to save your guide as a new layout or to update an existing layout. For more information, see Use guide layouts.
Activation. Allows you to change the activation method for your overlay guide and configure other activation settings for both overlay and embedded guides. For more information, see Set up overlay guide activation or Create an embedded guide.
Navigation. Opens navigation mode to allow you to go to another page in your application or open a model.
Preview. Allows you to preview your guide. For more information, see Create an overlay guide or Create an embedded guide.
Exit. Allows you to leave the Visual Design Studio, taking you back to the Settings page of your guide. It's important to leave the Visual Design Studio by selecting Exit rather than closing the tab.
Save. Allows you to save your progress. Use the down arrow (v) next to the Save button to select Save and Exit instead.
Alerts. Makes you aware of any relevant notifications. Errors are yellow.
Move. Allows you to move the toolbar to the top or bottom of the page. This might be useful if you have elements in your application that are behind the toolbar or at the top of the page.

The steps tray sits below the main part of the toolbar. You can close (Hide Steps) and open (View Steps) the steps tray by selecting the tab in the middle of the toolbar.

Steps tray.gif

The steps tray includes:

An Activation card. This shows you what activation method you've chosen for the guide, followed by each step of the guide in order. To view and edit your activation settings, hover over the activation card and select the edit icon. For information about activation methods and options, see Set up overlay guide activation or Create an embedded guide.
Each step of your guide in chronological order. To change the order of steps in your guide, drag and drop a step to another location.

Guide editing

The guide preview shows one guide step at a time. When you select a guide step, an edit window appears to the left of the preview. You can move this window around the page as needed, for example, if the window covers a part of your screen that you need to see while creating the guide.

The edit window's name and contents differ based on what you're editing:

If you're adding a new building block to a guide step, the window is called Building Blocks
If you're editing a building block, the window is named after the building block that you're editing, for example, Edit Text.
If you're editing the settings for the guide step, the window is called Edit Container.

From the edit window, you can:

Add and edit content to a guide step. You can add a new building block to add content to the step, or select an existing building block to edit the existing content from the edit window. For more information, see Add and edit guide content.
Edit the step's settings. You can select the container for the guide step to open the Edit Container window, where you can manage the style, location, and behavior of the guide step. The container refers to the blue border that appears when you hover over the edge of a guide. For more information, see Edit overlay guide step settings.