{{< intro >}}

Description#

The intro shortcode allows to use the intro.js library to generate a demo intro.

Configuration of intro.js#

The content of the shortcode sets the configuration in JSON format of the intro. In addition, parameters have been added into the theme to allow simplified and adapted settings.

JSON configuration of intro shortcode content
{
  "[...]",
  "[Standard intro.js options]": "https://introjs.com/docs/intro/options (See default theme options list below)",
  "[...]",
  "onbeforeexit": "JavaScript code to execute before exiting the intro (linked to the standard onbeforeexit API of intro.js)",
  "onexit": "JavaScript code to execute when exiting the intro (linked to the standard onexit API of intro.js)",
  "oncomplete": "JavaScript code to execute when completing the intro (linked to the standard oncomplete API of intro.js)",
  "steps": [
    {
      "title": "Step title (linked to the standard title option of intro.js)",
      "element": "Element to highlight (linked to the standard element option of intro.js (⚠ only selection by id of an element is available))",
      "intro": "Step content (linked to the standard intro option of intro.js)",
      "position": "Helper step position (linked to the standard position option of intro.js)",
      "onchange": "JavaScript code to execute when changing the step (linked to the standard onchange API of intro.js)",
      "onbeforechange": "JavaScript code to execute before changing the step (linked to the standard onbeforechange API of intro.js)",
      "onafterchange": "JavaScript code to execute after changing the step (linked to the standard onafterchange API of intro.js)",
      "triggeronly": "Step triggers list allowing execution of the step (See step triggers list below)",
      "triggerexcept": "Step triggers list not allowing execution of the step (See step triggers list below)"
    }]
}

Step triggers#

Step triggers allow to execute or not a step of the intro.
If one of the triggers is defined in the step and is also active on the website, then the step is executed or not depending on the configuration.

NameDescription
desktopEnabled if the window is greater than or equal to 1024 pixels wide
touchEnabled if the window is less than 1024 pixels wide and greater than or equal to 769 pixels wide
mobileEnabled if the window is less than 769 pixels wide
hoverEnabled if device allows item hover (by means of pointing devices)
nohoverEnabled if the device does not allow item hovering (touch devices)

Default options#

Theme default intro.js options
const themeCommonOptions = {
  nextLabel:          {{i18n "intro_nextlabel"}},
  prevLabel:          {{i18n "intro_prevlabel"}},
  skipLabel:          {{i18n "intro_skiplabel"}},
  doneLabel:          {{i18n "intro_donelabel"}},
  hidePrev:           false,
  hideNext:           false,
  nextToDone:         true,
  exitOnEsc:          true,
  exitOnOverlayClick: true,
  showStepNumbers:    false,
  keyboardNavigation: true,
  showButtons:        true,
  showBullets:        true,
  showProgress:       true,
  scrollToElement:    true,
  scrollTo:           "element",
  scrollPadding:      30,
  overlayOpacity:     0.8,
  disableInteraction: true

Parameters#

NameType(named/positional)Description
introtitlenamedIntro launch button title.
NB: If not specified, the title is a default text defined by the theme.
idnamedIdentifier given to the global HTML element of the intro launch button.
NB: If not specified, the identifier is generated by default by the theme and incremented with each new intro shortcode defined in the page (intro-X).

Examples#

MarkdownRendering
{{</* intro
  introtitle="I'm an intro"
  id="introTest"
*/>}}
{
  "showBullets": false,
  "showStepNumbers": true,
  "onexit": "console.log(\"I'm exiting the intro\");",
  "oncomplete": "console.log(\"I'm exiting the intro after completing it\");",
  "steps": [
    {
      "title": "Step 1",
      "intro": "I'm step 1 for everyone",
      "onchange": "console.log(\"I'm entering step 1 for everyone\");"
    },{
      "title": "Step 2",
      "intro": "I'm step 2 for the desktop trigger",
      "onchange": "console.log(\"I'm entering step 2 for the desktop trigger\");",
      "triggeronly": ["desktop"]
    },{
      "title": "Step 2",
      "intro": "I'm step 2 for the mobile and touch triggers",
      "onchange": "console.log(\"I'm entering step 2 for the mobile and touch triggers\");",
      "triggeronly": ["mobile","touch"]
    },{
      "title": "Step 3",
      "intro": "I'm step 3 for everyone except the hover trigger",
      "onchange": "console.log(\"I'm entering step 3 for everyone except the hover trigger\");",
      "triggerexcept": ["hover"]
    },{
      "title": "Step 3",
      "intro": "I'm step 3 for everyone except the nohover trigger",
      "onchange": "console.log(\"I'm entering step 3 for everyone except the nohover trigger\");",
      "triggerexcept": ["nohover"]
    },{
      "title": "Step 4",
      "element": "#globalLogo",
      "intro": "I'm step 4 for everyone on the #globalLogo element",
      "onchange": "console.log(\"I'm entering step 4 for everyone on the #globalLogo element\");"
    },{
      "title": "Step 5",
      "element": "#globalLogo",
      "intro": "I'm step 5 for everyone on the #globalLogo element on right position",
      "position": "right",
      "onchange": "console.log(\"I'm entering step 5 for everyone on the #globalLogo element on right position\");"
    }]
}
{{</* /intro */>}}
I'm an intro