Using Metadata in Javascript when creating a guide

Create a Guide

For the purposes of this walk through we will create a one step Guide. Metadata values are only accessible in the HTML of a Guide. We will need to access the Metadata from the HTML and retrieve it from the element using the Document API. We will make changes in each content pane to use the Metadata values within our Javascript.

HTML

Within the HTML tab, you will need to create an element similar to the following to pull Metadata values from the installation snippet:

<span class="_pendo-hidden-item_"><%= metadata.visitor.<value> %></span>

Replace <value> with the desired property you want, e.g., the visitor id would be <%= metadata.visitor.id %>

CSS

If you do not want to see the value of the Metadata variable in the rendered Guide, add the following CSS rule:

._pendo-hidden-item_ {
    display: none;
}