Run once

Once the tour has been completed you can use a cookie, localstorage or a database to save this and prevent that the tour will be available for the second time.

For this example we have used localstorage.

 

More help: Run once

Trigger(s)

Run power tour (trigger) Reset localstorage (trigger)

Example blocks

Demo box 1

(hookTo)

Demo box 2

(hookTo)

Demo box 3

(hookTo)

Source code

Install | Documentation 
<!-- PowerTour core stylesheet(required) -->        
<link rel="stylesheet" href="css/powertour/powertour.3.2.0.css"/>

<!-- PowerTour styling stylesheet (optional) -->
<link rel="stylesheet" href="css/powertour/powertour-style-clean.css"/>

<!-- CSS3 animations stylesheet(needed for animations) -->
<link rel="stylesheet" href="css/powertour/animate.min.css"/>

<!-- jQuery core (required) -->
<script src="js/assets/jquery-1.12.3.min.js"></script>

<!-- PowerTour plugin (required) -->
<script src="js/powertour/powertour.lite.3.1.0.min.js"></script>


Setup | Documentation 
$.powerTour({
    tours : [
        {
            trigger            : '#powertour-demo-trigger-id',
            startWith          : 1,
            easyCancel         : true,
            escKeyCancel       : true,
            scrollHorizontal   : false,
            keyboardNavigation : true,
            loopTour           : false,
            highlightStartSpeed: 200,
            highlightEndSpeed  : 200,
            onStartTour        : function(ui){ },
            onEndTour          : function(ui){						
                
                // check if tour has been completed and not 
                // has been canceled during the tour
                if(ui.endType != 'cancel'){
                
                    // hide the trigger
                    $('#powertour-demo-trigger-id').hide();
    
                    // show reset button(demo)
                    $('#reset-key').show();
                    
                    // if tour ends set value to prevent 
                    localStorage.setItem('run-tour-localstorage','no'); 
                     
                }
                
            },	
            onProgress         : function(ui){ },
            steps : [
                  {
                      hookTo          : '#powertour-demo-box-1',
                      content         : '#step-id-1',
                      width           : 400,
                      position        : 'bm',
                      offsetY         : 20,
                      offsetX         : 0,
                      fxIn            : 'flipInX',
                      fxOut           : 'bounceOutLeft',
                      showStepDelay   : 0,
                      center          : 'step',
                      scrollSpeed     : 400,
                      scrollEasing    : 'swing',
                      scrollDelay     : 0,
                      highlight       : false,
                      keepHighlighted : false,
                      keepVisible     : false,
                      onShowStep      : function(ui){},
                      onHideStep      : function(ui){ }
                  },
                  {
                      hookTo          : '#powertour-demo-box-2',
                      content         : '#step-id-2',
                      width           : 300,
                      position        : 'lt',
                      offsetY         : 0,
                      offsetX         : 20,
                      fxIn            : 'fadeIn',
                      fxOut           : 'fadeOut',
                      showStepDelay   : 0,
                      center          : 'step',
                      scrollSpeed     : 400,
                      scrollEasing    : 'swing',
                      scrollDelay     : 0,
                      highlight       : true,
                      keepHighlighted : false,
                      keepVisible     : false,
                      onShowStep      : function(ui){},
                      onHideStep      : function(ui){ }
                  },
                  {
                      hookTo          : '#powertour-demo-box-3',
                      content         : '#step-id-3',
                      width           : 400,
                      position        : 'tr',
                      offsetY         : -80,
                      offsetX         : 40,
                      fxIn            : 'rotateIn',
                      fxOut           : 'rotateOut',
                      showStepDelay   : 0,
                      center          : 'step',
                      scrollSpeed     : 400,
                      scrollEasing    : 'swing',
                      scrollDelay     : 0,
                      highlight       : false,
                      keepHighlighted : false,
                      keepVisible     : false,
                      onShowStep      : function(ui){},
                      onHideStep      : function(ui){ }
                  }		
            ]
        }
    ]
});


Trigger(s) | Documentation 
<a href="#" id="powertour-demo-trigger-id">Run Power Tour</a>


Steps | Documentation 
<div class="single-step" id="step-id-1">
    <h3>Step one</h3>
    <p>This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.</p>
    <br/>
    <a href="#" data-powertour-action="next">Next step...</a>
</div>

<div class="single-step" id="step-id-2">
    <h3>Step two</h3>
    <p>This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.</p>
    <br/>
    <a href="#" data-powertour-action="prev">Prev step</a>
    <a href="#" data-powertour-action="next" style="float:right">Next step</a>
</div>

<div class="single-step" id="step-id-3">
    <h3>Step three</h3>
    <p>This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.</p>
    <br/>
    <a href="#" data-powertour-action="prev">Prev step...</a>
    <a href="#" data-powertour-action="stop" style="float:right">End tour</a>
</div>


Complete 
<html>
<head>       
        
    <!-- PowerTour core stylesheet(required) -->        
    <link rel="stylesheet" href="css/powertour/powertour.3.2.0.css"/>
    
    <!-- PowerTour styling stylesheet (optional) -->
    <link rel="stylesheet" href="css/powertour/powertour-style-clean.css"/>
    
    <!-- CSS3 animations stylesheet(needed for animations) -->
    <link rel="stylesheet" href="css/powertour/animate.min.css"/>
    
    <!-- jQuery core (required) -->
    <script src="js/assets/jquery-1.12.3.min.js"></script>
    
    <!-- PowerTour plugin (required) -->
    <script src="js/powertour/powertour.lite.3.1.0.min.js"></script>

    <script>

    $(document).ready(function($){	
        
        // used for the demo to reset the key(demo)
        $('body').on('click','#reset-key',function(e){
            
            localStorage.removeItem("run-tour-localstorage");
            
            // reload the page
            location.reload(); 
            
        });
    
        // get the key
        var runtour = localStorage.getItem('run-tour-localstorage');
        
        // run if key has value 'no' (set inside the 'onFinish' callback function)
        if(runtour != 'no'){
            
            $.powerTour({
                tours : [
                    {
                        trigger            : '#powertour-demo-trigger-id',
                        startWith          : 1,
                        easyCancel         : true,
                        escKeyCancel       : true,
                        scrollHorizontal   : false,
                        keyboardNavigation : true,
                        loopTour           : false,
                        highlightStartSpeed: 200,
                        highlightEndSpeed  : 200,
                        onStartTour        : function(ui){ },
                        onEndTour          : function(ui){						
                            
                            // check if tour has been completed and not 
                            // has been canceled during the tour
                            if(ui.endType != 'cancel'){
                            
                                // hide the trigger
                                $('#powertour-demo-trigger-id').hide();
        
                                // show reset button(demo)
                                $('#reset-key').show();
                                
                                // if tour ends set value to prevent 
                                localStorage.setItem('run-tour-localstorage','no'); 
                                 
                            }
                            
                        },	
                        onProgress         : function(ui){ },
                        steps : [
                              {
                                  hookTo          : '#powertour-demo-box-1',
                                  content         : '#step-id-1',
                                  width           : 400,
                                  position        : 'bm',
                                  offsetY         : 20,
                                  offsetX         : 0,
                                  fxIn            : 'flipInX',
                                  fxOut           : 'bounceOutLeft',
                                  showStepDelay   : 0,
                                  center          : 'step',
                                  scrollSpeed     : 400,
                                  scrollEasing    : 'swing',
                                  scrollDelay     : 0,
                                  highlight       : false,
                                  keepHighlighted : false,
                                  keepVisible     : false,
                                  onShowStep      : function(ui){},
                                  onHideStep      : function(ui){ }
                              },
                              {
                                  hookTo          : '#powertour-demo-box-2',
                                  content         : '#step-id-2',
                                  width           : 300,
                                  position        : 'lt',
                                  offsetY         : 0,
                                  offsetX         : 20,
                                  fxIn            : 'fadeIn',
                                  fxOut           : 'fadeOut',
                                  showStepDelay   : 0,
                                  center          : 'step',
                                  scrollSpeed     : 400,
                                  scrollEasing    : 'swing',
                                  scrollDelay     : 0,
                                  highlight       : true,
                                  keepHighlighted : false,
                                  keepVisible     : false,
                                  onShowStep      : function(ui){},
                                  onHideStep      : function(ui){ }
                              },
                              {
                                  hookTo          : '#powertour-demo-box-3',
                                  content         : '#step-id-3',
                                  width           : 400,
                                  position        : 'tr',
                                  offsetY         : -80,
                                  offsetX         : 40,
                                  fxIn            : 'rotateIn',
                                  fxOut           : 'rotateOut',
                                  showStepDelay   : 0,
                                  center          : 'step',
                                  scrollSpeed     : 400,
                                  scrollEasing    : 'swing',
                                  scrollDelay     : 0,
                                  highlight       : false,
                                  keepHighlighted : false,
                                  keepVisible     : false,
                                  onShowStep      : function(ui){},
                                  onHideStep      : function(ui){ }
                              }		
                        ]
                    }
                ]
            });
            
        }else{
            
            // hide the trigger
            $('#powertour-demo-trigger-id').hide();
            
            // show reset button(demo)
            $('#reset-key').show();
            
        }
        
    });
    </script>

</head> 
<body> 

	<!-- trigger -->
    
	<a href="#" id="powertour-demo-trigger-id">Run Power Tour</a>
	<a href="#" id="reset-key">Reset localstorage</a>

	<!-- hookTo -->
    
    <div class="powertour-demo-box" id="powertour-demo-box-1">
        <p>Demo box 1</p>
        <span>(hookTo)</span>
    </div>    

    <div class="powertour-demo-box" id="powertour-demo-box-2">
        <p>Demo box 2</p>
        <span>(hookTo)</span>
    </div> 
     
    <div class="powertour-demo-box" id="powertour-demo-box-3">
        <p>Demo box 3</p>
        <span>(hookTo)</span>
    </div> 
    
    <!-- steps(content) --> 
    
    <div class="single-step" id="step-id-1">
        <h3>Step one</h3>
        <p>This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.</p>
        <br/>
        <a href="#" data-powertour-action="next">Next step...</a>
    </div>
    
    <div class="single-step" id="step-id-2">
        <h3>Step two</h3>
        <p>This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.</p>
        <br/>
        <a href="#" data-powertour-action="prev">Prev step</a>
        <a href="#" data-powertour-action="next" style="float:right">Next step</a>
    </div>
    
    <div class="single-step" id="step-id-3">
        <h3>Step three</h3>
        <p>This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.</p>
        <br/>
        <a href="#" data-powertour-action="prev">Prev step...</a>
        <a href="#" data-powertour-action="stop" style="float:right">End tour</a>
    </div>

</body> 
</html>

Step one

This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.


Next step...

Step two

This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.


Prev step Next step

Step three

This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.


Prev step... End tour