How do I use guide variables?

If you are looking to add some personalization to your guides, you can leverage agent metadata in your guides to dynamically display content to users. Pendo guides use JavaScript Templates syntax.

• For Classic Designer Customers (Customers before Feb. 18, 2019)
• For Visual Design Studio Customers (Customers on and after Feb. 18, 2019) - Use the Custom Code Block to add these variables.

<%=root.metadata.visitor.id%>
 <%=root.metadata.account.id%>

Available variables

All agent metadata variables that are passed at time of initialization (via the snippet) are available to use as guide variables.

Note: Variables are case-sensitive. Make sure you use the correct case for a variable. You can verify the correct case for each variable in the Data Mappings page in your application.

The following variables are also available depending on the guide type:root.step.index - The zero-based step number. For example, if your guide has 3 steps, root.step.index will be 0, 1, or 2.

root.step.number - The one-based step number. For example, if your guide has 3 steps, root.step.number will be 1, 2, or 3.

root.step.isFirst - Indicates whether or not the current step is the first step.

root.step.isLast - Indicates whether or not the current step is the last step.

root.guide.name - The name of the guide

root.guide.publishedAt - When the guide was published (timestamp)

root.guide.showsAfter - When the guide was scheduled to start displaying (timestamp)

root.guide.stepCount - The total number of steps in the guide.

Example 1

The following code example demonstrates reporting the guide completion progress, as well as showing and hiding elements based on which step is active:

Progress indicator:

<p>Step <%= root.step.number%> of <%= root.guide.stepCount%></p>

Show back button if not first step:

<% if (!root.step.isFirst) { %>
  <button class="_pendo-guide-previous-button_">Back</button>
<% } %>

Show next button if not last step, or show done button if last step:

<% if (!root.step.isLast) { %>
  <button class="_pendo-guide-next-button_">Next</button>
<% } else { %>
  <button class="_pendo-dismiss-guide-button_">Done</button>
<% } %>

Example 2

The following code example impacts any links in the text of the Guide. The link must be created via the text building block. When the user clicks the link, two things happen:

• The link opens in a new tab.
• The link will have an additional query parameter added to the end of it. For this specific code example, the link ends with ?visitor={visitorId}, where {visitorId} is the visitor ID value.

(function (guide, step, dom) {
    var textLinkElement = dom('._pendo-text-link');
    if (!pendo._.isUndefined(textLinkElement) && 
!pendo._.isUndefined(pendo.visitorId)) {
    var previousUrlLink = textLinkElement[0].href;
    var newUrlLink = previousUrlLink + `?visitor=${pendo.visitorId}`;
    textLinkElement[0].href = newUrlLink;
}
  dom('._pendo-button-primaryButton').on('click', function () {
    window.open(textLinkElement[0].href);
    pendo.onGuideDismissed();
  });
  dom(textLinkElement).on('click', function () {
    pendo.onGuideDismissed();
  });
})(guide, step, pendo.dom);

Important: If modifying or customizing the code example, you are responsible for testing and validating it. This code snippet is free to use, and as such, there is NO WARRANTY, SLA or SUPPORT for this snippet.

Frequently asked questions

Can I use traits/metadata passed in from Segment.io or Salesforce?

No. The guide variables only work with the metadata that is being passed on the page through your Pendo snippet. You cannot use data from Segment.io or Salesforce. To see which metadata you might utilize, feel free to run pendo.validateInstall() in the console of the page in your app.