Contact Us

Guides

Pendo Help CenterGuidesGetting Started with Guides

Getting Started with Guides

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 Legacy Designer, you can refer back to the previous version.

Overview

The Visual Design Studio provides you with an intuitive point-and-click interface to build Guides and track their usage. This article provides a quick introduction to the Visual Design Studio, how it works, and its key features.

Why Did We Build the Visual Design Studio?

While the Legacy Designer is a powerful tool you can use to create a variety of different Guides, it requires a basic knowledge of coding languages such as HTML and CSS. Customer feedback indicated that there was significant demand for a completely visual way to build, customize, and style Guides. We created the Visual Design Studio to make Pendo’s Guide creation accessible to teams across an organization, regardless of their technical knowledge.

How Is the Visual Design Studio Different From the Legacy Designer?

The Visual Design Studio completely reimagines how to create Guides within Pendo. Instead of editing code, you can use a visual point-and-click interface. This makes it easy for any user, regardless of technical knowledge, to build and customize Guides.

Key differences between the Legacy Designer and Visual Design Studio include:

Guide Details

The Guide Details page has been optimized in the Visual Design Studio. You can now preview each step of a Guide, as well as edit key settings such as Activation, Segment, and Scheduling without having to go into the Designer itself.

guideDetails.png

Learn more in the Guide Details page article.

Layout Library

Choosing which Layout to use is now much easier within the Visual Design Studio. Before launching the Designer, you will see a Layout library that displays both Pendo default Layouts and custom Layouts you and your team have built.

layouts.png

Admins can quickly edit which Layouts users see, as well as set a default style for Guide backgrounds, text, and buttons so that newly created Guides match your organization’s brand requirements.

note: The ability to create custom Themes for Layouts is coming soon.

Learn more in the Layouts article.

Designer Interface

The Visual Design Studio includes major changes to how you edit and interact with Guides. Instead of using a side panel, you can now launch and edit the Designer directly above your application. You can even change the Layout type without leaving the Designer.

designer.png

Learn more in Create a Guide article.

Building Blocks

Building Blocks are one of the most significant updates within the Visual Design Studio. This feature allows you to add in a variety of different elements to your Guides with just a few clicks. Easily insert a block of text into a Walkthrough or add a poll to a Lightbox, then quickly reorder these elements to your liking.

building-blocks.png

Learn more in Building Blocks article.

tip: For more information on how to complete a task in the Visual Design Studio, refer to the Using the Visual Design Studio vs. the Legacy Designer article.

Getting Started with the Visual Design Studio

The following is a quick introduction to using the Visual Design Studio. For a more thorough discussion, refer to the Create a Guide article.

How to Find the Visual Design Studio

Click “Guides” in the left-hand menu, then choose either “Create a Guide” or “Visual Design Studio” in the top right-hand corner.

create-guide-buttons.png

Layouts

In the Layout Library, you can either create a new Layout from scratch or choose a default Layout. You can create five general types of Guides:

  • Lightbox
  • Banner
  • Tooltip
  • Poll
  • Walkthrough

Any Guide you create can be saved as a custom Layout for future use.

For more information, including recommendations on when to use specific Layouts, refer to the Layouts article.

Opening the Designer

You can access the Designer from the Guide Details page. Simply click on “Manage in App” (1 or 2) to open the Visual Design Studio, then add the page URL you would like the Guide to appear on.

manage-in-app.png

Designer Interface

The Visual Design Studio launches directly above your application, allowing you to immediately begin editing your Guide within its native environment. To begin, there are three main elements to know: the Edit Container toolbox, the Step Tray, and the Building Block toolbox.

The Edit Container toolbox will automatically be open when you first launch the Designer. You can use it to edit how your Guide looks, where it is located, and how it behaves.

edit-container-styling.png

The Step Tray is located at the top of the screen by default. To open it, simply click on the down arrow. You can use the Step Tray to view each step of your Guide, reorder and delete them, and access the Guide Activation options.

step-tray.png

Open the Building Block toolbox by clicking on the blue line that appears when you place your cursor inside your Guide. You will then be able to add in multiple Building Blocks, such as text or an image, as well as custom code.

hover-edit-add-bb.gif

Learn more in Building Blocks article.

Frequently Asked Questions

How do I test a Guide?

You can do this by segmenting the Guide to yourself. Refer to the Create a Guide article for full instructions.

How can I change a Layout within the Designer?

First, open up the Step Tray, then click on the gray box that says “+Add Step”. This will prompt you to choose a new Layout. Once you have done this and styled your new Layout, simply open the Step Tray once again, hover over the previous Layout you would like to delete, and click on the ellipses (“…”) on the top-right corner. This will give you the option to delete that Layout.

© 2019 Pendo  |  Terms of Service  |  Privacy Policy