Create an overlay guide

This article provides instructions for creating a guide that appears over the content of your web application, such as a tooltip, poll, or multi-step tour.

If, instead of a guide delivered over the top of your application, you want to create an embedded guide, 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.

Process overview

Setting up an overlay guide involves the following:

1. Start creating a guide. Choose your guide configuration options and open the Visual Design Studio.
2. Add and edit content using building blocks.
3. Add and edit steps. Optionally, add steps to your guide, and then edit the styling, location, and behavior of each of your guide steps.
4. Set your guide activation method.
5. Save and preview your guide.

You can then test and configure your guide delivery:

1. Test your guide. You can do this in your staging and production environments.
2. Segment your guide to target specific visitors.
3. Publish your guide. Optionally, you can also schedule your guide.

For instructions, see Test and deliver your guide.

Step 1. Start creating a guide

To start creating an overlay guide:

1. From the left-side menu, go to Guides > Guides.
2. Select Create guide in the top-right corner of the page. If you want to create a guide using AI, select the arrow and select Create guide with AI. For more information about this functionality, see Create guides using AI.
   
   
   
   
3. If you have multiple web applications set up in your Pendo subscription, choose the application that you want the guide to display on. A guide can only be delivered on one application in your subscription.
   
   
   
   
4. Optionally, select a category for your guide. This allows you to see recommended layouts for the category, such as a lightbox for an onboarding walkthrough that includes multiple steps or a banner for an important message for your visitors. For more information, see Use guide layouts.
   
   
   
   
5. Select Overlay to make your guide appear over the content of your application.
   
   
   
   
6. Select a layout from either your saved layouts or Pendo's default layouts.
   
   
   
   
7. Name your guide. Select the default title at the top of the page or enter a new guide name.
   
   
   
   
8. Use the dropdown menu below the title of the guide to add a Product Area. You can either choose an existing Product Area or create a new one by selecting + Create Product Area. For more information about Product Areas in Pendo, see Product Areas.
   
   
   
   
9. 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.
   
   
   
   
10. 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 Open 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. Select + Add Step from the Visual Design Studio toolbar. If you can't see the steps of your guide, select the Open Steps tab of the Visual Design Studio.
   
   
   
   
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

You can set your guide activation in the Visual Design Studio either during the guide creation process 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 Manage 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 over your application in a new tab.
   
   
   
   
3. Select Exit preview in the top-right corner of the page when you're done.
   
   

Next steps

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