1. Pendo Help Center
  2. Guides
  3. Get started with guides

Get started with Visual Design Studio

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.

This article details the Visual Design Studio’s functionality and how you use it to create your guides.

To start your guide creation process, select Guides in the left-hand navigation menu.

Requirements

To use the Visual Design Studio, Pendo users need either one of these permissions:

  • Pendo Administrator Permissions
  • Pendo User Permissions
    • Manage Published Guides
    • Create Guides & Templates from Scratch
    • Create Guides from templates

Themes and layouts

Themes and layouts help you manage your guide branding by giving Pendo Administrators the ability to set up specific themes and layouts for guide creators to use.

Themes

Themes are used to style your default Themes for your guide containers, typography, and buttons. To edit your default themes, choose the dropdown option in the upper right-hand corner of the guides section and select Edit Default Theme. You are prompted to open the Designer, where you see options to edit your default theme:

themes.png

Layouts

Layouts are guide templates that you can save to reuse the same structure in a guide step as needed. Once you save a guide layout, you'll see it in your options. Here is an example of what options you might see:

Screen_Shot_2020-03-26_at_11.21.58_AM.png

 

Note: Your view might be different depending on what your Pendo subscription administrators want to provide users.

Learn more in the Layouts article

 

Guide designer

When you first open the Visual Design Studio, the guide designer launches on top of your application. It includes multiple tools, as well as a guide preview. The designer is accessible to any Pendo user, with the exception of those who have Read Only permissions.

guide_designer.png

 

Action bar

The action bar appears at the top of the guide designer. It contains the following:

  • Title of your guide (1)
  • View Steps (2) - Step Tray Access 
  • Save Layout (3) - Save Guide as new layout or update an existing layout
  • Activation (4) - Change Guide activation
  • Navigation mode (5) - Navigate to another page or open a modal
  • Preview (6) - Preview your Guide
  • Exit (7) - Exit designer
  • Save current work (8) - Save and exit designer
  • Any applicable alerts (9) - Errors are yellow when present
  • Move (10) - Move the navigation bar to top/ bottom of the designer, if you have elements in your application behind the Action Bar at the top of your page
  • Guide Step Preview (11)

Step tray

Select the arrow at the center of the action bar to access the step tray. The step tray shows options to customize your activation method and add additional steps to your Guide.

step-tray.png
 

Activation

Activation refers to how your guide appears to users. You can access your guide Activation options from the button on the action bar, or by opening the step tray and selecting the Activation box on the left-hand side:

Activation_newactionbar.png

There are three Activation options to choose from:

  • Automatic. Guide appears once automatically until dismissed or advanced.
  • Badge. Guide appears after a visitor clicks or hovers over a badge icon.
  • Target Element. Guide appears after a visitor clicks on a targeted element.

In addition, a guide can simultaneously utilize different activation methods to achieve a desired behavior. For instance, you can set a Guide to appear both automatically and with a badge.

Learn more in the Guide Activation Options article.

 

Guide container

The Guide Container refers to the blue border that appears when you hover over the edge of a guide. Select this to open the Edit Container menu, where you can change the style, location, and behavior of your guide.

hover-guide-container.gif

Edit Container menu

The Edit Container menu contains multiple options for styling your guide, editing its location, and controlling its behavior. The following is a breakdown of each element in this menu, which you can make any required changes to:

Styling

Note: If you are editing your guide using a theme, change the theme to Custom to see these options.

  • Theme
  • Step Name
  • Background color
  • Dimensions (Guide Width in px)
  • Padding (px)
  • Border - Color, Width (px) & Radius (for rounded corners)
  • Drop Shadow - Color and size (shadow around guide container)
  • Caret - (if applicable) Width (px) & Height (px) (pointer on tooltips)
  • Close Button (allows users to X out of a guide)
  • Backdrop - Color and Opacity (if using a tooltip guide, be sure to check "Show target element above backdrop")
  • Z-index (only edit this if your guide is being hidden by something such as a modal with a higher z-index. Higher z-index means it is be the most "in-front" element.) 

 

 Location

  • Position on Page
  • Element Location (if applicable)
  • Page Location. Sitewide or Only on this page
  • Settings - Filter Dynamic Elements on Target. Toggle on this setting to filter out any dynamic elements on a feature element. For example, in some elements, there are user-specific strings, which constantly change as each user navigates through the app. Filtering out these strings ensures better performance when tagging a feature, or element, and gives a more accurate tag. It also ensures there is no duplication of data.
  • Anchor to Element. You have two options: anchor to a surface element in the UI, or attach to an existing Tagged Feature.
    anchor_to_element_new.png
    • Target Element. Anchor the guide or badge to a UI element. The system chooses an element on your screen, as indicated by a red border around the element. This selection offers additional options for defining the anchor:
      • Suggested Match. This is the automatic rule created by Pendo. Sometimes, this doesn’t ideally capture what you need it to, isn’t a unique match on the page, also exists on other Pages, or isn’t static, which is why we’ve created the following additional options for creating rules.
      • Parent Element. This is useful when the red bounding box used to highlight and select an area in your application doesn’t cover the entire clickable area. This option selects the next largest container (the entire button) for the originally selected element (text within the button).
      • Custom CSS. If you’re comfortable with using Inspect in Google Chrome to investigate the HTML and CSS of your application, this option allows you to add a custom rule based on the elements and attributes available in the area you selected.

        anchor_to_element.png
    • Select Existing Feature. Choose this to position the guide or badge on an existing Feature. Features are named objects used for analytics and persist even if you make changes to the Pages they're on. This means that guides and badges that are positioned based on Features are more stable than guides and badges that are anchored to surface elements but take more time to set up. You can't tag Features while in Selection Mode. For more information on Features, see Tagging and viewing Features.

Behavior

  • Close Button
  • Add Action
    Behavior_tab_.png
 

Building blocks

A guide is comprised of building blocks. Using the building blocks, you can add:

  • Text
  • Button
  • Horizontal Line
  • Multi Button
  • Image
  • YouTube Video
  • Open Text Poll
  • Yes/No Poll
  • Number Scale Poll
  • Multi Choice Poll
  • Custom Code Block

You can access the building blocks menu by placing your cursor inside a guide and selecting the blue horizontal line that appears:

hover-add-bb-blank.gif

For more information, see Building blocks. 

 

Related articles

Use these related articles to create a guide in Visual Design Studio:

Was this article helpful?
5 out of 7 found this helpful

Articles in this section