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 |