cancel
Showing results for 
Search instead for 
Did you mean: 
Community_Admin
Community Team Member
Community Team Member

Question

Is there a way to sett up tours or help bubbles for your the app?

Answer

Here is the link to the Github, https://github.com/shipshapecode/shepherd for Shepherd.js. It'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/shepherd.js@5.0.1/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.

Community_Admin_0-1634631856246.png

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.

Community_Admin_1-1634631911801.png
Version history
Last update:
‎10-19-2021 01:26 AM
Updated by:
Contributors
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Need additional support?:

Community Support Request