Customize guides with markdown text

Note: Guide Logic must be enabled in your subscription to use the markdown text. Guide Logic is supported for web apps only. Mobile apps are not supported. Guide Logic is only available for Pendo subscriptions with Guides Pro included in their package. If you're unsure whether your plan includes this or if you're interested in getting access, contact your Pendo account representative.

Guide Logic allows Pendo users to implement advanced guide customization using basic markdown text, without using code blocks.

Customizations include:

• Skipping ineligible guide steps
• Conditional guide branching
• Marking required questions
• Guide personalization, for example, metadata substitution

Skip ineligible guide steps

Use this behavior in walkthrough guides to avoid steps that may fail to render within a larger guide flow. A common example of this would be a guide step that’s targeted to an element that may not always be present, for example, based on varying user roles or in-app configurations.

In the Visual Design Studio, enter the following syntax within the aria-label input field in any step before the one that needs to be checked:

Note: The syntax won't work on the first step of the guide and so must appear on a step before the ones that might be ineligible to show.

Syntax	Description
{skipStep: auto/}	If, via a next step or previous step action, the guide moves to a step that is ineligible, the guide instead progresses to the next or previous eligible step. If there are no eligible steps in a particular direction when moving from the current step, the guide closes.
{skipStep: [number]/}	If, via a next step or previous step action, the guide moves to a step that is ineligible, the guide instead progresses to a particular defined step, as indicated by the step number. So, the syntax {skipStep: 7/} forces the guide to move to step 7 if the guide encounters a failed step.

 

Note: The check for eligible steps happens on the page where the step with the {skipStep} syntax is located. To check the eligibility on a different page, add a step on the page that the visitor is taken to after navigating. {skipStep} does not perform the navigation and the check is run prior to navigating.

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

Use this behavior to navigate the user from one step to another within the same guide based on their responses to a multi-select poll.

There are two markdown tags required to enable conditional guide branching on a guide step:

Syntax	Description
{branching/}	Add this syntax to the question title of a Multi Choice Poll to indicate that this particular poll must be utilized for conditional branching. A large 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. Note: This tag currently applies only for multi-select polls using radio buttons and does not support dropdowns.
{goto- [number]/}	On a particular Multi Choice Poll response, this syntax should be added to specify which step to send a user to a particular guide step when the poll is submitted. For example, syntax {goto-4/}, forces the guide to advance to step 4 when the poll is submitted.

 

Implement conditional branching

1. Create a multi-select poll in Visual Design Studio with radio buttons. Dropdowns are currently not supported for conditional branching.
2. In each guide step where you want to implement conditional branching, include the appropriate markdown tags.
   1. Place the {branching/} tag within a text block in each guide step where you want to implement conditional branching.
   2. Insert the {goto- [number]/} tag in the answers for the radio buttons to specify which step to navigate to when that answer is selected.

Only one poll per guide step can house a conditional guide poll. If multiple polls are added with the {branching/} tag, the designer indicates that this is not supported:

Mark required questions

Use this behavior to mark any Open Text Poll, Multi Choice Poll, or Number Scale Poll as “required”, so a user must complete the specified questions before a Pendo Guide Poll can be submitted.

Syntax	Description
{required/}	When added to an Open Text Poll, Multi Choice Poll, or Number Scale Poll within the Visual Design Studio, this disables any buttons that submit and advance the guide until the specified questions are completed.

 

When the appropriate syntax has been added, a small red asterisk appears next to the respective question in both the designer and when the guide is live. This indicates that the question has been marked as required:

When the guide is rendered in preview or is live, any buttons that submit the guide poll are disabled until all indicated questions have been completed:

Guide personalization

Use this behavior within any guide within the Visual Design Studio to dynamically insert Pendo agent metadata values into the text of a guide. This supports any metadata on the visitor or account object that is present to the user at the time of guide rendering:

Syntax

Description

{[visitor/account].[fieldName]|[optionalFallback]/} example: {visitor.name|Gary/}

The guide personalization syntax accepts either the visitor or account object specification, followed by any field name present on that metadata object. For example, if the account metadata object has a field called country, you can specify {account.country/} to dynamically insert that value from metadata. The syntax also accepts an optional fallback parameter. So, if the particular account viewing the guide in the example above does not have a country defined, you can enter {account.country|your country/} to render the words “your country” if the country metadata field for that account is blank. The syntax can also be used within URLs in guides, in either markdown syntax hyperlinks or URL link actions on buttons. This allows you to create dynamic URLs based on metadata.

The Guide Personalization icon appears when personalization is active, as the personalization effect takes place in both the Visual Design Studio and when the guide is previewed or live:

Localization and guide markdown

All of the markdown syntaxes are compatible with XLIFF files and localization in Pendo. When translating a guide, ensure to leave the markdown in place, in the English language.

Required question example

• en_us: How can we improve this feature? {required/}
• es-419: ¿Cómo podemos mejorar esta característica? {required/}

Guide personalization example

• en_us: Please tell us about your experience in {account.country|your country/}
• es-419: Cuéntame sobre su experiencia en {account.country| España/}/}

Note: The optionalFallback for Guide Personalization markdown doesn't need to be the same between translations.

Conditional branching example

• en_us: What is your role? {branching/}
  • Product Manager
  • Engineer {goto-3/}
  • Marketing {goto-4/}
• es-419: ¿Cuál es tu papel? {branching/}
  • Gerente de Producto
  • Ingeniero {goto-3/}
  • Mercadeo {goto-4/}

Skip step example

You can add English text for the Aria label in the Visual Design Studio, for example, {skipStep: auto/}Aria Label example.

To translate the Aria label, open the XLIFF file for the required language and ensure that the trans-unit is updated appropriately for the language:

trans-unit id="e637cba3-d392-4274-a4ec-54a6a39b7dfa|ariaLabel"><source><![CDATA[{skipStep:auto/}Aria
  Label Example]]></source><target><![CDATA[{skipStep:auto/}Ejemplo
  de etiqueta Aria]]></target><note>LinearLayout</note></trans-unit&gt

Visual Design Studio example

Preview example

Use Guide Logic with extension apps

You can use Guide Logic with extension apps if it's enabled for your subscription in the Pendo One platform. This allows guide builders to open a guide that was created in Visual Design Studio in that subscription and use Guide Logic markdown text in the guide. 

Note: Guide Logic markdown text is not supported in Adopt Studio. All markdown text must be managed in Visual Design Studio. If you open a guide that has Guide Logic markdown text in Adopt Studio, the markdown text is stripped out and left as plain text.

Requirements

To use Guide Logic with your extension apps, you must have Pendo Launcher 5.26.1 installed. For more information, see IT guide to deploying the Pendo Launcher.

Use Guide Logic markdown text:

1. In Pendo One, select your Adopt subscription.
2. In the left-side navigation, go to Guides > Guides.
3. Select a guide that has been created in Visual Design Studio.
4. Select Manage in my app. The Visual Design Studio opens.
5. Add Guide Logic markdown text as required. You can see the markdown text icons in the designer preview to verify that everything is applied correctly.

To use Guide Logic in a guide previously built in Adopt Studio:

• In the Visual Design Studio, in the header bar, select the dropdown arrow and select a guide built in Adopt Studio.