1

I am creating a tour using Hopscotch and I would like to create the ability for the user to take or exit a tour of the page once they hit it.

I am trying to create a onClose function but I am getting stuck. 

var tour = {
   id: "businesstour-hopscotch",
   steps: [
{
  title: "Welcome",
  content: "This is the new business profile page, click next to have a quick tour.",
  target: document.querySelector('#companyname'),
  placement: "right",
  xOffset: -380,
  yOffset: 52,
  onClose: function() {
    window.location = '/';
  }
},

etc etc and it's not working. Not showing a button to end the tour either. Any ideas would help!

nd1990
  • 11
  • 1

1 Answers1

0

From my understanding of the documentation the onClose definition is a 'Tour Option' and should be declared like so, instead of inside the step:

var tour = {
   id: "businesstour-hopscotch",
   onClose: function() {
       window.location = '/';
   },
   steps: [{
       title: "Welcome",
       content: "This is the new business profile page, click next to have a quick tour.",
       target: document.querySelector('#companyname'),
       placement: "right",
       xOffset: -380,
       yOffset: 52
     }]
};

I am initialising mine like this which works for the user clicking on the 'x' at the top right of the tour. However, I am not seeing this event triggered when the user clicks the 'Done' button on the last step in the tour.

mgilberties
  • 434
  • 4
  • 13
  • For that you should also add: onEnd: function() { hopscotch.endTour(true); window.location = '/'; }, just after the onClose definition. – Cninroh May 17 '18 at 08:50