How Can We Help?

Create a Guide

Last Updated:

Note: This article covers the new Visual Design Studio Guide experience, launched Feb. 18th, 2019. If you were a customer before this date and would like to use the Classic Designer, you can refer back to the previous version.

 

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.

create-guide-buttons.png

 

Note: For Pendo Admins, you will see an additional option in this area to “Manage Default Theme” that’s currently in beta.

 

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

 

Note: If you have multiple web applications setup in your Pendo account, you will be asked to choose which app you would like to Guide to display.

 

choose-a-layout.png

 

Note: Your available layouts may vary from these screenshots since your Pendo administrator can add/remove as desired. If this option is not available for you, choose one to your liking.

 

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

 

Tip: Because you will soon have multiple Guides, it’s best practice to have naming conventions for easier searches and color coordinated groups for easier identification. Take a look at naming best practices help article to learn more.

 

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.

manage-in-app.png

 

Tip: Hover over the Guide preview to see the “Manage in App” option to launch the designer.

 

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.

open-step-tray.png

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.

hover-edit-add-bb.gif

 

Tip: Periodically save your changes as you edit your Guide. This will help you save your progress as you go.

 

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.

add-a-step.png

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:

hover-guide-container.gif

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

edit-container-settings.png

When you’re done, click apply.

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

choose-activation-method.png

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.
activation-options.png

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:

segment-example.png

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.

publish.png

  • 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:

Related articles