Docs

Events

Integrate your own behaviours when events occur.

Declaring events

Event methods can optionally return a promise if you would like to explicitly accept and reject events. By default, event methods are handled asynchronously so blocking functions will be waited on before continuing.


            const tg =  new TourGuideClient()
            

            tg.onFinish(async ()=>{
            // prevent showing alert if already finished tour
            if(!tg.isFinished()){
            alert('Tour complete, you are ready to use the application.')
            }
            })
            

            tg.start()

onFinish()

Accepts a function to perform before finishing the tour.

Triggered by clicking the 'finish' button displayed on the last tour step.


                tg.onFinish(()=>{
                return new Promise((resolve) => {
                if (confirm('Would you like to start the tour again?')) {
                // use refreshDialog() instead of visitStep() to avoid re-triggering events
                tg.activeStep = 0
                tg.refreshDialog()
                } else {
                return resolve(true)
                }
                })
                })

onBeforeExit()

Accepts a function to perform before a user exits the tour.

Triggered by clicking outside dialog, escape key or close button.


                tg.onBeforeExit(()=>{
                return new Promise((resolve, reject) => {
                if (confirm('Are you sure you want to close the tour?')) {
                return resolve(true)
                } else {
                return reject()
                }
                })
                })

onAfterExit()

Accepts a function to perform after the tour has been exited.

*Accepts but does not handle a promise based function as there is no more user interaction with the tour until re-started.


                tg.onAfterExit(()=>{
                console.info("The tour has closed")
                })

onBeforeStepChange()

Accepts a function to perform before a user changes tour step.


                tg.onBeforeStepChange(()=>{
                return new Promise((resolve, reject) => {
                if (confirm('Change tour step?')) {
                return resolve(true)
                } else {
                return reject()
                }
                })
                })

onAfterStepChange()

Accepts a function to perform after a user changes tour step.


                tg.onAfterStepChange(()=>{
                console.info("step change complete")
                })

Back

Options

Methods