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 admins manage guide branding using specific guide templates. Examples of guide layouts include badge activated tooltips, polls to collect direct feedback from users, and automatically activated lightboxes and banners.
You can also apply categories to a layout. When you apply a category, you can use the Category filter in the Layouts page to see recommended layouts from the default Pendo layouts or your saved layouts. For more information about categories, see Manage guide and layouts with categories.
This article details the different layouts available in the Visual Design Studio and how to create and update layouts.
Required user permissions
To create or update a custom Layout, you need one of the following permissions:
- Pendo Administrator Permission
- User: Create Guides & Layouts (or Templates) from Scratch
To delete a custom Layout, you need the following permission:
-
Pendo Administrator Permissions
Layout types
You can use one of the Pendo default layouts or create a custom layout that combines multiple aspects of each. For example, you can create a lightbox that also contains a poll or a banner, which leads to a walkthrough that’s composed of a series of tooltips.
Lightbox
A Lightbox is a customizable box that appears above your app or page. It can take on any size or dimension, as well as contain any type of content, such as text, images, or a video. Lightboxes can be used for almost anything, but are excellent tools to make general announcements.
There are five default Lightbox layouts:
Congratulations on Your Success lightbox
This layout provides you with a standard way to offer congratulations. However, it can be edited to say anything.
Congratulations! Walkthrough Complete lightbox
This layout is an excellent way to end a walkthrough and provide users with additional information.
Customer Success Manager Introduction lightob
This layout is a great way to invite users to contact you directly to get a custom demo or receive additional support.
New Feature Announcement lightbox
This layout is a simple way to make sure users know about a new feature or update.
New Feature Announcement (with Image) lightbox
This layout is the same as above but with the addition of an image.
Banner
Banners function similarly to lightboxes, but appear on either the very top or bottom of a page and span across the entire width. This makes them great for announcing an important message without obstructing a user’s entire screen.
Pendo comes with one default banner layout:
System Outage banner
This layout is a great way to announce a planned outage for maintenance or unforeseen service degradation. A link to your system status page would be useful here.
Tooltip
Tooltips are used to give users brief, contextual explanations of particular features. They can be placed anywhere on a page. To locate them relative to a specific element, you can edit the location settings in the Edit Container box.
Pendo comes with two default tooltip layouts:
In-Context Helper tooltip
This layout is a simple way to explain a specific feature to users.
Walkthrough tooltip
This layout can be used to build one step of a multi-step walkthrough that shows users how to complete a task or navigate around your app.
Poll
Polls give you an easy way to collect direct feedback from users. You can do this by offering them a textbox for open-ended responses, a numbered scale, or multiple choices.
Pendo comes with three default poll layouts:
Open Text poll
This layout lets users submit open-ended feedback using a textbox.
Number poll
This layout lets users submit feedback using a numbered scale.
Multi-choice poll
This layout lets users submit feedback by choosing from several different predefined options.
Create a layout
Layouts are applied to a step in a guide. When you create a guide, you apply various design settings to a guide step using the settings in the Edit Container box. These settings can then be saved as a layout to be applied to another step in your guide or to be used by other designers across your organization.
To create a layout:
- Launch the Visual Design Studio and design your layout as a step.
- When you are finished, select Save Layout in the toolbar to save the layout. The Save Layout window opens.
- Give the layout a name, and select a category for the layout.
- Select Create Layout to save the layout. The layout is saved and added to the Saved Layouts section so it can be reused by you or other users.
Update a layout
You can update a layout easily by making changes to an existing design and then saving it as an updated layout.
Note: The original design is overridden when you update a layout.
To update a layout:
- Launch the designer and design your layout as a step.
- Select Save Layout in the toolbar.
- In the Save Layout window, select Update an existing layout. The Saved Layouts window opens.
- Select a layout you want to update. The Save Layout window opens again.
Tip: If you change your mind about the selected layout, select Change layout to open the Saved Layouts window again to select another one, or click Delete.
- Update or apply the layout categories.
Tip: If you've selected a category for the layout, you can save as layout in its category in the designer so that when you select that category again, you'll be able to see recommended layouts for this category, either from the default Pendo layouts or from your saved layouts.
- Select Update Layout to finish. The updated layout is now saved in the Saved Layouts window with the new design and new categories selected, and the old layout is overridden.
Delete a layout
As a Pendo Administrator, you can delete any custom layout. In the Layout library, hover over a custom layout and select the trash icon.
Note: Deleting a layout is permanent. If you decide you want the layout, you can save it again as a custom layout for an existing guide that uses the layout.