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 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. 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 the 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 the application. For more information about this option, see Element activation in this article.

You can choose up to two activation methods for your guide to achieve the desired behavior. For example, you can activate a guide Automatically and with a Badge. This will set the guide to open automatically the first time a visitor sees it and then only open when the visitor directly selects the badge after that.

If no activation options are selected, the default is programmatic, which means the guide can be launched by another guide by using a button action. A programmatic activation option is still available if other activation options are selected.

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. 

Note: Automatic, Badge, Confirmation, and Target Element activation are set up under the Activation settings in the Visual Design Studio toolbar. Element Contains Rules and Guide Persistence are set up in Location settings for the first guide step.

Activation settings 

A guide's activation method is chosen from the Activation Settings of the Visual Design Studio when you create or edit a guide. 

To open the Activation settings for an existing guide, open the guide and select the Activation card in the action bar.

1. Go to Guides > Guides.
2. Select the guide you'd like to edit.
3. From the Settings tab, find the Activation card and select Edit in my app.
   
4. Enter the application's URL and select Launch Designer. 
5. From the toolbar at the top of the page, select Activation settings.
6. This opens the Visual Design Studio over the 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. 

• 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 delaying a guide display, and repeating the display of the same guide.

Automatic guide behavior

A guide that appears automatically remains open until it is dismissed by the user, either using the X close button in the upper-right corner or a button with the Dismiss action in the guide.

If an eligible visitor closes the browser window before taking an action in a guide step, the platform 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. 

Automatic guide activation settings

For guides that launch automatically, there are activation settings to control when and how those guides display to visitors. You can manage whether you want to delay a guide from displaying right away and choose to repeat the guide display after it's dismissed.

To avoid guide fatigue, we recommend using Repeat guide display sparingly. If visitors aren't taking action after seeing a guide, reconsider your guide design, messaging, or friction rather than increasing your display frequency. You can also use a combination of activation 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, 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. Similarly, you might want to repeat a guide until a visitor submits a poll response or reaches the last step in a multi-step guide. In this case, ensure that the segment includes a guide element rule that excludes visitors after they select the relevant guide button.

To access these settings:

1. From the left-side menu, go to Guides > Guides.
2. Choose the guide you want to update.
3. This opens the Settings tab where you can find the Activation card by scrolling down the page. 
4. Select Edit display options.

Delay guide display

By default, an automatic guide displays as soon as its activation and eligibility conditions are met. Delay guide display lets you set a wait period of up to 60 seconds before the guide appears, so you can avoid interrupting visitors the moment they land on a page.

This setting is available for automatic web guides, including surveys. It isn't available for embedded guides.

To delay guide display:

1. From a guide's details page, find the Activation card and select Edit display options. 
2. Turn on Delay guide display. 

Repeat guide display

Repeat guide display relaunches a guide automatically after an eligible visitor has dismissed it, at an interval you define. Use it when you want a guide to continue displaying to eligible visitors after they dismiss it.

To set repeat guide display:

1. From a guide's details page, find the Activation card and select Edit display options. 
2. Turn on Repeat guide display.
3. In the Show every field, enter the interval before the guide automatically displays again to eligible visitors. You can set the interval to a number between 1 and 10,000, then choose either Day or Hour. The repeat interval starts when the visitor sees the guide.
4. Under Stop showing after, choose when to stop displaying the guide to eligible visitors:

• Never. The guide displays again at the repeat interval until the guide is no longer public or the visitor is no longer in the guide's segment.
• A set number of dismissals. Enter how many times an eligible visitor must dismiss the guide before it stops displaying for them. The minimum is two dismissals, which includes guide completion.

Note: Repeat guide display only controls displaying the same guide after a visitor dismisses it. It doesn't sequence or delay that guide relative to other guides. The Show every interval starts after a visitor has already seen the guide, so it has no effect on when the guide first appears. If you want a guide to appear only once, leave Repeat guide display off.

What counts as a dismissal

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 Close (X) button building block.
• The visitor selects a button in the guide that has a Dismiss action. For information about button actions, see Button building block.
• The visitor uses the keyboard Esc key.
• 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. 

Other settings that affect repeat behavior

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.

Note: If your guide isn't launching at the repeat interval you've set, check whether you've selected both Automatically and Target Element as the activation method. When used together, these override any Repeat guide display settings.

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 the 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 the 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 the 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 the 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 the 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 the 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. 
• 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. 
• Edit the CSS selector for the element that the badge and guide are anchored to. 
• Turn on guide persistence for elements that might disappear from view. 
• Choose whether the guide launches from the badge across the application or from a specific page in the application. 

Badge and guide behavior

Badge activation involves adding an icon to the 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.

Frequency

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 the application.
• ARIA Label - 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 the application.
• ARIA Label - 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 the 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 Label - 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 the 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 the 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 the 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. 
• Anchor your guide to a tagged Feature instead of a UI element by clearing your selection and then choosing a tagged Feature instead. 
• Edit the CSS selector for the button or link that launches the guide. 
• Turn on guide persistence for buttons or links that might disappear from view when the visitor selects it. 
• Choose whether the guide launches from the same button or link regardless of where it is in the application or from a specific page in the application. 

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.

Target 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 the 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). 
• Guide location. How to choose and edit the position and location of 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 the application that the UI element or tagged Feature is present on, or only on a specific page in the 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. 

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

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. 

Guide location

You can choose to display the guide wherever the selected UI element or tagged Feature is in the application (Sitewide) or on a specific page in the application (Only on this page). If you choose Only on this page, you're prompted to choose a tagged Page in the 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 the 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. 

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. 
• Anchor your guide to a tagged Feature instead of a UI element by clearing your selection and then choosing a tagged Feature instead. 
• Choose where you want the guide to open in relation to the UI element or tagged Feature. 
• Conditionally display a guide based on the content of an element that you select for step 1 of your guide. 
• Turn on guide persistence for a UI element that might disappear from view. 

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 Behavior

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 element 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 the application, and then have your guide point to another element on the screen for the first step in a walkthrough.

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 the 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 the 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 the 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 the 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 okay 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

Unsupported formats