Overlay guide activation options

This article provides information about different activation options for launching your overlay guide to visitors. For instructions on how to create an overlay guide, see Create an overlay guide. If you're looking for information about embedded guide activation, see Create an embedded guide instead.

Guide activation options

There are four activation options for launching overlay guides to visitors. These are chosen from the Activation Settings window of the Visual Design Studio, and can be set both at the time you create your overlay guide and after:

• Automatically. Sets the guide to appear automatically until the visitor advances through the guide or dismisses the guide. You can modify this setting to have the guide reappear for visitors and to override any guide throttling settings. For more information about this option, see Automatic activation in this article.
• Badge. Sets the guide to appear when the visitor interacts with an icon that you place on top of your application. For more information about this option, see Badge activation in this article.
• Confirmation. Sets the guide to appear instead of completing the action of a button or link that your visitor selects. The guide asks the visitor to confirm that they want to proceed with the button or link action. For more information about this option, see Confirmation activation in this article.
• Target Element. Sets the guide to appear when a visitor interacts with a UI element or a tagged Feature in your application. For more information about this option, see Element activation in this article.

For information about how to access these options in Activation Settings, see Activation Settings window in this article.

You can choose up to two activation methods for your guide to achieve the desired behavior. Specifically, you can choose to:

• Activate a guide Automatically and with a Badge. For example, a badge-activated tooltip can be set to open automatically the first time a visitor sees it and then only open when the visitor directly selects the badge after that.
• Activate a guide Automatically and with a Target Element. For example, a lightbox can be set to open automatically the first time a visitor opens a page that a tagged Feature is on and then only open when a visitor selects the tagged Feature that the guide is anchored to after that.

Automatic activation takes priority over badge and element activation.

If no activation options are selected, the default is programmatic activation, which is indicated by the word API in the Activation section of the Settings page for your guide.

You can use programmatic activation in combination with other activation options for your guide. Programmatic (API) activation allows you to launch a guide:

• From a Resource Center. For more information, see Overview of the Resource Center and Guide List module.
• From another guide. For more information, see Guide button actions.
• Using a permalink. For more information, see Create a guide permalink.
• With the agent API. For more information, see our API documentation.

Regardless of the activation methods you choose, if you want your guide to display for a specific period of time, you can schedule a start and end date and time for your guide. For more information, see Test and deliver your guide.

Guide activation conditions

Guides are launched based on a combination of factors that help to control who sees your guides, when, and where. If your guide isn't launching as expected, check the following:

• Guide status. Your guide must be set to Staged or Public to display. Staged deploys your guide in your staging environments only. Public deploys your guide in your staging and production environments. For more information, see Test and deliver your guide.
• Segment. Visitors must be included in your guide's segment to be eligible to see the guide. If you're testing your guide and can't see it, ensure you're included in the guide's segment. For more information, see Test and deliver your guide.
• Page location. Page location for the guide is configured from step 1 of your guide. For more information, see Edit overlay guide step settings. 
  • Sitewide deploys your guide on all pages in your application that Pendo is running on. If you choose Sitewide and also choose to anchor your guide to an element in your application, the guide appears on all pages that include the selected element. 
  • Only on this page deploys your guide on a specified tagged Page in your application. The URL for your guide must match the tagged Page rule.
• Guide anchoring. The element that you select in step 1 of your guide is where your guide is anchored to. Selecting an element for step 1 of your guide is optional for automatic guides and for element-activated guides, and required for badge-activated and confirmation-activated guides. For more information, see Guide anchoring in this article.
• Target Element. If you choose Target Element as your activation option, the activation element and the element that you anchor the first step of your guide to must both be present. The element that your guide is launched from and the element that the first step of your guide is anchored to can be the same or different. For more information, see Element activation options in this article.
• Device type. The eligible visitor's device type must match the device type category selected in your activation settings: All devices, Desktop & tablet only, or Mobile only. For more information, see Device type in this article.
• Throttling. Guide throttling and ordering might prioritize other published guides over yours, limiting how frequently automatic guides appear. For more information, see Order and throttle your guides.
• Localization. Localization settings can prevent a guide from displaying if it isn't translated into an eligible visitor's language. For more information, see Localization.
• Code blocks. Some custom code can intentionally limit when a guide appears beyond what's available in guide settings. Bugs in your code block, such as JavaScript syntax errors, can prevent a guide from rendering properly.

Guide anchoring

The location you set for a step in your guide, including the first step, is called guide anchoring. This involves choosing a UI element or tagged Feature in your application that your guide points to. This is required for:

• Any steps in a guide that use a tooltip container.
• The first step of a badge-activated guide.
• The first step of a confirmation-activated guide.

For information about how to anchor a guide step to a location, see Location tab > Guide location in Edit overlay guide step settings.

Guide activation location (the element that launches a guide) is different from guide location (the element that a guide step is anchored to). Some activation methods require your guide activation location to be the same as the location for step 1 of your guide, and some activation methods don't.

Activation method	Guide anchoring behavior
Automatically	There's no activation location for an automatically activated guide, other than the page location configured in step 1 of your guide. However, you can optionally anchor the first step of your guide to a UI element or tagged Feature (for example, because the first step of your guide is a tooltip), prompting the guide to open automatically when that element or Feature is present.
Badge	Guide activation location is inherited from step 1 of your guide, which also defines where your badge and guide are anchored to. This means that your guide launches when an eligible visitor interacts with a badge that's anchored to an element or tagged Feature that you define for step 1 of your guide.
Confirmation	Guide activation location is inherited from step 1 of your guide, which also defines where your guide is anchored to. This means that your guide launches when a visitor interacts with a UI element or tagged Feature (typically, a selectable button or link) that you define for step 1 of your guide.
Target Element	Guide activation location (configured in Activation Settings) and guide location (configured in step 1 of your guide) can be the same or different depending on whether you want your guide to be anchored to the same UI element or tagged Feature that launches the guide. For more information, see Element activation options in this article.

Activation Settings window

A guide's activation method is chosen from the Activation Settings of the Visual Design Studio when you create an overlay guide or edit an existing overlay guide. If you choose Automatically as your activation method, you can also (optionally) choose either Badge or Target Element. For more information, see Guide activation options in this article.

After choosing an activation method, follow the relevant instructions in this article to configure it: Automatic activation if you choose Automatically, Badge activation if you choose Badge, Confirmation activation if you choose Confirmation, or Element activation if you choose Target Element.

To open the Activation Settings for an existing overlay guide, go to Guides > Guides and then find and open your guide. From the Settings tab, find the Activation card and select Manage in my app. Enter your application's URL and select Launch Designer. This opens the Visual Design Studio over your application in a new tab with the Activation Settings window open by default.

If you're already in the Visual Design Studio, either to create a guide or edit an existing guide, select the Activation card from the toolbar, located before the first step in your guide, or select the Activation shortcut in the top-right corner of the toolbar, next to the Navigate shortcut. This opens the Activation Settings window.

Automatic activation

Choose Automatically as your activation method if you want your guide to launch for eligible visitors without them having to take an action. Automatic activation displays a guide to a visitor when all the conditions for displaying the guide are met. For more information, see Guide activation conditions in this article. This section describes:

• Automatic guide behavior. Expected guide behavior when you choose Automatically as your guide activation method, including what happens if you also select Badge or Confirmation as your guide activation method.

• Automatic guide activation settings. Options for repeating the display of an automatic guide and for overriding guide throttling and ordering settings.

Automatic guide behavior

A guide that appears automatically remains open until the eligible visitor interacts with your guide. Eligible visitors for a guide see the automatic guide multiple times until they interact with it, either by advancing through the guide to completion or by dismissing the guide at any point. 

If an eligible visitor closes the browser window before taking an action in a guide step, Pendo remembers the step that the visitor was on for up to 12 hours and displays the same guide step again when they reopen the application.

If you choose Automatically as your activation method along with another activation method (Badge or Target Element), automatic activation takes priority the first time a visitor meets the eligibility criteria. The guide is still available using the other activation method if the frequency settings for the other activation allow eligible visitors to view the guide more than once. For more information:

• For Badge activation frequency settings, see Badge and guide behavior in this article.
• For Target Element activation frequency settings, see Element activation behavior in this article.

Automatic guide activation settings

This section describes how to configure and use the following automatic activation settings: Repeat Guide Display and Ignore Guide Throttling Settings. 

To avoid guide fatigue, we recommend that you use these settings sparingly. If visitors aren't taking action after seeing a guide, reconsider your guide design, messaging, or friction rather than spamming your visitors. We recommend using a combination of activation, targeting, and segmentation settings to help show the guide only when appropriate or necessary.

For example, you might want to repeat a guide until a visitor updates a critical setting that you've tagged as a Feature in Pendo, ensuring that the segment includes a rule that only shows the guide to visitors who have never used the tagged Feature and that the guide is configured to only show when the Feature is visible.

Repeat Guide Display

Turn on Repeat Guide Display if you want to relaunch a guide automatically after an eligible visitor has dismissed it. To do this, when you choose Automatically as your activation method:

1. Select Repeat Guide Display.
2. In the Repeat Every field, enter the interval (number of days or hours) before the guide automatically displays again to eligible visitors. The repeat interval starts when the visitor sees the guide. You can set the interval to a number between 1 and 10,000, then choose either Day or Hour.
   
   
   
   
3. Set the expiration to limit how many times a visitor sees the guide at the repeat interval. Choose the Expiration Type:
   • If you choose Never, the guide shows again at the repeat interval until the guide is turned off or the visitor is no longer in the guide's segment.
     
     
     
     
   • If you choose A set number of dismissals, enter how many times an eligible visitor must dismiss an automatic guide before it expires for the visitor. The minimum is two dismissals, which includes guide completion.
     
     

For Repeat Guide Display, dismissals occur when:

• The visitor selects the close button (X) of a guide. For information about adding and editing a guide's close button, see Guide building blocks.
• The visitor selects a button in the guide that has a Dismiss action. For information about button actions, see Guide button actions.
• The visitor uses the Esc key on the computer.
• pendo.onGuideDismissed() is invoked in a code block or in your application code.
• The visitor selects a button on the last (or only) step of a guide with one of the following actions: Next Step or Submit All Polls + Advance Guide. For information about button actions, see Guide button actions.
• pendo.onGuideAdvanced() is invoked on the last (or only) step of a guide in a code block or in your application code.

The guide still adheres to the following guide configurations:

• Snooze button actions. If a visitor selects a button in your guide that includes a Snooze Guide action, the guide doesn't automatically display again for the visitor until the specified snooze time has elapsed. For information about adding a snooze action to a button in your guide, see Guide button actions.
• Scheduled expiration. If you set an expiration date and time for your guide, the guide only repeats until that expiration date and time. For more information, see Test and deliver your guide.
• Throttling settings. A guide can't relaunch more than once for every set number of minutes, hours, or days that you set for guide throttling. For more information, see Order and throttle your guides. To override these settings, turn on Ignore Guide Throttling Settings, described below.

Ignore Guide Throttling Settings

Throttling is set from the Ordering tab of your guides list. Throttling settings control the frequency with which all your public automatic guides are displayed, which is useful if you have several automatic guides. Guide ordering and throttling helps you to coordinate the timing of multiple automatic guides so that your visitors aren't overloaded with too many guides within a specified time frame. 

Turn on Ignore Guide Throttling Settings when you choose Automatically as your activation method if you want to override any guide ordering and throttling​ settings. Using this setting in combination with Repeat Guide Display allows you to continue launching the guide regardless of the limitation you set with guide throttling and ordering.

For more information, including best practices, see Order and throttle your guides.

Badge activation

Choose Badge as your activation method if you want your guide to launch for eligible visitors when they interact with a badge that you place on top of your application, either by hovering over it or by selecting it, depending on how you configure the badge behavior.

A badge-activated guide provides supplemental information that would otherwise clutter the screen if permanently displayed. Visitors can launch the guide by interacting with the badge that you place in your application. For example, you might want to offer your visitors a tooltip guide that they can open by selecting a "?" badge next to a new setting in your application to let them know what it is.

You can pair badge activation with automatic activation. For more information, see Automatic activation in this article.

This section describes:

• Badge and guide location. How to choose and edit the location of your badge and guide.
• Badge and guide behavior. How to configure the expected behavior for your badge and guide, including how the badge launches the guide, whether the badge is always visible, and how often the badge should be available.
• Badge styling. How to choose or upload an icon for the badge, and how to configure its position, text, styling, and accessibility.

Badge and guide location

Choosing Badge as your activation method prompts you to choose an element in your application to anchor your badge (and guide) to. If you want to anchor your badge and guide to an existing tagged Feature, you can do this after making an initial selection in the UI.

While you're in selection mode, selectable elements are encapsulated with a dotted red box that follows your mouse around the page in your application. When you've selected a UI element, the dotted red line turns into a solid red line with a default badge icon next to it. 

The Visual Design Studio also reappears over the top of your application with the Badge Settings window open, showing the CSS of the element that you've selected under Element Location in the Location tab.

You can edit this selection and the position of your guide from the first step of your guide in the Visual Design Studio. Specifically, from the Location tab of the Edit Container window, you can:

• Choose where you want the guide to open when the badge is selected. For instructions, see Guide position in Edit overlay guide step settings.
• Anchor your badge and guide to a tagged Feature instead of a UI element by clearing your selection and then choosing a tagged Feature instead. For instructions, see Guide location in Edit overlay guide step settings.
• Edit the CSS selector for the element that the badge and guide are anchored to. For instructions, see Guide location in Edit overlay guide step settings.
• Turn on guide persistence for elements that might disappear from view. For instructions, see Guide persistence in Edit overlay guide step settings.
• Choose whether the guide launches from the badge across your application or from a specific page in your application. For instructions, see Page location in Edit overlay guide step settings.

Badge and guide behavior

Badge activation involves adding an icon to your application from which visitors can launch your guide. You have multiple options for configuring the exact badge activation behavior. To choose your badge behavior:

1. From the toolbar at the top of the Visual Design Studio, select the Activation card before the first step of your guide, or select the Activation shortcut next to the Navigate shortcut at the top of the toolbar.
   
   
   
   
2. Under the Badge activation option, select Edit Settings. This opens the Badge Settings window.
   
   
   
   
3. Open the Behavior tab of the Badge Settings window. From here, you can edit Guide Behavior, Badge Behavior, and how often the badge displays (Frequency).
   
   

Guide Behavior

Under Guide Behavior, choose from one of the following two options:

• Show on badge hover or click. This opens the guide both when a visitor hovers over the badge and when they actively select it.
• Show only on badge click. This opens the guide only when a visitor actively selects the badge icon.

Badge Behavior

Under Badge Behavior, choose from one of the following two options:

• Always show badge. The badge is always visible whenever the UI element or tagged Feature that the badge is anchored to is on the page.
• Show badge only on element hover. The badge appears whenever the visitor passes their mouse over the UI element or tagged Feature that the badge is anchored to.

Fequency

Under Frequency, choose from one of the following two options:

• Show every time. The visitor sees the badge every time they load a page that includes the UI element or tagged Feature that the badge is anchored to.
• Show only once. The badge disappears for visitors who have already seen the guide.

Badge styling

You can edit the badge icon and its position from the Styling tab of the Badge Settings window:

1. From the toolbar at the top of the Visual Design Studio, select the Activation card before the first step of your guide, or select the Activation shortcut next to the Navigate shortcut at the top of the toolbar.
   
   
   
   
2. Under the Badge activation option, select Edit Settings. This opens the Badge Settings window with the Styling tab open by default.
   
   
   
   
3. Select the Badge Icon type and edit it.
   
   

When you edit your badge icon, you can either:

• Choose one of the default badge icons (i, !, ?, and so on). For styling options, see Default badge icon styling options in this article.
• Upload a Custom Image up to 30 MB in size. For requirements and styling options, see Custom image styling options in this article.
• Choose Text Badge, and then edit the copy and styling of the label. For styling options, see Text badge styling options in this article.

Default badge icon styling options

Choosing a default badge icon provides you with the following styling options:

• Position. Set the relative position of the badge icon to the UI element or tagged Feature that the badge is anchored to. Choose between Top Right, Top Left, Inline Right, or Inline Left.
• Offset. For the Up/Down offset, enter a negative number to move the badge icon down or a positive number to move the badge icon up. For the Left/Right offset, enter a negative number to move the badge icon left or a positive number to move the badge icon right.
• Color. Set the color and transparency of the badge icon using hexadecimal, RGBA numbers, visual color selector, or color and transparency sliders.
• Size. Set the height and width of the icon in pixels.
• Z-Index. Specify the stack order of the badge to define whether it appears in front of or behind another element on the page. The default is a very high number (19,000) so that the badge appears above other elements in your application.
• ARIA Lavel - Accessible Name. Enter a screen-readable label (accessible name) for your badge icon.

Custom image styling options

Choosing a custom image for your badge icon provides you with the same edit options as for a default badge icon, except for color and size. Ensure that your custom image is the correct color and size before uploading it. The maximum size is 30 MB, but we recommend choosing an image that's less than 550 KB in size and smaller than 512 x 512 pixels.

• Position. Set the relative position of the badge icon to the UI element or tagged Feature that the badge is anchored to. Choose between Top Right, Top Left, Inline Right, or Inline Left.
• Offset. For the Up/Down offset, enter a negative number to move the badge icon down or a positive number to move the badge icon up. For the Left/Right offset, enter a negative number to move the badge icon left or a positive number to move the badge icon right.
• Z-Index. Specify the stack order of the badge to define whether it appears in front of or behind another element on the page. The default is a very high number (19,000) so that the badge appears above other elements in your application.
• ARIA Lavel - Accessible Name. Enter a screen-readable label (accessible name) for your badge icon.

Text badge styling options

Choosing a text badge provides most of the same edit options as for a default badge icon, except for color and size, and some additional styling options for the text, border, padding, and drop shadow of the text badge icon.

• Position. Set the relative position of the badge icon to the UI element or tagged Feature that the badge is anchored to. Choose between Top Right, Top Left, Inline Right, or Inline Left.
• Offset. For the Up/Down offset, enter a negative number to move the badge icon down or a positive number to move the badge icon up. For the Left/Right offset, enter a negative number to move the badge icon left or a positive number to move the badge icon right.
• Text. Enter the copy for your text badge icon.
• Z-Index. Specify the stack order of the badge to define whether it appears in front of or behind another element on the page. The default is a very high number (19,000) so that the badge appears above other elements in your application.
• Text > Color. Set the color and transparency of the text in the badge using hexadecimal, RGBA numbers, visual color selector, or color and transparency sliders.
• Text > Size. Choose the font size for the text in the badge.
• Background > Color. Set the background color and transparency of the text badge using hexadecimal, RGBA numbers, visual color selector, or color and transparency sliders.
• Padding. Set the spacing between the text and the edges of the text badge. Edit the Top, Right, Bottom, and Left padding separately.
• Border. Set the appearance of the text badge border.
  • Color. Set the background color and transparency of the text badge border using hexadecimal, RGBA numbers, visual color selector, or color and transparency sliders.
  • Width. Set the thickness of the border in pixels (px).
  • Radius. Set the roundness of the corners of the border in pixels (px).
• Drop Shadow. Set the appearance of the text badge shadow.
  • Color. Set the background color and transparency of the text badge drop shadow using hexadecimal, RGBA numbers, visual color selector, or color and transparency sliders.
  • Set the angle (X), distance (Y), softness (Blur), and size (Spread) of the text badge drop shadow.
• ARIA Lavel - Accessible Name. Enter a screen-readable label (accessible name) for your text badge icon.

Confirmation activation

Choose Confirmation as your activation method if you want a confirmation guide to launch every time an eligible visitor selects an element that would otherwise start an action (typically a button or link).

A confirmation-activated guide interrupts the action to ask the visitor to confirm that they want to continue. This prevents visitors from unintentionally selecting a destructive action (such as deleting an account) or starting a time-consuming process (such as completing a form that they can't come back to later).

You can't use Confirmation activation in combination with any other activation method. If another activation method is selected, you can't turn on Confirmation activation. If Confirmation activation is selected, all other activation methods are turned off.

This section describes:

• Button or link selection. How to choose a selectable element (typically a button or link) to launch the confirmation guide from.
• Confirmation activation behavior. The behavior of the two buttons added to the first step of your confirmation guide, and what you can and can't edit.

Button or link selection

When you first choose Confirmation as your activation method, you're prompted to select an element in your application that launches the guide whenever a visitor interacts with it. This is typically an element that starts an action, such as a button or link.

While you're in selection mode, selectable elements are encapsulated with a dotted red box that follows your mouse around the page in your application. When you've selected a UI element, the dotted red line turns into a solid red line.

The Visual Design Studio also reappears over the top of your application with the Badge Settings window open, showing the CSS of the element that you've selected under Element Location in the Location tab.

You can edit this selection and the position of your guide from the first step of your guide in the Visual Design Studio. Specifically, from the Location tab of the Edit Container window, you can:

• Choose where you want the guide to open when a button or link is selected. For instructions, see Guide position in Edit overlay guide step settings.
• Anchor your guide to a tagged Feature instead of a UI element by clearing your selection and then choosing a tagged Feature instead. For instructions, see Guide location in Edit overlay guide step settings.
• Edit the CSS selector for the button or link that launches the guide. For instructions, see Guide location in Edit overlay guide step settings.
• Turn on guide persistence for buttons or links that might disappear from view when the visitor selects it. For instructions, see Guide persistence in Edit overlay guide step settings.
• Choose whether the guide launches from the same button or link regardless of where it is in your application or from a specific page in your application. For instructions, see Page location in Edit overlay guide step settings.

Confirmation activation behavior

When a visitor selects a button or link that you've defined as requiring confirmation, the guide consumes the action and provides the user with the following two options:

• Proceed completes the original action that the visitor initiated by selecting the button or link.
• Cancel prevents the original action that the visitor initiated by selecting the button or link.

Confirmation activation adds two buttons to the first step of your guide that correspond with these two options. You can't remove these buttons or move them to a different step in your guide. If you remove either of the two default buttons or edit either of their actions, Confirmation activation is turned off. 

You can, however:

• Edit each button's style, text, and accessibility label. For example, you might want the "Proceed" button to say "Confirm" or change the style of one of the buttons to highlight it as the preferred action.
• Add additional buttons. You can edit the actions of any additional buttons without affecting the confirmation activation behavior.

For more information on how to add and edit buttons, see Guide building blocks.

Element activation

Choose Target Element as your activation method if you want your guide to launch for eligible visitors when they interact with an element in your UI.

An element-activated guide launches a guide based on a visitor's interaction with a specific UI element or tagged Feature in your application. You can pair this with automatic activation. For more information, see Automatic activation in this article.

This section describes:

• Activation element selection. How to choose and edit the location that launches your guide (activation location). This can be a different location from where step 1 of your guide is anchored to (guide location). For information about the difference between activation location and guide location, see Guide anchoring in this article.
• Guide location. How to choose and edit the position and location of the your guide based on the location settings available to you in step 1. You can choose to allow the guide to open on all pages in your application that the UI element or tagged Feature is present on, or only on a specific page in your application.
• Element activation behavior. How to configure the expected behavior for your guide, including how the UI element or tagged Feature launches the guide and how often the guide should be displayed for visitors who interact with the UI element or tagged Feature.
• Element activation options. Use cases for how to use activation location in combination with guide location to achieve unique guide behavior, like pointing the guide to a different location from the location that launches the guide. For information about the difference between activation location and guide location, see Guide anchoring in this article.

Activation element selection

Element selection behavior works differently depending on the container you choose as the first step of your guide.

If the first step of your guide is a tooltip, and therefore already anchored to a UI element or tagged Feature as part of the guide creation process, the activation element location is inherited from the guide location for step 1. In this scenario, when you choose Target Element as your activation method, the Element Location section in the Target Element Settings window defaults to Inherit from Step 1. You can change the activation element so that it uses a different element to the one that your guide is anchored to in step 1. For more information, see Element activation options in this article.

If the first step of your guide is a lightbox or banner, and therefore not anchored to a UI element or tagged Feature as part of the guide creation process, you must choose an element for your guide activation. In this scenario, selection mode automatically opens when you choose Target Element as your activation method. While you're in selection mode, selectable elements are encapsulated with a dotted red box that follows your mouse around the page in your application. When you've selected a UI element, the dotted red line turns into a solid red line around the chosen element and the Target Element Settings window appears with the Location tab open, where you can expand or refine your selection.

If you want to edit the location of your activation element, open the Location tab of the Target Element Settings window and choose from one of the following:

• Select Suggested Match to keep the CSS selector that corresponds to the UI element you selected.
  
  
  
  
• Select Parent Element to expand the selection to a larger clickable element. This allows you to choose a CSS selector that's above and connected to the initially selected element in the DOM tree.
  
  
  
  
• Select Custom CSS to refine your selection. 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.
  
  
  
  
• Select Inherit from Step 1 to use the same element as the element that you anchor the first step of your guide to. This option is only available if you select an element for step 1 of your guide. For instructions on editing the location for step 1 of your guide, see Edit overlay guide step settings.
  
  

If you want your activation location to be a tagged Feature instead of a UI element, you must inherit it from step 1 of your guide. For instructions on choosing a tagged Feature for a step in your guide, see Edit overlay guide step settings.

Guide location

You can choose to display the guide wherever the selected UI element or tagged Feature is in your application (Sitewide) or on a specific page in your application (Only on this page). If you choose Only on this page, you're prompted to choose a tagged Page in your application.

You always edit page location from the first step of your guide, regardless of whether the first step of your guide is a tooltip, lightbox, or banner, or whether it's anchored to an element or tagged Feature in your application. This is the page location that opens the first step of your guide and can be a different page location from the page location chosen for other steps in your guide. For instructions, see Page location in Edit overlay guide step settings.

You can also edit the following from the first step of your guide. Specifically, from the Location tab of the Edit Container window, you can:

• Edit the CSS selector for the element used in step 1 of your guide. For instructions, see Guide location in Edit overlay guide step settings.
• Anchor your guide to a tagged Feature instead of a UI element by clearing your selection and then choosing a tagged Feature instead. For instructions, see Guide location in Edit overlay guide step settings.
• Choose where you want the guide to open in relation to the UI element or tagged Feature. For instructions, see Guide position in Edit overlay guide step settings.
• Conditionally display a guide based on the content of an element that you select for step 1 of your guide. For instructions, see Conditional guide display in this article.
• Turn on guide persistence for a UI element that might disappear from view. For instructions, see Guide persistence in Edit overlay guide step settings.

Element activation behavior

You have multiple options for configuring the exact element-activation behavior. To choose your activation behavior:

1. From the toolbar at the top of the Visual Design Studio, select the Activation card before the first step of your guide, or select the Activation shortcut next to the Navigate shortcut at the top of the toolbar.
   
   
   
   
2. Under the Target Element activation option, select Edit Settings. This opens the Target Element Settings window.
   
   
   
   
3. Open the Behavior tab of the Target Element Settings window. From here, you can edit Guide Behavior and how often the guide displays (Frequency).
   
   

Guide Beahvior

Under Guide Behavior, choose from one of the following two options:

• Show on element hover or click. This opens the guide both when a visitor hovers over the element and when they actively select it.
• Show only on badge click. This opens the guide only when a visitor actively selects the element.

Frequency

Under Frequency, choose from one of the following two options:

• Show every time. The visitor sees the guide every time they interact with the element selected for activation.
• Show only once. The guide doesn't show for visitors who've already seen the guide.

Element activation options

If you want your selected element to behave like a badge, you can inherit the activation location from the location that you choose to anchor step 1 of your guide to. This means that the element that activates the guide is the same element that the guide is anchored to.

Unlike a badge-activated guide, you can choose a different element for activating your guide from the element that your guide is anchored to when it opens on step 1. This is useful for launching the guide when an eligible visitor interacts with a particular element (like opening a menu), and the first step of your guide points to somewhere else in the UI (like an item in that menu). For example, you might want to:

• Anchor the guide to an element that isn't visible until the user takes an action, like expanding a section to display a guide next to a feature that has become visible in that section.
• Activate the guide when the visitor interacts with a particular feature in your application, and then have your guide point to another element on the screen for the first step in a walkthrough.

To choose a different location for the first step of your guide, follow the instructions in Edit overlay guide step settings.

You can also choose to set an activation location and not a guide location, for example, if the first step of your guide is a lightbox or banner.

Device type

Regardless of the activation method you choose, you can select which device types to show a guide on from the Activation Settings window of the Visual Design Studio. Under Show Guide On, choose between the following three options:

• All devices
• Desktop & tablets only
• Mobile only

Conditional guide display

You can conditionally display your guide based on the contents (text or numbers) of a UI element in your application by turning on the Enable Element Contains Rule in the first step of your guide.

1. From the toolbar at the top of the Visual Design Studio, hover over step 1 of your guide and select Edit Step. This opens the Edit Container window.
   
   
   
   
2. Open the Location tab of the Edit Container window.
   
   
   
   
3. Select an element in your application that includes a value that can change. Use a CSS selector that contains dynamic or user-entered content, such as input, div, or span. Avoid :contains() rules because these force an exact content match to display the step and might prevent an "element contains" rule from working as intended.
   • If the step isn't yet anchored to an element in your application, choose Target Element from the Anchor To Element dropdown menu and follow the instructions in Location tab > Element location in Edit overlay guide step settings.
     
     
     
     
   • If the step is already anchored to an element in your application, check that it corresponds to a CSS selector with dynamic or user-entered content.
     
     
     
     
4. Turn on Enable Element Contains Rule to configure the rule. This displays the current content contained in your selected element.
   
   
   
   
5. Under Content Type, choose either Text or Number. For more information about these content types, see Text rules and Number rules in this article.
   
   
   
   
6. Under Only display guide when the value of this element..., choose the match formula (for example Contains or Equals) from the dropdown menu and enter a value. 
   • If Text is your content type, you can choose between Contains, Does Not Contain, Exactly Matches, and Does Not Match.
   • If Number is your content type, you can choose between Equals, Not Equal To, Is Greater Than, and Is Less Than.
7. Select Done in the bottom-right corner of the Edit Container window to save the rule.

The rule builder validates the current content of the selected element with the contains rule. The current content should be a dynamic value, and so it's ok if the rule doesn't pass when you set it up. It allows you to verify that your rule works as intended.

If the rule passes, the guide displays to the visitor. If the rule doesn't pass, the guide doesn't show to the visitor.

Text rules

Text validation options include Contains, Does Not Contain, Exactly Matches, and Does Not Match.

Text validation treats the element's content as a string and looks for text within that string with the value you define as part of the "element contains" rule. For example, if you create a rule for input fields in a form, you could use the rule Does Not Contain + @ to launch a guide whenever a visitor enters an invalid email address.

For text validation:

• Text isn't case-sensitive.
• Rules include punctuation and symbols.

Number rules

Number validation options include Equal, Not Equal To, Is Greater Than, and Is Less Than.

Number validation treats the element's content as a float. For more information, see Supported formats and Unsupported formats in this article.

For number validation:

• Certain formats aren't recognized, such as date, time, currency, and punctuation other than decimals.
• Commas are ignored.
• Most leading punctuation is ignored except for:
  • A period following a number (for example, 12.34).
  • A minus sign indicating a negative number (for example -1234).
• Punctuation or symbols after a number are treated as the end of the number.

Supported formats

	Content of the element	Value in the rule
Positive number	1234	1234
Negative number	-1234	-1234
Decimal point with leading number	0.1234	0.1234
Currency	$1234	1234
Percentage	12.34%	12.34
Comma separators	1,234	1234
Numbers starting with zero	01234	1234
No value

Unsupported formats

	Content of the element	Value in the rule
No leading number for a decimal	.1234	1234
Fraction	12/34	12
Time	12:34AM	12
Date	12/12/25	12
IP address	1.2.3.4	1.2
Comma used in an international currency	€12,34	1234
Phone number with punctuation	(123)456-7890	123
Space-separated numbers	12, 34, 56	12