Understanding Visual Design Studio

 
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.

Pendo updated their Guide experience to the Visual Design Studio as of February 18th, 2019. This article is to help users understand the Visual Design Studio’s nomenclature.

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

Themes & Layouts

Themes and Layouts can help you manage your Guide branding by giving Pendo Administrators the ability to set up certain themes and layouts Guide creators can 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 will then be promoted to open the Designer, where you will 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 will 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 will launch over your application. It will include multiple tools, as well as a Guide preview. The Designer is accessible to any Pendo user, with the exception of those who are "Read Only."

Screen_Shot_2020-03-26_at_11.28.24_AM.png

 

Action Bar

The Action Bar will appear at the top of the Guide Designer. It contains the following:

  • Title of your guide
  • Publication status
  • Activation settings
  • Guide revision history
  • Navigation mode
  • Exit designer
  • Save current work
  • Save as Layout
  • Any applicable alerts
  • The ability to move the Action Bar

If you have elements in your application behind the Action Bar at the top of your page, choose the double-arrow icon in the top right-hand corner to move the Action Bar to the bottom of your screen:

Screen_Shot_2020-03-26_at_11.48.59_AM.png

 

Step Tray

The Step Tray can be accessed by clicking on the arrow at the center of the Action Bar. In the Step Tray, you will see 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’s Activation options from the button on the Action Bar, or by opening the Step Tray and clicking on the Activation box on the left-hand side:

Screen_Shot_2020-03-26_at_11.54.22_AM.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. Click on 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:

Styling

Note: If you are editing your guide using a Theme, you will have to change the Theme to "Custom" in order to see these options.

  • 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 will be the most "in-front" element.)
edit-container-styling.png

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.
    Editcontainer_settings.png

Behavior

  • Close “x” Button
  • Action
edit-container-behavior.png

Building Blocks

A Guide is comprised of Building Blocks. Each Building Block will offer you an option to 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
Screen_Shot_2020-03-26_at_12.12.05_PM.png

You can access the Building Blocks menu by placing your cursor inside a Guide and clicking on the blue horizontal line that appears. It will look like this:

hover-add-bb-blank.gif

Learn more in the Building Blocks article.

Frequently Asked Questions

What Pendo user permissions will I need to use the Visual Design Studio?

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

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

Take a look at the User Roles (Matrix View) to learn more about what each specific permission will allow you to do in Pendo.

Related Articles

Now that you’re accommodated with the new Terminology, take a look at how to create a Guide in Visual Design Studio: