TourGuide Icon TourGuide JS
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

Install $ 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

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