JavaScript API

The script tag adds window.ProductTour as soon as it loads. If your code may run first, wait for it:

function onProductTour(callback) {
  if (window.ProductTour) return callback(window.ProductTour);
  const timer = setInterval(() => {
    if (window.ProductTour) {
      clearInterval(timer);
      callback(window.ProductTour);
    }
  }, 100);
}

completeCopy Anchor Link

ProductTour.complete(eventName) completes every checklist item of type Custom Event with that event name.

ProductTour.complete('file_uploaded');

embedChecklistCopy Anchor Link

ProductTour.embedChecklist(selector, checklistId) renders a checklist inside an element on your page instead of the floating button. Find the checklist ID in Dashboard → Checklists. The embedded checklist uses Shadow DOM, so your CSS doesn't change it.

ProductTour.embedChecklist('#onboarding-sidebar', 'a1b2c3d4-…');

identifyCopy Anchor Link

ProductTour.identify(userId) saves checklist progress against your own user ID, so it loads on any device where you identify the same user. Progress the user made anonymously in this browser carries over. IDs can be up to 255 characters. You can also set it on the script tag with data-user-id.

ProductTour.identify(currentUser.id);

resetCopy Anchor Link

ProductTour.reset() forgets the identified user. Call it on sign-out, so the next person on the same browser starts fresh.

getUserIdCopy Anchor Link

ProductTour.getUserId() returns the ID progress is currently saved under: yours after identify, an anonymous one before.

projectIdCopy Anchor Link

ProductTour.projectId is the project the widget is configured for. Useful for debugging.