Docs
Quick start
Get started with creating a tour.
Intro
#TourGuide JS was built as an experimental library for creating customisable user tours and on-boarding journeys for SPA's. Hopefully it comes in useful for other projects. There are some advanced usage/edge case gotchas' that I will be working to resolve in future releases. Contribution is welcome.
A very basic example of TourGuide JS can be found here https://codepen.io/sjmc11/pen/NWzaWxw.
A a more in-depth example that leverages events in a registration flow can be found here https://codepen.io/sjmc11/pen/MWXrVWo.
Installation
#The TourGuide JS library can be installed via NPM or CDN. Both provide the same level of functionality but may differ in IDE integration.
💡 For better IDE integration NPM installation is recommended.
NPM
Usage
#Include in your project
import "@sjmc11/tourguidejs/src/scss/tour.scss" // Styles
import {TourGuideClient} from "@sjmc11/tourguidejs/src/Tour" // JS
Add the [data-tg-tour] attribute to elements that you want to include in your tour. This attribute should contain the relevant text for the tour guide step.
💡 Additionally you can define tour steps in TourGuideStep[] format.
Declare steps (data attribute method)
<div data-tg-tour="My first tour"> ... </div>
// Additional attributes can be added to elements.
Creating a tour
#To create a tour, you must start with creating a TourGuideClient.
ℹ️ The only difference between CDN & NPM usage is the creation of a tourguide client. Contribution is welcome on how the make initialisation consistent.
ℹ️ ️Do not initialise multiple TourGuideClients.
const tg = new TourGuideClient({} : TourGuideOptions)
- If no options are passed, default values are used.
- If no steps are provided, you can use addSteps() at a later stage or rely on the data attribute method of declaring tour steps.
Next
Tour steps