Skip to main content

Progress Bar

Control and listen to progress bar behavior via the Kompassify Player API.

Progress bar is ready event​

It is highly recommended to wait for the progress bar to be fully loaded before calling the rest of the API functions.

The event KOMPASSIFY_PROGRESS_BAR_IS_READY is dispatched when the progress bar is loaded and ready to be used.

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

Updating the active step​

You can set the step where your progress bar should be by calling:

window.kompassifyProgressBar.updateProgressIdx(activeIndex);

Or via window.postMessage:

window.postMessage({
  TYPE: "KOMPASSIFY_PROGRESS_UPDATE_IDX",
  activeIndex: activeIndex
});

Parameters​

PropertyTypeDescription
activeIndexNumberThe index of the currently active step. You can only set an index greater than the previous one. When the index reaches the last step, the progress bar will not be visible anymore.

Start a progress bar​

You can start a specific progress bar by calling:

window.kompassifyProgressBar.startProgressPlayer(progressBarUuid);

Parameters​

PropertyTypeDescription
progressBarUuidStringThe UUID of the progress bar you want to start. You can find it in the URL of the dashboard after selecting a progress bar.

Listening to progress bar CTA button events​

A message event is dispatched when a progress bar CTA button is clicked:

window.addEventListener('message', function (event) {
  if (event.data.TYPE === "KOMPASSIFY_PROGRESS_CTA_CLICKED") {
    // A CTA button was clicked
    console.log('The button in the step ', event.data.activeIndex, ' was clicked.');
  }
});

Listening to progress bar Next and Previous button events​

Message events are dispatched when the progress bar next and previous buttons are clicked:

window.addEventListener('message', function (event) {
  if (event.data.TYPE === "KOMPASSIFY_PROGRESS_NEXT_CLICKED") {
    // Next button was clicked
    console.log('The button next is clicked the next step index will be', event.data.progressIdx);
  }
});

window.addEventListener('message', function (event) {
  if (event.data.TYPE === "KOMPASSIFY_PROGRESS_PREVIOUS_CLICKED") {
    // Previous button was clicked
    console.log('The button previous is clicked the next step index will be', event.data.progressIdx);
  }
});