AutSPACEs icon indicating copy to clipboard operation
AutSPACEs copied to clipboard

Add an example tour using Shepherd.js

Open llewelld opened this issue 10 months ago • 7 comments

Adds an example tour using Shepherd.js and FloatingUI, to test out the capabilities of Shepherd.js. The content and coding is just for testing: in no way final!

For Shepherd.js, see: https://shepherdjs.dev/

My immediate impression is that a nice aspect of Shepherd.js is that all of the tour functionality can be added using Javascript and so can be kept entirely separate from the main HTML and Javascript for the page. The only changes I needed to make to the page itself were to add ids to elements used in the tour that didn't already have them.

This means that once the user has finished the tutorial, we can easily disentangle it from the page and potentially even serve them pages that don't include it at all; removing the additional overhead.

This is just for testing and comparison. I'll put together an equivalent really simple tour using https://tourguidejs.com/ so we can compare the two.

Contributes to #535.

llewelld avatar Aug 04 '23 17:08 llewelld