Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 277
  • Last Modified:

Hopscotch product tours Popup Only Once Per User and not shown after page reload is it possible?

I use Hopscotch product tours on a front page and I'd like to show it only one per user and not shown after page reload. please check  below my code and attached code.
Any help is much appreciated! Thanks!

/* globals hopscotch: false */

/* ============ */
/* EXAMPLE TOUR */
/* ============ */


var tour = {
  id: 'hello-hopscotch',
  steps: [
    {
      target: 'MiddleContent_btndocuments',
      title: 'Welcome to Hopscotch!',
      content: 'Hey there! This is an example Hopscotch tour. There will be plenty of time to read documentation and sample code, but let\'s just take some time to see how Hopscotch actually works.',
      placement: 'bottom',
      arrowOffset: 60
    },
    {
      target:'Downloads',
      title: 'Where to begin',
      content: 'At the very least, you\'ll need to include these two files in your project to get started.',
      placement: 'right',
      yOffset: -20
    },
    {
      target: 'list-lenders',
      placement: 'bottom',
      title: 'Define and start your tour',
      content: 'Once you have Hopscotch on your page, you\'re ready to start making your tour! The biggest part of your tour definition will probably be the tour steps.'
    },
    {
      target: 'support',
      placement: 'bottom',
      title: 'Starting your tour',
      content: 'After you\'ve created your tour, pass it in to the startTour() method to start it.',
    },
    {
      target: 'login',
      placement: 'bottom',
      title: 'Basic step options',
      content: 'These are the most basic step options: <b>target</b>, <b>title</b>, <b>content</b>, and <b>placement</b>. For some steps, they may be all you need.',
    },
    {
      target: 'index',
      placement: 'bottom',
      title: 'Hopscotch API methods',
      content: 'Control your tour programmatically using these methods.',
    }
  ],
  showPrevButton: true,
  scrollTopMargin: 100
},

/* ========== */
/* TOUR SETUP */
/* ========== */
addClickListener = function(el, fn) {
  if (el.addEventListener) {
    el.addEventListener('click', fn, false);
  }
  else {
    el.attachEvent('onclick', fn);
  }
},

init = function() {
  var startBtnId = 'startTourBtn',
      calloutId = 'startTourCallout',
      mgr = hopscotch.getCalloutManager(),
      state = hopscotch.getState();

  if (state && state.indexOf('hello-hopscotch:') === 0) {
    // Already started the tour at some point!
    hopscotch.startTour(tour);
  }
  else {
    // Looking at the page for the first(?) time.
    setTimeout(function() {
      mgr.createCallout({
        id: calloutId,
        target: startBtnId,
        placement: 'left',
        title: 'Take an example tour',
        content: 'Start by taking an example tour to see Hopscotch in action!',
        yOffset: -20,
        arrowOffset: 20,
        width: 240
      });
    }, 100);
  }

  addClickListener(document.getElementById(startBtnId), function() {
    if (!hopscotch.isActive) {
      mgr.removeAllCallouts();
      hopscotch.startTour(tour);
    }

  });
 
  Modernizr.addTest('localstorage', function() {
    var mod = 'modernizr';
    try {
        localStorage.setItem(mod, mod);
        localStorage.removeItem(mod);
        return true;
    } catch(e) {
        return false;
    }
});
 
};
init();
hopscotch.js
0
Johnson Thomas
Asked:
Johnson Thomas
  • 3
  • 2
1 Solution
 
Julian HansenCommented:
The easiest way to do this is to use a cookie

before loading hopscotch check if the cookie exists - if it does not then proceed with initialising it and set the cookie.
If the cookie is found then simply ignore the init

Consider this code adapted from MDN
if (document.cookie.replace(/(?:(?:^|.*;\s*)showHopScotch\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
    // Do HopScotch init here
    init();
    document.cookie = "showHopScotch=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
}

Open in new window

0
 
Johnson ThomasSr Web DesignerAuthor Commented:
Thanks for you comments

i am the beginner of jquery i try to this code but after page reload callout popup is showing again.
0
 
Julian HansenCommented:
Please post code.
0
 
Johnson ThomasSr Web DesignerAuthor Commented:
Hi sir

In first i provided code and attached hopscotch.js also. please check below code

/* globals hopscotch: false */

/* ============ */
/* EXAMPLE TOUR */
/* ============ */



var tour = {
  id: 'hello-hopscotch',
  steps: [
    {
      target: 'MiddleContent_btndocuments',
      title: 'Welcome to Hopscotch!',
      content: 'Hey there! This is an example Hopscotch tour. There will be plenty of time to read documentation and sample code, but let\'s just take some time to see how Hopscotch actually works.',
      placement: 'bottom',
      arrowOffset: 60
    },
    {
      target:'Downloads',
      title: 'Where to begin',
      content: 'At the very least, you\'ll need to include these two files in your project to get started.',
      placement: 'right',
      yOffset: -20
    },
    {
      target: 'list-lenders',
      placement: 'bottom',
      title: 'Define and start your tour',
      content: 'Once you have Hopscotch on your page, you\'re ready to start making your tour! The biggest part of your tour definition will probably be the tour steps.'
    },
    {
      target: 'support',
      placement: 'bottom',
      title: 'Starting your tour',
      content: 'After you\'ve created your tour, pass it in to the startTour() method to start it.',
    },
    {
      target: 'login',
      placement: 'bottom',
      title: 'Basic step options',
      content: 'These are the most basic step options: <b>target</b>, <b>title</b>, <b>content</b>, and <b>placement</b>. For some steps, they may be all you need.',
    },
    {
      target: 'index',
      placement: 'bottom',
      title: 'Hopscotch API methods',
      content: 'Control your tour programmatically using these methods.',
    }
  ],
  showPrevButton: true,
  scrollTopMargin: 100
},

/* ========== */
/* TOUR SETUP */
/* ========== */
addClickListener = function(el, fn) {
  if (el.addEventListener) {
    el.addEventListener('click', fn, false);
  }
  else {
    el.attachEvent('onclick', fn);
  }
},

init = function() {
  var startBtnId = 'startTourBtn',
      calloutId = 'startTourCallout',
      mgr = hopscotch.getCalloutManager(),
      state = hopscotch.getState();

  if (state && state.indexOf('hello-hopscotch:') === 0) {
    // Already started the tour at some point!
    hopscotch.startTour(tour);
  }
  else {
    // Looking at the page for the first(?) time.
    setTimeout(function() {
      mgr.createCallout({
        id: calloutId,
        target: startBtnId,
        placement: 'left',
        title: 'Take an example tour',
        content: 'Start by taking an example tour to see Hopscotch in action!',
        yOffset: -20,
        arrowOffset: 20,
        width: 240
      });
    }, 100);
  }

  addClickListener(document.getElementById(startBtnId), function() {
    if (!hopscotch.isActive) {
      mgr.removeAllCallouts();
      hopscotch.startTour(tour);
    }

  });
 
  Modernizr.addTest('localstorage', function() {
    var mod = 'modernizr';
    try {
        localStorage.setItem(mod, mod);
        localStorage.removeItem(mod);
        return true;
    } catch(e) {
        return false;
    }
});  

};
if (document.cookie.replace(/(?:(?:^|.*;\s*)showHopScotch\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
    // Do HopScotch init here
    init();
    document.cookie = "showHopScotch=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
}
0
 
Julian HansenCommented:
I have put together a sample using the code from MDN - they have a more general solution in the form of an executeOnce function which you can read about here (https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#Example_5_Do_something_only_once_–_a_general_library)
The sample below shows a popup once.
Refresh the page to see it does not show again.
Click the link to reset
CSS
<style type="text/css">
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.75);
}
#popup {
	width: 50%;
	left: 25%;
	position: fixed;
	background: #fff;
	padding: 15px;
	height: 50%;
	top: 25%;
}
.close {
  background: url("images/close.png") no-repeat center center;
  display: block;
  height: 36px;
  opacity: 1;
  position: absolute;
  right: -18px;
  top: -18px;
  width: 36px;
}
</style>

Open in new window

HTML
     <p>Refresh the page to show that dialog does not show again</p>
	<p>Click <a href="#" class="reset">here</a> to reset and reload</a>
...
<div id="popup" style="display: none">
	<a href="#" class="close"></a>
	<h1>Sample Tour</h1>
	<p>Sample text to demonstrate concept</p>
</div>

Open in new window

JavaScript
<script src="http://code.jquery.com/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- START "jQuery Source" -->
<script>
//
// executeOnce sourced from MDN - https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#Example_5_Do_something_only_once_–_a_general_library
//
function executeOnce () {
  var argc = arguments.length, bImplGlob = typeof arguments[argc - 1] === "string";
  if (bImplGlob) { argc++; }
  if (argc < 3) { throw new TypeError("executeOnce - not enough arguments"); }
  var fExec = arguments[0], sKey = arguments[argc - 2];
  if (typeof fExec !== "function") { throw new TypeError("executeOnce - first argument must be a function"); }
  if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { throw new TypeError("executeOnce - invalid identifier"); }
  if (decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) === "1") { return false; }
  fExec.apply(argc > 3 ? arguments[1] : null, argc > 4 ? Array.prototype.slice.call(arguments, 2, argc - 2) : []);
  document.cookie = encodeURIComponent(sKey) + "=1; expires=Fri, 31 Dec 9999 23:59:59 GMT" + (bImplGlob || !arguments[argc - 1] ? "; path=/" : "");
  return true;
}

// COOKIE NAME TO USE 
var cookiename = 'showHopScotch';

// FUNCTION TO CALL ONCE
function init()
{
	var popup = $('#popup').remove();
	var overlay = $('<div/>').addClass('overlay');
	$('body').append(overlay);
	overlay.append(popup.show());
}

// INITIATE EXECUTE ONCE WITH CALLBACK (init) AND 
// COOKIE NAME
executeOnce(init, null, null, cookiename);

// SOME HELPER CALLBACKS TO CLOSE POPUP
// AND RESET PAGE
$(function() {
	$('.close').click(function(e){ 
		e.preventDefault();
		$('#popup, .overlay').remove();
	});
	
	$('.reset').click(function(e) {
		e.preventDefault();
		document.cookie = encodeURIComponent(cookiename) + '=0; expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/';
		location.reload();
	});
});
</script>

Open in new window

Working sample here
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now