Layouts help you consistently style the look and feel of your guides. This helps admins manage guide branding using specific guide styling. Examples of guide layouts include badge-activated tooltips, polls to collect direct feedback from users, and automatically activated lightboxes and banners.
This article explains the layouts available in the Visual Design Studio and how to create and update them.
Prerequisites
To create or update a Custom layout, you need one of the following permissions:
- Subscription admin
- Guide content editor
- Guide creator
To delete a Custom layout, you must be a subscription admin.
Create a layout
If you want to reuse the styling from a guide, you can save it as a layout from the Visual Design Studio while creating the guide. Layouts can be applied to other steps or reused across guides. This applies to both web and mobile guides. Select the application you want, then launch Visual Design Studio to access the layout options.
To create a layout:
- Launch the Visual Design Studio and design your guide with the styling you'd like to reuse.
- When you're finished, select Save layout in the toolbar. This opens the Save layout window.
-
Choose to save either the selected step or all steps in the guide.
- Give your layout a name and choose a category. The layout will be saved for future use and will appear when you filter by that category while creating new guides. For more information about categories, see Manage guide and layouts with categories.
- Select Create layout to save the layout. The layout is saved as a Custom layout and added to the Existing layouts section, where it’s available for reuse when creating or editing other guides.
Note: You can create a layout for each step in the guide by selecting each step individually and saving a layout for each.
Update a layout
You can update a layout 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 Visual Design Studio and design your guide with the styling you'd like to reuse.
-
Select Save layout in the toolbar.
- This opens the Save layout window.
- Select Update an existing layout.
-
Select the 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 reopen the Save layout window and choose a different layout, or select Delete to remove it.
- Update the layout category, if needed. The layout is saved for future use and appears when you filter by that category. For more information about categories, see Manage guide and layouts with categories.
- Select Update layout to finish. The layout is saved as a Custom layout and added to the Existing layouts section, where it’s available for reuse when creating or editing other guides. The old layout is overridden.
Delete a layout
As a Subscription admin, 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.
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 lightbox
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 at 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.