Edit overlay guide step settings

This article summarizes the options available for editing the style, location, and behavior of an overlay guide. For information about the style, location, and behavior settings for embedded guides, see Guides overview and Create an embedded guide.

The Edit Container

You can edit the steps in your overlay guide from the Edit Container window of the Visual Design Studio. The Edit Container window consists of three tabs: Styling (default), Location, and Behavior. From here, you can customize the appearance, positioning, and interactivity of each step in your guide.

The Edit Container window appears when you:

• Add a new step to a guide. 
• Select Edit Step for one of the existing steps in your guide.
• Select the container of the step that you're already editing. To select a step's container, hover over the edge of the guide step until the edges turn blue, and then select it.

For information about adding and editing guide steps, see Create an overlay guide.

Styling tab

Use the options in the Styling tab of the Edit Container window to edit the following for a guide step:

• Theme. The overall styling for the guide.
• Container settings. The step's name, caret, backdrop, close button, and dimensions.
• Background. The color of the background behind the guide step.
• Accessibility. The inclusivity options for the step.

Styling theme

Use the dropdown menu under Theme to choose the saved styling of the layout and building blocks used for your guide step. For more information, see Manage guide styling with themes.

The selection you make here affects what's visible in the rest of the Styling tab.

Setting	Visibility
Step <x> Name	Always visible.
Padding	Visible when Custom theme is chosen.
Border	Visible when Custom theme is chosen.
Drop shadow	Visible when Custom theme is chosen.
Caret	Always visible but only editable when the guide step is positioned relative to an element on the page.
Backdrop	Always visible.
Close Button	Always visible.
Dimensions	Always visible.
Width	Always visible.
Z-index	Visible when Custom theme is chosen.
Background Color	Visible when Custom theme is chosen.
ARIA Label - Accessible Name	Always visible.
Role	Always visible.
ARIA Label - Close Button	Always visible.

Container settings

As standard, you can do the following from the container settings:

• Step Name. Edit the name of the step that you see on the Settings page of your guide in Pendo. Select the existing name and enter a new one.
• Caret. If your guide is positioned relative to an element on the page, add or remove a caret (triangle arrow) to the guide step that points to the element. If you choose Custom as your styling theme, there are other styling options available, detailed below.
• Backdrop. Add or remove the surface that appears behind the guide in the application. If your guide is positioned relative to an element on the page, you have more options, detailed below.
• Close Button. Add or remove the close button (X) from the top-right or top-left ‌corner of the guide step. To edit the close button's styling and location, follow the instructions in Guide building blocks.
• Dimensions. Edit the responsive width of the guide step.
  • Select Full width if you want the guide to cover the full length of the window. 
  • Select Fixed if you want the guide to stay a fixed size regardless of the size of the window. The Width of a fixed guide is set in pixels (px).
  • Select Fluid if you want the guide to resize responsively to the size of the window. The Width of a fluid guide is set by percentage (%). You can also set the Min Width and Max Width in pixels (px).
    
    

If your guide is positioned relative to an element on the page and you turn on the Backdrop for the guide step, you can also turn on Show target element above the backdrop. This prevents the element from being covered by the backdrop, thus appearing highlighted. If you select this option, you can also:

• Edit the Expandable Click Area to increase the size of the exposed area around the selected element that appears above the backdrop.
• If you know the CSS selectors for other UI elements on the page that you also want to expose from behind the backdrop, use the Add CSS Elements field to enter one or more relevant CSS selectors, separated by a comma. This exposes the smallest rectangle area that encapsulates all of the UI elements that you enter.
  
  

If you choose Custom as your styling theme, you can also edit the following:

• Caret. If you choose to include a caret for the guide step, you can also edit the caret's Width and Height in pixels (px).
• Padding. The space in pixels (px) between the step's contents and the edges of the step's container. You set the padding from the Top, Right, Left, and Bottom separately.
• Border. The color, width, and radius (corner roundness) of the step's container border.
  • The border Color is set with a hexadecimal, RGB numbers, visual color selector, or color slider.
  • The Width and the Radius are set in pixels (px).
• Drop Shadow. The color, angle (X), distance (Y), softness (Blur) and size (Spread) of the step container's shadow.
  • The Color of the drop shadow is set with a hexadecimal, RGBA numbers, visual color selector, or color slider.
  • The transparency of the drop shadow is set at the same time as the color using the alpha channel (A) in the RGBA number or the slider below the color picker and slider.
  • The X, Y, Blur, and Spread of the drop shadow are set in pixels (px).
• Z-index. The order of the container for overlapping elements on the page. The higher the z-index, the further forward in the UI the element is. We recommend that you only change this if your guide is hidden by something with a higher z-index, such as a modal or your backdrop.

Background color

If you choose Custom as your styling theme, you can edit the Background color of the guide step. The Color is set with a hexadecimal, RGBA numbers, visual color selector, or color slider. The transparency of the background color is set at the same time as the color using the alpha channel (A) in the RGBA numbers or the slider below the color picker and slider.

Accessibility

You can add any of the following for the benefit of screen readers.

• ARIA Label - Accessible Name. An alternative, accessible name of the guide step.
• Role. The semantic meaning assigned to the guide step (for example, Dialog, Form, Navigation). For information about ARIA roles, see Mozilla's WAI-ARIA roles.
• Autofocus this step. Make the guide step the first element read by screen readers as soon as the step appears on the screen.
• ARIA Label - Close Button. An alternative, accessible name for the close button.

Location tab

Use the options in the Location tab of the Edit Container window to edit the following for a guide step:

• Guide position. Where you want the guide to open on the page.
• Guide location. The UI element or tagged Feature that the guide step is anchored to (optional). If your guide is badge-activated or confirmation-activated, you must select a location for step 1 of the guide.
  • For badge-activated guides, the guide location for step 1 is the same as the badge location.
  • For confirmation-activated guides, the guide location for step 1 is the same as the element that loads the guide.
• Conditional display. The ability to launch a guide only if an element's text or number content matches a given condition.
• Guide persistence. The ability to allow your guide to remain on screen even if the element you've anchored the guide step to disappears.
• Page location. Choose whether the guide step opens sitewide or only from a specific page in your application.
• Dynamic element filtering. We recommend that you filter our elements that are dynamic or not always present in the DOM tree.

Guide position

Use the dropdown menu under Position on Page to choose the location of the guide step on the page. You can choose from multiple fixed locations or select an element in the page to position the guide next to (relative to element).

Different guide layouts are automatically assigned an alignment, which you can change.

• The default for a lightbox is Centered alignment.
• The default for a tooltip is Relative to Element.
• The default for a banner is Bottom Aligned. 

For fixed locations, you can choose:

• The center of the page (Center).
• Any of the four corners of the page (for example, Top Left Aligned). If you choose one of these options, you can also edit the Offset (in pixels) for the two sides of the guide step that's closest to the corner of the page.
• The middle of the top, bottom, left, or top of the page (for example, Top Aligned). If you choose one of these options, you can also edit the Offset (in pixels) for the side of the guide step that's closest to the edge of the page.

If you choose Relative to Element instead of a fixed location, the guide step is positioned relative to the UI element that you select for the step.

• When your guide is badge-activated or confirmation-activated, the guide position for step 1 also specifies where the guide opens relative to the badge, button, or link that launches the guide.
• When you choose Relative to Element, you're given the following additional options under Position to Element:
  • Auto (default) attempts to choose the optimal location for the guide to open relative to the badge or element
  • Alternatively, choose whether the guide opens above (Top), below (Bottom), to the left (Left), or to the right (Right) of the badge or element.
    
    

Guide location

Use the options under Anchor To Element to select an element or tagged Feature to anchor your guide step to. This is required for steps that use the tooltip layout, and for the first step of badge-activated and confirmation-activated guides.

Note: If your guide is badge-activated, the element that you anchor step 1 of your guide to is the same element that your badge icon is anchored to. If your guide is confirmation-activated, the element (typically a button or link) that you anchor step 1 of your guide to is the same element that launches the confirmation guide. For more information, see Overlay guide activation options.

If you haven't already chosen an element for the step, open the Select Element dropdown menu under Anchor To Element and then choose one of the following options:

• Target Element. From here, you can expand or refine your selection.
• Select Existing Feature. If there are no Features tagged on the page, this option is grayed out. For information about tagging Features, see Feature tagging.
  
  

If you've already chosen an element or tagged Feature and want to change it, you can either select Clear Selection to start again, or:

• For a UI element, choose one of the options for expanding or refining your selection, described in Target Element in this article.
• For a tagged Feature, select Re-Target Element and choose a different tagged Feature.

Target Element

Choosing Target Element from the Select Element dropdown menu opens element-selection mode. A dotted red box encapsulates elements in your application as you move your mouse around the page. This changes to a solid red line when you select a UI element. You can then either:

• Keep the Suggested Match, which means to keep the CSS selector that corresponds to the UI element you selected.
  
  
  
  
• Expand the selection to a larger clickable element by selecting Parent Element. This allows you to choose a CSS selector for the element that's above and connected to the initially selected element in the DOM tree.
  
  
  
  
• Refine your selection using Custom CSS. This allows you to specify the intended element based on a specific CSS selector in the DOM tree. For guidance, see Using CSS rules for guide targeting.
  
  

Note: The DOM tree is a representation of the HTML structure of a webpage, and CSS selectors are used to identify elements within this structure.

If you select the wrong element, you can select Clear Selection to start again.

Select Existing Feature

Choosing Select Existing Feature from the Select Element dropdown menu opens Feature-selection mode. A red highlight box appears over elements that have been tagged as Features in your application as you move your mouse over them around the page. This changes to a solid red line around the tagged Feature when you select it. 

If you choose the wrong tagged Feature, you can:

• Choose from other Features on the Page using the dropdown menu.
  
  
  
  
• Select Clear Selection to start again. 
  
  
  
  
• Select Re-target Element to choose another Feature in Feature-selection mode.
  
  

For more information about Features in Pendo, see Feature tagging.

Conditional display

Turn on Enable Element Contains Rule to conditionally display guides based on the contents of an element that you select for step 1 of your guide. When you turn this option on, you're prompted to create a rule that launches the guide only when the selected element's content (text or number) matches a specified condition. 

For more information, see Overlay guide activation options.

Guide persistence

Turn on Guide Persistence if you want your guide to remain on screen even if the selected element disappears from view.

Guide persistence is only available if:

• You've anchored the guide step to an element.
• Enable Element Contains Rule is turned off.
• You're not editing a confirmation guide.

For more information and instructions, see Overlay guide activation options.

Page location

Under Page Location, you can choose either:

• Sitewide to display the guide step across your application regardless of what page in your application the visitor is on. If you've anchored the guide step to an element or tagged Feature, this guide step is available on all pages where the element or tagged Feature is present.
• Only on this page to display the guide step on a specific tagged Page in your application. If you haven't tagged the Page that you want the guide step to show on, follow the instructions in Page tagging.

If your guide is badge-activated or element-activated (including confirmation guide activation), the above options for step 1 of your guide also apply to the presence of the badge or UI element that launches the guide.

Dynamic element filtering

Keep Filter Dynamic Elements on Selection turned on to ensure that the CSS selector you're anchoring your guide step to is a stable identifier that's unlikely to change over time.

We recommend that you keep this setting turned on because some code libraries add IDs and classes to elements that change. These don't make good CSS selectors, and so this setting prevents them from being used.

Behavior tab

Use the options in the Behavior tab of the Edit Container window to edit the following for a guide step:

• Button actions in your guide step. You can also edit button actions by selecting a button in a guide step directly to open the Edit Button window. For more information, see the Button section of Guide building blocks and Guide button actions.
  
  
  
  
• If the guide step is anchored to an element, allow visitors to advance the guide when they either select or hover over the element. In this case, you don't need to also have a button with an action to advance the guide. Open the Add Action dropdown menu and choose either Advance on Element Click or Advance on Element Hover.