how to hide hopscotch tour popup page reload?

Posted on 2016-08-29
Medium Priority
Last Modified: 2016-09-02
I am using hopscotch tour, i want hide hopscotch tour after page reload and not showing returning users is it possible? Please help me.
below my code.

/* globals hopscotch: false */

/* ============ */
/* ============ */

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
    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

/* ========== */
/* ========== */
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!
  else {
    // Looking at the page for the first(?) time.
    setTimeout(function() {
        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) {

Open in new window

Question by:Johnson Thomas
1 Comment
LVL 62

Accepted Solution

Julian Hansen earned 2000 total points
ID: 41775905
Refer to this PAQ they might have what you are looking for.

The PAQ discusses how to conditionally hide content when reloading a page


Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
AngularJS web development a very simple procedure. So, to put it, in short, AngularJS’ stand out features are – Two-way data binding, MVC structure, directives, templates, dependency injections and testing.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question