Using Metadata in Javascript when creating a guide

Last updated:

This recipe is intended to walk through the steps of using Metadata values in Javascript. 

Warning: While it is possible to pull Metadata values for use in Javascript, this can potentially expose sensitive information within the application. 

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.


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 <%= %>


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;


Now grab the value of the Metadata to use in your Javascript using the Document API:


var MetadataValue = document.getElementsByClassName("_pendo-hidden-item_")[0].innerHTMLvar MetadataValue = document.getElementsByClassName("_pendo-hidden-item_")


Was this article helpful?
2 out of 7 found this helpful