BloX Template: Guided Tour/Help
After much scouring of the internet I found this lovely library, Shepherd.js is a Javascript library that makes setting up tours or help bubbles for your web apps easy and quick. Here is the link to their Github, https://github.com/shipshapecode/shepherd. This is how I set up my 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.
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.
-
Nicely done Delsaran Bigglesworth!
Thanks for sharing.
A small tip - move the logic of the custom Blox action into a plugin so the action will be served from the prism (or any other global refereance).
That way you can maintain the code more easily and also move the script and the css loading to the app level to make sure that it will be loaded once (and to have a cleaner BloX widget configuration.
Feel free to reach out if you have any questions
Ravid
Please sign in to leave a comment.
Comments
4 comments