Create an overlay guide

Overlay guides appear on top of your application content and are a flexible way to deliver tooltips, polls, and multi-step tours to your visitors. This article explains how to create an overlay guide. For more information about guides and which type to use, see Guides overview.

Prerequisites

You must have the correct role permissions to create or edit guides.

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. 
3. Choose the application where you want the guide to display. 
   
   
    
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. 
   
   
    
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 filter to narrow the list, or search by name.
   
   
    

7. Hover over the layout you want and choose Select layout. 
   
   

   Note: The theme is applied through the layout. You can change it later in the Visual Design Studio.

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. 
   
   
    
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. 
    
    
     
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 Guide building blocks overview.

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, see Guide building blocks overview.

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. You can then make your changes. 

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. 
   
   
    
4. When you're finished editing the settings of a step, select Done in the bottom-right corner of the Edit Container window.

Step 4. Set your guide activation method

Activation controls how a guide appears to visitors. It determines whether the guide shows up automatically when a visitor lands on a page, or only when they take a specific action, like selecting a button or badge. You can set activation in the Visual Design Studio during guide creation or come back and update it afterward.

If you've already created the guide:

1. Open the Settings tab for that guide.
2. Scroll to the Activation card and select Edit in my app.

This opens the Visual Design Studio with the Activation Settings window open by default. Select the activation method that fits your use case. 

If you're already editing the guide:

• 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.
   
   

Step 6. Test your guide

Before publishing, test your guide by creating a segment that targets only you. This ensures the guide appears as expected without being visible to other visitors.

1. On the guide details page, locate the Segment tile and select the edit icon.
   
   
    
2. In the dropdown, choose the edit button over Custom Segment.
   
   
3. Add a segment rule where Visitor ID equals your own visitor ID.
4. Select Save custom segment, then select Save within the Segment tile.
5. Set the guide status to Public.
   
   

Because the segment targets only your visitor ID, the guide will only appear to you.

Clear guide data

Automatic guides only display to visitors who haven't previously dismissed them. When testing, you may want the guide to appear again after dismissing it. Clearing guide data resets all collected guide data for that guide, including views and dismissals, so it will appear again to visitors who have already seen it.
To clear guide data, the guide must be in Draft status.

1. On the guide details page, select Clear guide data next to the guide status dropdown.
2. When prompted, select Clear Data to confirm.

Tip: Clear guide data after testing and before publishing so test interactions don't affect your guide metrics.

Step 7. Publish your guide

When you're ready to publish, update the segment to target your intended audience. You then have two options for publishing.

To publish your guide immediately, set the guide status to Public.

To schedule your guide:

1. On the guide details page, scroll down to the Scheduling card.
2. Select Edit.
   
   
    
3. Set a start date.
4. Optionally, set an end date to control when the guide stops being active.