Create an overlay guide

This article explains how to create an overlay guide that appears on top of your application content and works well for tooltips, polls, or multi-step tours. If you want to create a guide embedded directly in your application, see Create an embedded guide.

Permissions

There are three guide roles with different permissions: Guide Creator, Guide Publisher, and Guide Content Editor. Admin users have all of the following permissions.

• Pendo users with Guide Creator role permissions can create and edit guides from scratch, and edit an existing guide that’s not public.
• Pendo users with Guide Creator or Guide Content Editor role permissions can create and edit guides from layouts and templates.
• Pendo users with Guide Publisher role permissions can publish and schedule guides.
• All guide roles can delete draft, staged, and disabled guides.

You can also create custom user roles with a combination of the following guide permissions as needed:

• Create and edit guides from scratch.
• Create and edit guides from layouts.
• Publish guides.
• Edit and delete public guides.
• Delete draft, staged, and disabled guides.

For more information, see Roles and permissions.

Step 1. Create an overlay guide

To start creating an overlay guide:

1. From the left-side menu, go to Guides > Guides.
2. From the top-right corner, select Create guide. Choose whether to create a guide for a single app or across multiple web apps. Cross-app guides are available only with Guides Pro. For more information, see Create a cross-app guide.
   
   
    
3. Choose the application you want the guide to display in. 
   
   
    
4. Optionally, select a category for your guide. The category is used to organize the guide and to display recommended layouts, such as a lightbox for an onboarding walkthrough with multiple steps or a banner for an important message to your visitors. For more information, see Use guide layouts.
   
   
    
5. Select Overlay to make your guide appear on top of your application's content.
   
   
    
6. Find a layout for your guide. Layouts help you apply consistent styling to guides across your organization. If you have a large number of layouts available, use the Category and Layout type filters to narrow the list, or search by name.
   • Custom layouts are templates saved in your subscription for reuse. These layouts retain the theme they were created with.
   • Default layouts are provided by Pendo and are available to all users.
   • Organization layouts are available to customers with multiple subscriptions who've turned on the Organization Library. These templates are created and maintained by your organization, can be shared across subscriptions, and retain the theme they were created with. See more about the Organization Library.
     
     

7. Hover over the layout you'd like and choose Select layout. 

   Note: You can change the theme later in the Visual Design Studio or when editing the guide in Pendo. 

8. Name your guide. Select the default title at the top of the page or enter a new guide name.
   
   
    
9. Optionally, select Product Area and category from the dropdown menus below the guide title. Product Areas and categories help you organize your guides. If needed, a subscription admin can add new Product Areas or categories to support your organization. 
   
   
    

10. In the Content area of the Settings tab, enter the application URL, and select Launch Designer. This opens the Visual Design Studio over your application in a new tab where you can start editing your guide. The URL you enter here doesn't control where in your application your guide displays to your visitors. Guide location is configured separately in the Location tab of the Edit Container window. For more information, see Edit overlay guide step settings.
    
    
     

    Note: This field doesn't control where the guide will display to your users. This is configured separately by the page location field on the Location tab.

11. Add and edit your guide's content using building blocks. For instructions, see Add and edit guide content in this article.

Step 2. Add and edit content

There are multiple guide building blocks that allow you to add and format text, buttons, images, polls and embedded videos. For more information, see Add and edit guide content.

To add a building block to a guide:

1. Ensure you're in the right step of your guide. If the steps of your guide aren't visible, select the View Steps tab of the Visual Design Studio toolbar. From here, hover over the step that you want to add content to and select Edit Step.
   
   
    
2. Add your building block.
   • If there's no content in your guide yet, hover over the center of your guide and select Click to Add Content.
     
     
      
   • To add a building block above or below an existing building block, hover over the location that you want to add a building block to and select the Add Row plus (+) icon that appears.
     
     
      
   • To add a text, button, or image building block to the left or right of an existing building block, hover over the building block and select the Add Column plus (+) icon that appears. You can edit the width of building block columns.
     
     
3. Choose your content building block from the Building Blocks window.
4. Edit the content of the building block. For information about what you can edit for each building block type, see Guide building blocks.

Tip: Use Option on a Mac or Alt on Windows to view all current building blocks and their bounding boxes.

To edit existing building blocks in your guide:

1. Ensure you're in the right step of your guide. If the steps of your guide aren't visible, select the View steps tab of the Visual Design Studio toolbar. From here, hover over the step that you want to edit and select Edit Step.
   
   
2. Select the building block in your step that you want to edit the content for.
3. Edit the building block using the options outlined in Guide building blocks.

Tip: Periodically save your changes as you edit your guide to save your progress.

Step 3. Add and edit steps

To add and edit a new step:

1. You can add steps to your guide from the Visual Design Studio toolbar at the top of the page. If the steps aren’t visible, select View steps. Select + Add step, then choose a layout for the new step. If you select a multi-step layout, all steps in that layout are added to your guide.
   
   
    
2. Follow the instructions in Add and edit guide content in this article.
3. Edit your step settings. Step settings are edited from the Edit Container window in the Visual Design Studio where you can edit the styling, location, and behavior of the step. For more information, see Edit overlay guide step settings.
4. When you're finished editing the settings of a step, select Done in the bottom-right corner of the Edit Container window.

To edit the settings of an existing step, hover over the step that you want to edit in the Visual Design Studio toolbar and select Edit Step. This opens the Edit Container window where you can edit the styling, location, and behavior of the step. For more information, see Edit overlay guide step settings.

Step 4. Set your guide activation method

You can set your guide activation in the Visual Design Studio during guide creation or after you've created a guide. If you've already created the guide, open the Settings tab of your guide in Pendo and select Edit in my app from the top-right corner of the Activation card. 

This opens the Visual Design Studio with the Activation Settings window open by default. From here, select the appropriate activation method. For more information, see Overlay guide activation options.

If you're already editing your guide, you can either:

• Select the Activation card from the toolbar, located before the first step of your guide.
• Select the Activation shortcut in the top-right of the toolbar, next to the Navigate shortcut.
  
  

Step 5. Save and preview your guide

When you're done creating and editing your guide:

1. Select Save and then Exit in the top-right corner of the Visual Design Studio toolbar. This saves your guide, closes the Visual Design Studio, and opens the details of your guide with the Settings tab open by default.
   
   
    
2. From the Settings tab of your guide, select Preview. This opens your guide on top of your application in a new tab.
   
   
    
3. Select Exit preview in the top-right corner of the page when you're done.
   
   

After saving and previewing your overlay guide, you can test, segment, schedule, and publish it. For instructions, see Test and deliver your guide. 

Edit an existing guide in the simplified editor

You can update an existing guide in a simplified editor by selecting Edit in Pendo from the guide’s details page.

In this editor, you can:

1. Edit text and button content by selecting the text directly in the guide.
2. Undo recent text changes by selecting the arrow icon that appears. This option disappears after you move focus away.
3. Add a new step by selecting the + icon below a guide step, then apply a layout.
4. Duplicate or delete steps by hovering over a step and selecting the relevant icon.
5. Update the guide theme by selecting the Theme dropdown in the top-right corner.

When you're done, select Save guide in the top-right corner of the page to apply your changes.

Note: If you have Guides Pro with AI guide creation turned on for your subscription, the Guides AI agent appears on the left side of the editor. You can use it to suggest text changes, adjust tone, and perform other edits using natural language. For more information, see Create a guide using conversational AI.

For advanced guide settings, such as styling, activation, or targeting, select Edit in my app from the guide's details page to open the Visual Design Studio instead.