Get started with Visual Design Studio for Guides

Last updated:

Note: This article covers the new Visual Design Studio Guide experience, launched February 18th, 2019. If you were a customer before this date and would like to use the Classic Designer, see In-app designer (Classic).

The Visual Design Studio allows you to create guides and to tag Features and Pages. This article details how to use the Visual Design Studio to create your guides. For information on how to use the Visual Design Studio for tagging Pages and Features, see Tagging with the Visual Design Studio.

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

Permissions

To create guides using the Visual Design Studio, Pendo users need either one of the following sets of permissions permissions:

  • Pendo Admin-level permissions. This is a subscription-level set of permissions that grants the user to perform all guide-related activities.
  • Pendo default app-level roles. Select all or some of the following depending on the level of access you want the user to have for guides:
    • The Guide Creator role includes the ability to create and edit guides from scratch and from layouts, and the ability to delete staged, draft, and disabled guides.
    • The Guide Publisher role includes the ability to to publish and schedule guides, and to delete staged, draft, and disabled guides.
    • The Guide Content Editor role includes the ability to create and edit guides from layouts, and the ability to delete staged, draft, and disabled guides.
  • Pendo custom app-level roles. Alternatively to the default app-level roles, you can create a custom user role and assign the following guide permissions to that role:
    • Create and edit guides from scratch
    • Create and edit guides from layouts
    • Publish guides

You can also optionally include the following permissions for a custom role. However, for creating guides, only the above three permissions are required.

  • Allow editing of public guides (delete and edit public guides)
  • Delete guides in draft, staged, and disabled

For more information about guide permissions and how to assign them to Pendo users, see Roles and Permissions.

Themes and layouts

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

Themes help you manage your guide styling by setting the format and style of the layouts and building blocks within guides. Use themes to give guide creators the default styling they need to create visually consistent guide content quickly. 

Layouts provide an easy way for guide designers in your organization to style the look and feel of your guides consistently across the organization. This helps administrators manage guide branding using specific guide templates

Themes

Themes are used to style your guide containers, typography, and buttons. To edit your default themes:

  1. Navigate to Guides > Themes.
  2. Hover over one of your default themes and select Edit Theme.
  3. Enter your app's URL and then select Launch Designer. This opens Theme Settings.

    theme_settings.png

Layouts

Layouts are templates that you can save and then use to structure individual steps in your guide. After you save a guide layout, it appears in your layout options, which you can use whenever you create a guide. For more information on how to create and find layouts, see Guide layouts.

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

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 Visual Design Studio is accessible to any Pendo user, with the exception of those who have Read Only permissions.

designer_action_bar.png

Action bar

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

  • The title of your guide in the top-left corner.
  • The View Steps access tray in the middle of the action bar.
  • Options and notifications in the top-right of the action bar:
    • Save Layout saves your guide as a new layout or to update an existing layout.
    • Activation allows you to change Guide activation
    • Navigation mode allows you to navigate to another page in your application or open a modal.
    • Preview allows you to preview your guide.
    • Exit allows you to leave the Visual Design Studio. It’s important to leave the Visual Design Studio by selecting Exit rather than by closing the tab. This takes you back to the guide's details page.
    • Save allows you to save your current work. Use the down arrow (v) next to Save to choose Save and Exist instead.
    • Alerts to make you aware of any applicable notifications. Errors are yellow when present.
    • Move allows you to move the navigation bar to top orbottom of the Visual Design Studio This might be useful if you have elements in your application that are behind the Action Bar at the top of your page.

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:

There are three Activation options to choose from:

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

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

For more information, see Guide activation options.

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 all these options.

  • Theme. The guide theme you’re using to style your guide.
  • Step Name. The name of the step that you’re currently previewing in your guide.
  • Background color.
  • Padding. Container padding, set in pixels (px) using the numbers representing the top, right, bottom, and left of the container.
  • Border Color. The color of the container’s border, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Border Width. The width of the container’s border, set in pixels (px).
  • Border Radius. Corner rounding of the border, set in pixels (px).
  • Drop Shadow Color. The color of the container’s shadow, set with a hexadecimal, RGB numbers, or the visual color selector.
  • Drop Shadow X, Y, Blur, and Spread. Angle (X), distance (Y), softness (blur), and size (spread) of the container’s drop shadow.
  • Caret. If applicable, the Width and Height of the triangle arrow attached to the container in pixels (px).
  • Backdrop Color. The color of the UI behind the guide, set with a hexadecimal, RGB numbers, or the visual color selector. You can also set the backdrop opacity using the slider below the visual color selector.
  • Close Button. Provides a cross (X) in the top-right corner to allow people to close the guide.
  • Dimensions. Guide width in pixels (px).
  • Z-Index. The order of the container for overlapping elements in the UI. The higher the z-index, the further forward in the UI the element is. Only change this if your guide is hidden by something with a higher z-index, such as a model.

Location

  • Position On Page. The alignment of the guide in the UI.
  • Offset. Adjustment in pixels (px) to preposition the guide in relation to its alignment.
  • Element Location (if applicable).
  • Page Location. Sitewide or Only on this page.
  • Settings > Filter Dynamic Elements on Selection. Turn this setting on to filter out any dynamic elements on a Feature element. For example, in some elements, there are user-specific strings that change as each user navigates through the app. Filtering out these strings ensures better performance when tagging a Feature 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 in your application, 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, for example, the entire button, for the originally selected element, for example, 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

The Behavior tab shows the actions for all buttons in the container. These actions let you add complex Guide controls and navigation without any coding. For more information, see Guide button actions.

edit_container.png

 

Building blocks

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

  • 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

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