If you would like to evaluate Guides and Surveys, please reach out to a member of your account team or fill out this form to be connected with a Fullstory team member.
Who can use this feature?
- Part of Guides and Surveys, an add-on for Business, Advanced, and Enterprise plans.
- Requires an Admin, Architect, or Standard role to configure.
Guides and Surveys is in active development. Product functionality and documentation may change without notice.
Triggers in Guides and Surveys control when content appears and how tours advance through steps. You can use triggers to start tours or checklists based on user actions, and to control step progression in complex environments such as single-page applications or pages with animations and longer loading times.
This article covers the following:
Content triggers
You can set your tours or checklists to start manually based on user actions on your site, such as when an element appears or when someone hovers over an element. This allows you to show content exactly when a user most needs it, or let users start it themselves.
The Trigger section is available in the settings for both tours and checklists. There, you have the option to start the content automatically or manually.
User action triggers
After selecting the content to start manually, you can select the specific user action that will start the tour or checklist. The user action is based on an element on your page and an event associated with that element (such as a click or hover).
The process of selecting an element is the same as in the tour step settings. For more information, see Guides and Surveys: Finding Element Selectors.
Collapsed display (checklists)
Another way to show a checklist is by enabling the Show collapsed option. When enabled, the checklist is shown in a collapsed state. By default, this option is not enabled and the checklist will open automatically on the selected page. If you want to show the checklist collapsed, turn the Show collapsed option on.
When using a manual trigger, the checklist can be reopened even after a user dismisses it (by choice or by mistake).
Tour step triggers
Triggers on tour steps allow you to introduce tours even in complex environments, such as single-page applications, or when you are dealing with animations or longer loading times. A trigger configures a tour step to appear only when the trigger conditions are met. The majority of triggers are related to an element — for example, a tour step is shown only when a certain element appears on the page.
Enabling a trigger on a tour step
To enable a trigger on a tour step, scroll down the step configuration to the Advanced section and switch the trigger on.
Advancing tours with triggers
Triggers can also be used to advance a tour automatically. Every tour step needs a way to progress to the next one. Usually, it is a Next button within the tour step. However, a tour step can also be configured to progress when the conditions of the trigger of the next step are met. To do this, switch the Progress on option from click of ... to The next step trigger. Make sure to configure the trigger of the next step before using this option.
For more details on progress trigger options, see Guides and Surveys: Tour Manual Steps.
Trigger options
The trigger section has three configuration options:
- URL equals: An optional field that can be used to ensure a trigger only fires on a certain page.
- Element: The selector of the element which is part of the trigger.
-
Element event: The event that needs to happen to the element in order for the trigger to fire. For example,
click, which is the default selection.
Element event reference
The following element events are available as trigger conditions.
| Element event name | Description |
| User clicks on element | Click on any point within the element. Uses the mousedown event. Learn more. |
| User moves mouse over the element | Hover the mouse pointer over the element. When the mouse pointer is positioned within the element, this event fires. Uses the mouseover event. Learn more. |
| User pressed a key within the element | This event is generated only for elements which receive input, such as form fields (<input>, <textarea>) and anything with the contentEditable attribute or with tabindex="-1". Uses the keydown event. Learn more. |
| User scrolls within the element | This event fires when the element has been scrolled. If the user puts the pointer over the element and starts scrolling, this event fires. Uses the scroll event. Learn more. |
| Element appears | Waits until the element with the specified selector appears on the page. Note that "appears" refers to the element being present in the DOM, not its visibility. If the element is on the page but is hidden using CSS, it still counts as an appearance. |
| Element changed | The change event is fired for <input>, <select>, and <textarea> elements when an alteration to the element's value is committed by the user. Learn more. |
| Focus is on element | This event fires when an element is about to receive focus. For example, when a user presses Tab while filling in a form, the next form field will be highlighted, meaning the element received focus. Uses the focusin event. Learn more. |
| Custom event | Developers can use custom events defined in their application as triggers. Learn more. |
Frequently Asked Questions
Can a dismissed checklist be reopened?
Yes. When using a manual trigger, the checklist can be reopened even after a user dismisses it by choice or by mistake.
What is the difference between "Element appears" and an element being hidden by CSS?
The "Element appears" trigger fires when the element with the specified selector appears on the page. This is different from being hidden. If the element is on the page but is hidden using CSS, it still counts as an appearance for trigger purposes.
If you have any questions about triggers, reach out to the support team.