Introduction

Tour.JS is a javascript library for guiding users through your app. Easily create advanced tours with text, links, buttons and custom scripts! Customize the tour the way you want!

Download Tour.JS
Open GitHub

Installation

To get started with Tour.JS, you just need to include Tour.JS, jQuery and a tour theme to your project.

                
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

                
<script src="https://Bastiaan225.github.io/TourJS/frameworks/Tour/tour.js"></script>

Themes

After you have included the library, you must include one of the tour themes.

Default

                
<link rel="stylesheet" href="https://Bastiaan225.github.io/TourJS/frameworks/Tour/tour-default.css">

Dark

                
<link rel="stylesheet" href="https://Bastiaan225.github.io/TourJS/frameworks/Tour/tour-dark.css">

Your first tour

It is very easy to create new tours and customize them the way you want.

Create a tour

First, you have to create a tour. You have to give the tour a name. You can create as many tours as you like.

                
const tour = new Tour("Name");

Create steps

After you have created a tour, you can create steps. You can create as many steps as you like. You also have to give each step a name. Each step has to have a title, text, hook and buttons. Timer, links, onShow and onHide are optional.

Object field names:
Title: Title of the step.
Text: The text you want to show to your users.
Hook: The tour container will attach to the element you have specified in hook.
Timer: Set an amount of time before the next step will show.
onShow: Execute a custom function when the container appears.
onHide: Execute a custom function when the container disappears.
Buttons: An array of objects with both text and an action. The action can be any Javascript function you want, or a tour method.
Links: An array of objects with both text and a href.

Button actions:
tour.next(): Next step.
tour.previous(): Previous step.
tour.stop(): Stop the tour.
tour.pause(): Pause the tour, the container will be invisible.
tour.resume(): The tour will be resumed.
You can also create your own functions and add them as an action.

                
tour.addStep("first", {
    title: "The Beginning",
    text: "Hello, welcome to the tour! In this container you can explain 
    the user what he or she can do.",
    hook: ".container",
    buttons: [
        {
            text: "Stop",
            action: "tour.stop()"
        },
        {
            text: "Start",
            action: "tour.next()"
        }
    ]
});

The following example has two buttons a link, a timer and an onShow function. When the container appears, the custom function will run. After five seconds the next step will appear and the onHide function will be executed.

                
tour.addStep('userInfo', {
    title: "User Info",
    text: "In this container you can explain the user what he or she can do.",
    hook: ".user_info",
    timer: 5000,
    onShow: function() {
        // Custom Function
    },
    onHide: function() {
        // Custom Function
    },
    buttons: [
        {
            text: "Previous",
            action: "tour.previous()"
        },
        {
            text: "Next",
            action: "tour.next()"
        }
    ],
    links: [
        {
            text: "More info?",
            href: "info.html"
        }
    ]
});

Options

Tour.JS provides a couple of options to customize the experience.

tour.setScroll(true | false): If set to true, the browser will scroll to the tour container when the hook is not visible.

Styling

It is also possible to style your tour container the way you want.

The following properties you can style:
TitleBackground: Change the background color of the title container.
Background: Change the background of the text container
AccentColor: Change the accent color
BorderRadius: Change the border radius of the tour container

                
tour.style({
    titleBackground: "#E0E0E0",
    background: "#F3F3F3",
    accentColor: "#0EA3C4",
    borderRadius: "5px"
});

You can also target the step name in CSS and edit it that way or create your own tour theme.

                
#step-name {
    background-color: #aa3737;
}

#step-name p, #step-name h3 {
    color: white;
}

#step-name .titleContainer, #step-name .tour-arrow {
    background-color: #862020;
}

#step-name button {
    background-color: white;
    color: #aa3737;
}

#step-name a {
    color: white;
}

Start

After you have created all the steps and configured the tour, you can start the tour.

                
tour.start();