Add Product Tours (3rd party) in your Visual Apps

Product tours are easy ways to introduce new features and/or guide a user through a self-service app. Here’s how you can create a product tour for your visual app. The demo uses Bootstraptour.

demo product tour

Add the libs

Configure the following libs in your app-flow.json (configure the libs mentioned here. Note: jQuery is already loaded by VB runtime so no need to configure it separately).

"requirejs": {
    "paths": {
      "bs-tour-js": "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.min",
      "bs-tour-css": "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.min"
    }
  }

Load the libs

Adding isn’t enough, you need to load it just before you need it. In my case it is the default landing page.

define(['bs-tour-js', 'css!bs-tour-css'], function() {
  'use strict';
   class PageModule {}
   return PageModule;
});

Create the tour

I created the tour in the constructor of my landing page’ PageModule. I am using ES6 class instead of function, but that should work too.

class PageModule {
constructor() {
      this.tour = new window.Tour({
        steps: [{
            element: "#drawerToggleButton",
            title: "Title of my step",
            content: "Content of my step"
          },
          {
            element: "#form",
            title: "Title of my step",
            content: "Content of my step"
          }
        ]
      });
// Initialize the tour
      this.tour.init();
    }
  };

Start tour

Create a function in your page module to start the tour.

startTour() {
      this.tour.start();
    }

Versions

bootstraptour: 0.12.0

VB: 20.10.0

JET: 9.0.0