Contact Us

Guides

Pendo Help CenterGuidesRecipe: Using Metadata in Javascript

Recipe: Using Metadata in Javascript

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.

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;
}

Javascript

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

var MetadataValue = document.getElementsByClassName("_pendo-hidden-item_")[0].innerHTML
© 2018 Pendo  |  Terms of Service  |  Privacy Policy