TourGuide Icon TourGuide JS
TourGuide JS is on ProductHunt 🎉 TourGuideJS - A free and complete alternative to IntroJS | Product Hunt

Intuitive and customisable tours for user onboarding

TourGuide is a Javascript library written for creating user tours and on-boarding steps for your apps.

Install npm i @sjmc11/tourguidejs copy to clipboard
Copied 👍

Features

Rich API

TourGuide JS has a range of promise driven methods and callbacks to provide an enjoyable developer experience.

Framework agnostic

Written entirely in vanilla JS with TypeScript and usable in virtually any framework. Choose from CDN or NPM installation.

Typescript support

Type definitions help automatically detect available options in your IDE as well as ensure a type safe package for your projects.

1 Dependency

Tour positioning is supported by Floating-ui. It's required modules are pre-bundled into the TourGuide JS library.

Customizable

Define an array of options to create the perfect onboarding experience for your visitors, you can even use custom HTML in your tour content.

Open source

TourGuide JS is in early stages of development and contribution is welcome. Open license for both commercial and personal use.

Get started

Installation

$ npm i @sjmc11/tourguidejs

Usage

Include in your project

import "@sjmc11/tourguidejs/src/scss/tour.scss" // Styles import {TourGuideClient} from "@sjmc11/tourguidejs/src/Tour" // JS

Declare steps (data attribute method)

<div data-tg-tour="<span>My first tour</span>"> ... </div> // Additional attributes can be added to elements.

Initialization

const tg = new TourGuideClient({} : TourGuideOptions) // Optionally pass options and define steps in object form

Start

tg.start(group? : string) // Optionally pass 'group' to only include steps with matching [data-tg-group='<group_name>']

Customization

Available options
{ autoScroll: boolean = true// auto scroll to elements
autoScrollSmooth: boolean = true // auto scroll smooth
autoScrollOffset: number = 20// Offset from edge for smooth scroll
backdropClass: string = ""// additional css class for tour backdrop
backdropColor: string = "rgba(20,20,21,0.84)"// RGBA support only
targetPadding: number = 30// space around highlighted target in px
backdropAnimate: boolean = true// animate backdrop position & size
dialogClass: string = ""// additional css class for tour dialog
dialogZ: number = 999// z-index of dialog
dialogWidth: number = 0// width style property for dialog - recommended if loading images into content
dialogMaxWidth: number = 340// max-width style property for dialog
dialogAnimate: boolean = true// Animate dialog position & size
closeButton: boolean = true// show close button
nextLabel: string = "Next"// text for next button
prevLabel: string = "Back"// text for prev button
finishLabel: string = "Finish"// text for finish button
hidePrev: boolean = false// hide prev button
hideNext: boolean = false// hide next button
completeOnFinish: boolean = true// Set tour as finished in localStorage on finish
showStepDots: boolean = true// show the dots tour progress
stepDotsPlacement: 'footer' | 'body' = "footer"// show dots in dialog body/footer
showButtons: boolean = true// show next/prev buttons
showStepProgress: boolean = true// show `1/5` human-readable step progress
progressBar: string = ""// show progress bar under dialog header - pass a colour string to enable
keyboardControls: boolean =false// show next & prev arrows keys + esc key
exitOnEscape: boolean = true// Close the tour on escape key
exitOnClickOutside: boolean = true// Close the tour on backdrop click
rememberStep: boolean = true// open tour on last active step
debug: boolean = false// show console logging
steps: TourGuideStep[]// pre-define the tour steps
}