Product Tours

Control and listen to product tours programmatically via the Kompassify Player API.

Waiting for Kompassify API to be ready

It is highly recommended to wait for the Kompassify API Script to be fully loaded before calling any of the API functions.

The event KOMPASSIFY_BOOT_LOADER_IS_READY is dispatched when the Kompassify API is ready to be used.

window.addEventListener('message', function (event) {
  if (event.data.TYPE === "KOMPASSIFY_BOOT_LOADER_IS_READY") {
    // Do your stuff here
  }
});

Launching a tour programmatically

You can launch your tours programmatically with a JavaScript snippet by calling the function kompassifyLaunchTour:

window.kompassifyLaunchTour(tourUuid, startIndex, skipIfWasFinished);

Or you can use window.postMessage:

window.postMessage({
  TYPE: "KOMPASSIFY_PLAYER_LAUNCH_TOUR",
  tourUuid: tourUuid,
  startIndex: startIndex,
  skipIfWasFinished: skipIfWasFinished,
});

Parameters

Property	Type	Description
tourUuid	String	The UUID of the tour you want to launch. You can retrieve it from the tour dashboard by clicking Copy Uuid.
startIndex	Number	The index from where the tour will start. 0 means the tour starts from the first step, 1 from the second step, etc.
skipIfWasFinished	Boolean	If set to true, Kompassify will not launch the tour if it was skipped or finished before.

Listening to tour events

You can monitor your tour progression by listening to the following events:

window.addEventListener('message', function (event) {
  if (event.data.TYPE === 'KOMPASSIFY_TOUR_STARTED') {
    // the tour has started
    console.log('The tour with uuid ', event.data.tourUuid, ' has started');
  }

  if (event.data.TYPE === 'KOMPASSIFY_TOUR_ENDED') {
    // the tour has ended
    console.log('The tour with uuid ', event.data.tourUuid, ' has ended');
  }

  if (event.data.TYPE === 'KOMPASSIFY_TOUR_STEP') {
    // Tour step played
    console.log('The Step Number', event.data.stepIndex, 'of the tour with the uuid', event.data.tourUuid, ' has been played');
  }

  if (event.data.TYPE === 'KOMPASSIFY_TOUR_SKIPPED') {
    // the tour has been skipped
    console.log('The tour with uuid ', event.data.tourUuid, ' has been skipped');
  }
});