json-to-introjs

json-to-introjs (JTI)

Make use of the Tour API of Introjs via a single JSON config.

Setup

Download

• Github: json-to-introjs.zip

Usage

import jsonToIntrojs from "json-to-introjs";
window.onload = () => {
  let JTI = new jsonToIntrojs(<path_to_json>);
}

If you want to have full control over the way to launch an Intro :

• Don't use any of these options in your json config file : "autoplay" | "button"
• Trigger the Intro whenever you want by calling (after JTI has been initialized) :

JTI.start() 

Json config

A sample of the json structure to follow can be found here

JTI

Infos about JTI default values : defaultOptions / defaultTheme These options take effect on all intros (futur implementation might allow you to be more specific)

Options

key	values	description
autoplay	boolean	Automaticaly start intro if there's one on this page
numbering	boolean	Prefix each step's title with a number
button	string	A css selector for the button that will be used to start an Intro

Theme

key	values	description
color	string (any valid css color)	Sets the color used for Introjs

Introjs

Options

List of available Tour API options : introjs doc.

These options are global, meaning that they will apply to all Intros

Intros

List (array) of Intros. Each Intro is composed of the following :

key	values	required	description
element	string	yes	A unique css selector that identifies the container for this intro
steps	array	yes	Array of Step objects
options	object	no	Same as options mentioned above, but only apply to a specific Intro

Step

List of available Step options : introjs doc

Those options should be written without data- and in camelCase (eg. "data-scroll-to" becomes "scrollTo")

key	values	required	description
element	string	no	A css selector of the element to focus. If none specified, it will appear on the center of the screen