Mixing Intro.js and WAB, live example

02-02-2018 07:21 AM
Labels (1)

Mixing Intro.js and WAB, live example

Hi all, 

Just created an application that integrates Intro.js on Web App Builder.

Visit my github   

I build Esri widgets without any -economic- interest, if you find it useful for your projects, you can buy me a coffee  


Don't hesitate to contact me if you need some custom developments: biotekgis@gmail.com


Labels (1)
Occasional Contributor

Your live example has a problem.

Occasional Contributor

I meant to say it has a problem in Internet Explorer, but not Chrome.

Occasional Contributor

Well, I have never used IE. There are a few code lines of ES6, so if you want to use IE, I recommend you use Babel.js: is a great tool that lets you transpile your ES6 code into ES5.



Occasional Contributor II

Hi Adri,

I am trying intro.js in my WAB 2.7. But some how it did not work with me. I follow the instruction on github page but somehow I got this error. I am using Chrome.

WidgetManager.js?wab_dv=2.7:536 fail to startup widget HeaderController. ReferenceError: Button is not defined
    at Object.IntroJS (http://MyComputer:3344/webappbuilder/apps/30/themes/JewelryBoxTheme/widgets/HeaderController/Widget.js?wab_dv=2.7:128:3)
    at Object.startup (http://MyComputer:3344/webappbuilder/apps/30/themes/JewelryBoxTheme/widgets/HeaderController/Widget.js?wab_dv=2.7:124:9)
    at Object.advice (https://jsdev.arcgis.com/3.23/init.js:119:313)
    at Object.c [as startup] (https://jsdev.arcgis.com/3.23/init.js:119:103)
    at Object.openWidget (http://MyComputer:3344/webappbuilder/apps/30/jimu.js/WidgetManager.js?wab_dv=2.7:534:18)
    at Object.<anonymous> (http://MyComputer:3344/webappbuilder/apps/30/jimu.js/layoutManagers/BaseLayoutManager.js?wab_dv=2.7:167:32)
    at https://jsdev.arcgis.com/3.23/init.js:63:337
    at h (https://jsdev.arcgis.com/3.23/init.js:107:277)
    at q (https://jsdev.arcgis.com/3.23/init.js:107:203)
    at d.resolve (https://jsdev.arcgis.com/3.23/init.js:109:280)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I really appreciate your help.

Occasional Contributor

Hi Irfan,

First of all, you have to import the Dojo Button class, this way your app knows what is 'Button'. 

You can follow my example here. (line 37 and 42).

If you are going to use it with IE use this function (JS ES5): 

IntroJS: function(){
  new Button({
    label: "INTRO JS",
    style: "position:absolute;top:5px;left:400px;",
    onClick: function(){
 }, this.executeIntroJS).startup();



by Anonymous User
Not applicable

Suggestion- make it a hidden widget that automatically opens. Second, a button to "never show again" like the Splash screen widget.  I will probably use this for our production property viewer (and credit you in comments and documentation of course, along with other folks like Robert and Jeremie here who I am integrating widgets from)- great work!!

Version history
Last update:
‎02-02-2018 07:21 AM
Updated by: