BloX Template: Guided Tour/Help

[intapiuser]

Question: Is there a way to set up tours or help bubbles in your app?

Solution: Here is the link to the Github, https://github.com/shipshapecode/shepherd for Shepherd.js. iIt s a Javascript library that can help with the solution. This is how we set up the template to pull in the library. The first link is the CSS that will control the style of the bubbles, and the second is the javascript functions that will be called.

{
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": false,
    "carouselAnimation": {
        "delay": 0,
        "showButtons": false
    },
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.8.1/css/shepherd-theme-arrows-fix.css'/>"
                },
                {
                    "type": "TextBlock",
                    "text": "<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/shepherd.js'></script>"
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Shepherd",
            "title": "Start Tour"
        }
    ]
}

Once this template is saved, make a custom action. Be sure to name it shepherd or change the type above to match whatever you named your action.

Add this to the custom action, this is the code to initialize the tour and add the steps.

const tour = new Shepherd.Tour({
    useModalOverlay: true,
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    classes: 'class-1 class-2',
    scrollTo: { behavior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  title: 'Widget Title',
  text: `Creating a Shepherd tour is easy.
  Just create a \`Tour\` instance, and add as many steps as you want.
  <br><br>
  This is the name of the dashboard.`,
  attachTo: {
    element: 'div.transput-caption.editable',
    on: 'bottom'
  },
  buttons: [
    {
      action() {
        return this.complete();
      },
      classes: 'shepherd-button-secondary',
      text: 'skip'
    },
    {
      action() {
        return this.back();
      },
      classes: 'shepherd-button-secondary',
      text: 'Back'
    },
    {
      action() {
        return this.next();
      },
      text: 'Next'
    }
  ],
  id: 'creating'
});

tour.addStep({
  title: 'Adding a widget',
  text: `Clicking this button will add a widget to the dashboard. Try it.`,
  attachTo: {
    element: '.btn.btn--new-widget.js--btn-action.js--btn-new-widget',
    on: 'bottom'
  },
  advanceOn: '.uc-ok click',
  buttons: [
    {
      action() {
        return this.back();
      },
      classes: 'shepherd-button-secondary',
      text: 'Back'
    },
    {
      action() {
        return this.next();
      },
      text: 'Next'
    }
  ],
  id: 'creating3'
});

tour.addStep({
  title: 'Filter',
  text: `This third step will hightlight your first filter, but if you haven't
  added one yet it will just center on the screen.`,
  attachTo: {
    element: '.ew-item',
    on: 'bottom'
  },
  buttons: [
    {
      action() {
        return this.back();
      },
      classes: 'shepherd-button-secondary',
      text: 'Back'
    },
    {
      action() {
        return this.next();
      },
      text: 'Next'
    }
  ],
  id: 'creating4'
});

tour.start();

After saving that action you should have a button inside a BloX widget, and clicking that should start the tour.