Guides Logic allows you to implement advanced guide behaviors using text-based formatting rules, without the need for code blocks. Customizations include:
- Skipping ineligible guide steps.
- Conditional guide branching.
- Marking required questions.
- Guide personalization, for example, metadata substitution.
Skip ineligible guide steps
You can use Guides Logic in walkthrough guides to skip steps that might not display correctly in a guide flow. For example, if a guide includes a step anchored to an element that only appears for certain visitors based on their role or app settings, you can use Guides Logic to skip that step automatically.
- Find and open your guide and then select Edit in my app to open the Visual Design Studio.
- Open the guide step before the one that might need to be skipped.
- Select the step so you see the Edit Container window.
- In the Edit Container window, scroll to the Accessibility section and enter the appropriate syntax from the table below within the
ARIA-labelinput field of the step.
The check for eligible steps happens on the tagged Page where the step with the syntax is added. To check the eligibility on a different Page, add a step to the Page that the visitor is taken to. The syntax doesn't perform the navigation and the check is run prior to the navigating.
Note: Guides Logic cannot be placed on the first step of a guide because there is no previous step to hold the syntax.
| Syntax | Description |
{skipStep: auto/} | If the next step can't display, the guide automatically moves to the next eligible step in the direction the visitor is moving. If no eligible steps exist in that direction, the guide closes. |
{skipStep: [number]/} | If the next step can't display, the guide jumps to the step number you specify. For example, {skipStep: 7/} moves the guide to step 7 if the next step can't display. |
A successful configuration of this syntax within a guide’s ARIA label shows a designated icon in the bottom-right corner of the guide step. This icon disappears when the guide is previewed or live:
Conditional guide branching
You can move the visitor from one step to another within the same guide based on their responses to a multi-choice poll. There are two syntax tags required to enable conditional guide branching on a guide step. This syntax only applies to multi-select polls that use radio buttons. It doesn't support dropdown menus.
To implement conditional branching
- Create or find and open a guide with a multi-select poll and then select Edit in my app to open the Visual Design Studio.
- Ensure the multi-select poll includes radio buttons rather than a multi-select dropdown menu. Dropdown menus aren't supported for conditional branching.
- Include the following syntax to the text block where you want to implement the guide branching for:
- Add
{branching/}. A branching icon () is shown next to the poll question, indicating that the branching is active. This icon disappears when the guide is previewed or is live.
- Add
{goto- [number]/}to the answers for the radio buttons of the poll to specify which step to navigate the visitor to if they select it and then submit the poll. For example, the syntax,{goto-4/}, forces the guide to advance to step 4 when the poll is submitted.
- Add
Only one poll for each guide step can include a conditional guide poll. If multiple polls in a single step include the {branching/} syntax, the Visual Design Studio indicates that this isn't supported:
Mark required questions
You can mark any open-text poll, multi-choice poll, or number-scale poll as "required", prompting the visitor to complete the specified questions before they can submit the poll.
- Create or find and open your guide and then select Edit in my app to open the Visual Design Studio.
- Add the following syntax to any open-text poll, multi-choice poll, or number-scale poll that you want to make "required":
{required/}
This adds a red star asterisk (*) next to the question and prevents the visitor from being able to select any buttons that submit and advance the guide until the required questions are completed. When the guide is rendered in preview or is live, any buttons that submit the guide poll are grayed out until all indicated questions are completed by the visitor.
Guide personalization
You can personalize guide text by inserting web SDK metadata values directly into your content. The syntax looks like this:
{[visitor/account].[fieldName]|[optionalFallback]/}
For example,{visitor.name|Gary/} inserts the visitor's name, or falls back to "Gary" if that field is blank.
You can use any metadata field from the visitor or account object that's available at the time the guide renders. For instance, if your account metadata includes a country field, use {account.country/} to insert it. If a visitor's account doesn't have a country defined, add a fallback like {account.country|your country/} to display "your country" instead.
You can also use this syntax in URLs in guide logic hyperlinks or URL link actions on buttons to build dynamic links based on metadata.
When personalization is active, a personalization icon appears in the Visual Design Studio and when the guide is previewed or live. Note that only web SDK metadata is supported. Other metadata types aren't.