Help Center

The following functions allow you to manipulate Usetiful tours using JavaScript. They are available on all pages where the Usetiful script is installed.

window.USETIFUL.tour.start(tourId)

• This function allows you to start any published tour according to the given tour id. Tour's id can be found in the editor URL (e.g. https://www.usetiful.com/product-tours/creator/23). If the function was called correctly, the tour will display immediately on the current page regardless tour's targeting.
  
  

window.USETIFUL.tour.nextStep()

• This function moves the currently running tour to the next step.
  
  

window.USETIFUL.tour.preStep()

• This function moves the currently running tour to the previous step.
  
  

window.USETIFUL.tour.close()

• This function closes the currently running tour.
  
  

window.USETIFUL.tour.jumpTo(stepNumber)

• This function moves the currently running tour to the step based on the given step number (e.g. the first step has number 1).
  
  

window.USETIFUL.tour.getToursByElement(selector)

• Returns an array of details about tours that are started by a trigger associated with a given element (selector as an argument).

• [
      {
          id: 2,
          name: "Demo tour",
          triggerLocation: "tour",
          trigger: {
              type: "click",
              element: "#demoButton",
              url: ""
          }
      }
  ]

  
  

window.USETIFUL.tour.getState()

• Returns an array of all tours available on the current page and tours for which the current user has saved status. The list contains details to identify the tours and their status. Sample output below:
  
  

• [
  {name: 'Tour 1', id: 12, isAvailable: true, state: 'never run'}, 
  {name: 'Tour 2', id: 14, isAvailable: true, state: 'closed'}, 
  {name: 'Tour 3', id: 4, state: 'inProgress', currentStep: 0, isAvailable: false}
  ]

window.USETIFUL.reinitialize()

• This function re-initializes the script on the page on demand.
  
  

• You might see this warning message in the console: "reinitialize function is not available yet. Please try to call it with some delay". This means that you want to call the API before the Usetiful script is fully initialized. In this case, you should catch the event usetiful:fullApiReady that is triggered right after the API functions are fully available.
  
  

  document.addEventListener("usetiful:fullApiReady", () => {
    window.USETIFUL.reinitialize();
  });