Skip to main content

Guides

Guide

Guide type for presentable Guides provided for the Visitor on the current Page.

guide.canShow() ⇒ Boolean

Returns a Boolean value to indicate if the Guide can Show at this time.

guide.hide() ⇒ Boolean

Hides this Guide if it is being shown.

Example

guide.hide({stayHidden: true});

guide.show() ⇒ void

Attempt to show the Guide. The Guide will still honor any constraints like requiring a DOM element to be present if it was configured for that.

GuideStep

Step type representing specific, sequenced content to be displayed throughout a Guide's lifecycle.

guideStep.advance() ⇒ void

Advances the Step to the next sibling Step of the parent Guide.

guideStep.attachEvent(element, type, fn) ⇒ void

Allows for an eventListener to be created that will automatically get cleaned up when this Step is torn down.

ParamTypeDescription
elementElementThe DOM element to attach the listener.
typeStringThe type of event: 'click', 'mousedown', 'keypress', etc...
fnfunctionA function that will be called when an event occurs of the specified type.

guideStep.canShow() ⇒ boolean

Returns a Boolean indicating if this Step can be shown.

guideStep.dismiss() ⇒ boolean

Dismisses the parent Guide which will hide this Step and prevent other Steps from showing.

guideStep.getGuide() ⇒ Guide

Returns the Step's parent Guide.

guideStep.hide() ⇒ void

Hides the Step if shown. Use an argument of an Object containing a key of stayHidden set to true to make sure to keep the Step hidden if the Guide it belongs to is designated as Automatically shown.

Example

step.hide({stayHidden: true});

guideStep.isShown() ⇒ boolean

Returns a Boolean indicating if this Step is being shown.

guideStep.show() ⇒ void

Attemps to show the step.

areGuidesDelayed() ⇒ boolean

Returns true or false if the client has delayed guides in the snippet or via a command

Example

pendo.areGuidesDelayed() => true

areGuidesDisabled() ⇒ boolean

Returns true or false if the client has disabled guides in the snippet or via a command

Example

pendo.areGuidesDisabled() => true

defaultCssUrl : String

Readonly Property that provides the default CSS Url based on the customer's Apps configuration with Pendo.

Example

pendo.defaultCssUrl

findGuideById(id) ⇒ Guide | null

Use this to search for a currently loaded guide by id.

Returns: Guide | null - JSON guide object or null if no guide found

ParamTypeDescription
idstringid of the guide as a string

Example

pendo.findGuideById('guide_id')

findGuideByName(name) ⇒ Guide | null

Use this to search for a currently loaded guide by name.

Returns: Guide | null - JSON guide object or null if no guide found

ParamTypeDescription
namestringname of the guide as a string

Example

pendo.findGuideByName('guide_name')

getActiveGuide() ⇒ Object | null

If there is a Guide currently displayed then this will return an Object containing properties relevant to the current active Guide.

If no Guide is currently displayed then the return will be null.

The Object will contain:

Properties

NameTypeDescription
guideGuideThe Guide being displayed.
stepsArray.<GuideStep>All the child Steps in the Guide being shown.
stepGuideStepThe specific Step currently rendered for the Guide.
stepIndexNumberThe Step's position in the array of Steps.

getActiveGuides() ⇒ Array.<Guide>

Returns an array of all guides available on the current page to the current user. If multiple frames on a pages, pendo.getActiveGuides() will return the list of eligible guides across all frames. If no frames, this will be the same as pendo.guides.

Example

pendo.getActiveGuides() => [{ Pendo Guide Object }, ...]

goToStep()

Advances from the currently displayed step of a guide to a specific step. This can be either before or after the current step.

Example

pendo.goToStep({destinationStepId: "step_id"})

guideSeenTimeoutLength : number

Readonly number that indicates how long a guide will try to show before sending an error. Defaults to 10 seconds.

hideGuides(hideOptions)

Note: this will not stop the guide evaluation loop and may cause unexpected guide redisplay. In most cases, pendo.stopGuides() is preferred since it will stop the loop and guides will not redisplay until pendo.startGuides() is called.

Manually hide any active Guides. An argument of an Object containing the property stayHidden set to true needs to be provided in order for the guides hidden to stay hidden.

ParamTypeDescription
hideOptionsObjectOptional JS Object containing property stayHidden {boolean}

Example

pendo.hideGuides({stayHidden: true})

initGuides()

Resets and starts guide loop

Example

pendo.initGuides()

loadGuides()

Manually load guides for current visitor and URL. This is typically handled automatically by the Agent whenever the host Application changes its URL. In rare circumstances, a host Application may chose to force the load of Guides programmatically. One reason may be in order to get any guides designed for a visitor immediately after using a specific part of the Application that doesn't cause a URL change.

Example

pendo.loadGuides()

onGuideAdvanced()

Proceeds to the next step in a multi-step guide and sends a guideAdvanced event. Can advanced multiple steps or beyond a specific step by passing optional parameters. Lastly, sends a guideSeen event for the resulting displayed step.

Example

pendo.onGuideAdvanced()

Example

// optionally advance multiple steps at once
pendo.onGuideAdvanced({ steps: 2 })

onGuideDismissed()

Hides the current guide and invokes the guideDismissed event. Dismissed guides will not be re-displayed by default unless they have a recurrence setting or can be reactivated with an element. They can always be redisplayed via onGuideAdvanced or onGuidePrevious.

Example

pendo.onGuideDismissed()

Example

// can optionally dismiss guide until next page reload
pendo.onGuideDismissed({ until: 'reload' })

onGuidePrevious()

Proceeds to the previous step in a multi-step guide and sends a guideAdvanced event. Can rewind multiple steps or beyond a specific step by passing optional parameters. Lastly, sends a guideSeen event for the resulting displayed step.

Example

pendo.onGuidePrevious()

Example

// optionally go back multiple steps at once
pendo.onGuidePrevious({ steps: 2 })

onGuideSnoozed()

Snoozes the current guide. Guide will redisplay after snooze length, or default of one day. If another guide is eligible to be shown, it will show after snooze.

Example

pendo.onGuideSnoozed()

showGuideById(id, reason)

Activates the Guide for the given id, if loaded. If it is not in the payload, this function will return false.

ParamTypeDescription
idstringid of the guide to display
reasonstringoptional reason for the display

Example

pendo.showGuideById('guide_id')

showGuideByName(name, reason)

Activates the Guide for the given name, if loaded. If it is not in the payload, this function will return false.

ParamTypeDescription
namestringname of the guide to display
reasonstringoptional reason for the display

Example

pendo.showGuideByName('guide_name')

startGuides()

Starts the process that loops over all currently loaded guides and determines what to show. Checks multistep guide continuation, auto-display guides, launcher guides, and badges.

Example

pendo.startGuides()

stopGuides()

Clear any showing guides and prevent any loaded guides from rendering. Loaded guides remain in memory, so calling startGuides will work just fine after a stopGuides call.

Example

pendo.stopGuides()