The UserGuiding JavaScript SDK officially provides the following client-side methods as part of it's API.

previewGuide (guideId, options)

Triggers a guide. If there is already an active guide preview, this force stops the preview, then starts the requested guide.

Available options:

  • initialStep: number  

step number that guide will start from [default = 0]

  • checkHistory: boolean 

should we apply/bypass preview filters (targeting, segmentation, display count) [default = false]

Example previewGuide  calls:

// Just trigger a guide with default options
userGuiding.previewGuide(1226)

// Start guide from 2nd step and apply preview filters
userGuiding.previewGuide(1226, {
  initialStep: 2,
  checkHistory: true
})

finishPreview()

Force stops the active guide preview.

Example finishPreview  call:

userGuiding.finishPreview()

launchChecklist( checklistId ) 

Displays checklist. If there is already another checklist shown this call will close it, then show the requested checklist.

To locate the checklist/assistant ID; visit your panel and go to the checklist's settings page, the ID is located within your url in the last part.

Available options:

  • itemsShown: boolean

should checklist start in an open state [default = false]

Example launchChecklist  calls:

userGuiding.launchChecklist(1246)

// start checklist in a state which guides are shown
userGuiding.launchChecklist(1246, { itemsShown:true })

hideChecklist()

Force hides the active checklist.

Example hideChecklist call:

userGuiding.hideChecklist()

triggerNps(options)

Triggers NPS survey form. This call bypass page view per session & view count filters, while applying time and sampling filters.

Available options:

force: boolean

No nps filters will be applied with 'force' option; it will be directly opened.

Example triggerNps  call:

// Apply filters and decide whether to show the nps
userGuiding.triggerNps()

// Bypass filters, open the nps directly
userGuiding.triggerNps({ force: true })

Callbacks

onNpsOpen

Execute a callback when nps is open

window.userGuidingLayer.push({
   event: 'onNpsOpen',
   fn: (data) => console.log(data),
})

example output:

{
  event: 'npsShown'
}

onScoreSubmit

Execute a callback when score is submitted

window.userGuidingLayer.push({
   event: 'onScoreSubmit',
   fn: (data) => console.log(data),
})

example output:

{
  event: 'npsScoreSubmit',
  score: 10,
  surveyQuestion: 'How likely are you to recommend UserGuiding to a friend or colleague?'
}

onUniqueScoreSubmit

Execute a callback when score is first submitted (User may click back and change the score)

window.userGuidingLayer.push({
   event: 'onUniqueScoreSubmit',
   fn: (data) => console.log(data),
})

example output:

{
  event: 'npsUniqueScoreSubmit',
  score: 10,
}

onFeedbackSubmit

Execute a callback when score is submitted

window.userGuidingLayer.push({
   event: 'onFeedbackSubmit',
   fn: (data) => console.log(data),
})

example output:

{
  event: 'npsFeedbackSubmit',
  feedbackQuestion: 'Why did you choose that score?',
  feedback: 'I love this!',
}

onload

Execute commands when script loaded and userGuiding API is ready.

example call:

window.userGuidingLayer.push({
  event: 'onload',
  fn: () => console.log('UserGuiding script loaded'),
})

onPreviewStart

Execute callback when a guide preview start.

example call:

window.userGuidingLayer.push({
  event: 'onPreviewStart',
  fn: (data) => console.log(data)
})

example output:

{
  guideId: 1226
}

onPreviewStep

Execute callback when a guide's step previewed.

example call:

window.userGuidingLayer.push({
  event: 'onPreviewStep',
  fn: (data) => console.log(data)
})

example output:

{   
  guideId: 1226,
  stepIndex: 1
}

onPreviewEnd

Execute callback when a guide preview end.

example call

window.userGuidingLayer.push({
  event: 'onPreviewEnd',
  fn: (data) => console.log(data)
})

example output 

{   
  completed: true, // false if user bounced
  guideId: 123456
}
Did this answer your question?