Layouts

Overview

Layouts (previously known as Templates) give you an easy way to quickly style the look and feel of your Guides. For Pendo Administrators, Layouts can also be used to manage Guide branding by giving you the ability to set up specific Guide templates. This article discusses how to create and edit custom Layouts, and goes through each of Pendo’s default Layouts.

Required User Permissions

To create a custom Layout, you will need one of following permissions:

• Pendo Administrator Permission
• User: Create Guides & Layouts (or Templates) from Scratch

To delete a custom Layout, you will need the following permission:

• Pendo Administrator Permissions
  

Create a New Layout

Create your Layout template as a normal Guide in the Visual Design Studio. Once you’re satisfied with your Layout design, save all your changes while still within your designer. After you save, choose the "Save as Layout" option next to the Navigation icon in the upper right-hand corner of the screen.

Once you save your Layout, you will see the Guide option listed in the Layout chooser under "Saved Layouts" at the top when you create a new Guide.

Delete Layouts

As a Pendo Administrator, you can create or delete any custom Layout. In the Layout library, you will see a delete icon when you hover over a custom Layout option:

Layout Types

The Visual Design Studio lets you create Guides based off of five general types of Layouts:

• Lightbox
• Banner
• Tooltip
• Poll
• Walkthrough

You can either use one of the Pendo default Layouts or create a custom Layout that combines multiple aspects of each. For example, you could create a Lightbox that also contains a Poll, or a Banner that leads to a Walkthrough that’s composed of a series of Tooltips.

The following provides an overview of the Pendo default Layouts, as well as their recommended use cases.

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.

Pendo comes with 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 it will appear on either the very top or bottom of a page and will 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 announced a planned outage for maintenance or an unforeseen degradation of service. 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.

Polls

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.

Walkthroughs

Walkthroughs a simply a type of Guide that consists of multiple steps. They can use any type of Layout but are most often associated with Tooltips. This is because the Tooltip Layout is great for showing users individual features or parts of an app.

To build a Walkthrough, pick a Layout for your first step and style it as you normally would. Next, open the Step Tray and click on the “+ Add Step” box. This will prompt you to choose a new Layout. Proceed until you have completed your Walkthrough.

Frequently Asked Questions

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.

Can I re-edit a custom Layout?

Not at this time. We’re working on adding the ability to edit your custom Layout. However, as a workaround, you can delete your custom Layout, edit your existing Guide, and re-save your custom Layout as needed.

Can I recover a deleted custom Layout?

You can re-save the custom Layout from an existing Guide. There is no undo delete option in the Layout chooser at this time.