Create a Guide

Overview

The purpose of this article is to help you quickly understand how to create a Guide in the Visual Design Studio. This includes highlighting new features, driving preferred behavior, and providing in-context support.

This video provides a quick overview:

Requirements

To use the Visual Design Studio, Pendo users will need one of the two following permissions:

• Pendo Administrator Permissions
• Pendo User Permissions with at least the
  • Create Guides from Layouts
  • Manage Published Guides
  • Create Guides & Layouts from Scratch

Create

To start your Guide creation process in the Visual Design Studio, choose “Guides” from the left-hand navigation menu, then choose “Create New Guide” or “Visual Design Studio” on the top right.

Choose a layout from your options. In this example, choose a Pendo provided layout called, “New Feature Announcement.”

Once you choose your layout, you will be asked to rename your Guide. Add your desired Guide name.

Click on “Manage in App” (1 or 2) to open the Visual Design Studio to edit your Guide and add the page URL you would like the Guide to appear on.

Once the designer loads, be sure to open the "Step Tray" (1) so you can see all your customization options and Guide steps. If you wish to target an element but the "Action Bar" (2) is covering it, move it to the bottom of the screen by clicking on the dual arrows button in the top right-hand corner of your screen.

You can make any initial edits to your Guide within the “Edit Container” box. Once you click “Apply,” you will be able to hover over the placeholder items within the Guide Preview and click to edit. If you need to add a new building block to your Guide, hover between items to see the blue line and add your desired building block.

Want to add a step in your Guide? Click on the "+ Add Step" option in the Step Tray so you can add a new step without having to start over.

Once you’re satisfied with your Guide (one or all Guide steps), hover over a Guide Container (the edge of the Guide) in a step to edit it’s settings:

The styling, Location and behavior options will display after you click the edge of Guide container for additional customization:

When you’re done, click apply.

Lastly, make sure you are using the Guide Activation method you want in the Action Bar:

You will have three options:

1. Automatic (1): Guide appears once automatically until dismissed or advanced.
2. Badge (2): Guide appears after a visitor clicks or hovers over a badge icon.
3. Target Element (3): Guide appears after a visitor clicks on a targeted element.

You can choose just one, or apply both Automatic + Badge or Automatic + Target Element. You cannot choose Badge + Target Element. For more information, see the Guide Activation Options article.

Once you are finished, save your changes using the top left-hand “Save” button and click “Exit” to leave the designer.

Test

To test your Guide, segment the Guide to yourself.

Locate the “Segment” tile in the Guide Details Page and click the “Edit” icon. Then, choose the dropdown to select “Custom Segment.” Here, you will add a segment rule so that “Visitor ID” equals yourself.

For example, if my Visitor ID is my email address, my rule would look like this:

Once you’re done, choose “Save Custom Segment” and then click “Save” within the Segment tile. Review your Guide details and update your Guide status to “Staging” (if you have a Staging setup) to preview your Guide in your Staging Environment. If not, update the status to “Public.” Since the Guide is segmented to just yourself, the Guide will only be visible to you.

Launch

If you’re satisfied with your Guide, navigate back to your Guide’s Detail Page to re-adjust the segment to the correct audience.

To publish your Guide, you have two options to choose from:

• Publish your Guide now by updating the Guide status to Public.

• Schedule when your Guide will go live (and, if needed, when it will no longer be active).

Related Articles

Learn more about creating a Guide in Visual Design Studio:

• Nomenclature
• Building Blocks
• Guide Activation Options