Guides
Guide
Guide type for presentable Guides provided for the Visitor on the current Page.
- Guide
- .canShow() ⇒
Boolean - .hide() ⇒
Boolean - .show() ⇒
void
- .canShow() ⇒
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 - .attachEvent(element, type, fn) ⇒
void - .canShow() ⇒
boolean - .dismiss() ⇒
boolean - .getGuide() ⇒
Guide - .hide() ⇒
void - .isShown() ⇒
boolean - .show() ⇒
void
- .advance() ⇒
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.
| Param | Type | Description |
|---|---|---|
| element | Element | The DOM element to attach the listener. |
| type | String | The type of event: 'click', 'mousedown', 'keypress', etc... |
| fn | function | A 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
| Param | Type | Description |
|---|---|---|
| id | string | id 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
| Param | Type | Description |
|---|---|---|
| name | string | name 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
| Name | Type | Description |
|---|---|---|
| guide | Guide | The Guide being displayed. |
| steps | Array.<GuideStep> | All the child Steps in the Guide being shown. |
| step | GuideStep | The specific Step currently rendered for the Guide. |
| stepIndex | Number | The 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.
| Param | Type | Description |
|---|---|---|
| hideOptions | Object | Optional 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.
| Param | Type | Description |
|---|---|---|
| id | string | id of the guide to display |
| reason | string | optional 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.
| Param | Type | Description |
|---|---|---|
| name | string | name of the guide to display |
| reason | string | optional 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()