Code

Discussion on PageTour.js - A Lightweight Tour Composer To Guide Your Visitors And Onboard New Users

gamaki-studio

gamaki-studio supports this item

Supported

33 comments found.

Dear Sir,

I have purchased your product yesterday and I am trying it out today. Looks good, except that I always get an extra line when I call the tour guide. Kindly email me and I will send you a screenshot.

Thanks AT

Hi,

Can you please send me a link where I can see the tour in action.

Regards,

Gael

I have found the problem. It was using a class left which I had defined to have padding of 10px. Solved. Thanks

I have a problem with a hidden div. The tour will point to the left top corner of the page when the div is being hidden. Please advise how to disable the tour when the div is present, but hidden. Thanks

$(function(){ ‘use strict’; });

$('#ID_help').on('click', function(){
  $.ptJs('start');
});
$.ptJs({
  autoDestroy: false,
  autoStart: false,
  templateData: {
    'button-start': 'Start the tour',
    title: 'xxx'
  },
  steps: [
    {el: document,
      animation:{duration: 2},
      overlay:{mode: 'full'},
      templateData: {
        content: 'Before you start, please take a few moments to go through this tour guide'
      }
    },                         
    {el: '#boxmodfin',
      position:{location: 'bl'},
      templateData: {
        content: 'xxx.'
      }
    },
    {el: '#ID_submenu_FIN_pl',
      position:{location: 'bl'},
      templateData: {
        content: 'xx '
      }
    },  
      {el: '#boxmodpmn',
      position:{location: 'bl'},
      templateData: {
        content: 'This is where you can buy finished goods or raw materials.'
      }
    },     
         {el: '#ID_submenu_PMN_buyfg',
      position:{location: 'bl'},
      templateData: {
        content: 'xxx!'
      }
    },     
    {el: '#boxmodmkt',
      position:{location: 'bl'},
      templateData: {
        content: 'Manage your marketing campaign here.'
      }
    },       
    {el: document,
      animation: {duration: 2},
      overlay:{mode: 'full'},
      templateData: {
        content: 'Good Luck!!!!'
      }
    },    
    {
      animation:{
        enableOnClose: true,
        enableOnOpen: true,
        name: ['ptJs_bounce','ptJs_roll']
      },
    },
  ],
  onButtonFinishClick: function(event, data) {
    $.ptJs('end');
  },   
  onAfterOpen: function(event, data) {
    var id = data.step.ptJsStep('info').$element.attr('id');
    var isVisible = $(id).is(':visible');
    switch(id){
      case 'boxmodfin':
        $('#boxmodfin').click();
        break;
     case 'boxmodpmn':
        (isVisible  false) ? $.ptJs('next') : $('#boxmodpmn').click();
        break;   
    }
  },
});
===

Above is the code.

Note that it works because if have check visibility on onAfterOpen, but if I try to put onBeforeOpen, it will hang.

Of course, onAfterOpen is not ideal because i can see the animation shift to a top left corner before going to the next one, so I think it should be onBeforeOpen.

Just wish to follow up if there is a solution to the above. Thanks

Hi,

Please give me the code and also some DOM Elements because I can’t run it without ”#boxmodmkt, ...” elements.

Or do you have a public link to share ?

Thanks

Hi there, just a pre-sales question or two if I may—how easy would it be to incorporate pagetour.js into a WordPress website? Would you be able to provide us with some assistance/instructions after purchase? Kind regards Francois Wessels

Hi,

Like any other JQuery Plugin you need to have some skills to added to WP and then to build your tour. I plan to release a full PageTour.js Wordpress Plugin for this year but it’s not started yet.

Yes I can give you some advise on how to implement PageTour.js JQuery Plugin to WP. It’s quite simple.

Let me know,

Best regards,

Gael

azznice

azznice Purchased

Hi, I liked your product. I have a question. Can I disable close on overlay click ? I don’t want to allow user to close it until they fulfill specific requirements So is that possible?

Hi,

You can set the option “modal:true” to keep the popup open and set the option “showButtonClose:false” to hide the close button. Then you will have to manage the popup close in your code.

Best regards.

Hello. I hope you have great sales on this site. Follow me too :)

I am using the marker tour and I have it working in my wordpress site, but I don’t know how to get it to load when the page loads. I’d like the markers to simply appear and be waiting for the user to interact with them without them having to click a “Run Tour” button.

Hi,

You can use the “autoStart” option for that.

$.ptJs({
  autoStart: true
});

Where do I put that? Also, it’s using a very old jQuery library, which is not compatible with Avada theme. If I use any tour elements, my theme breaks. If I use the jQuery with the theme, the tour doesn’t work.

Hi,

At the creation of the tour ? Check the source code of all Demo you will see how it works : http://jquery-widget.pagetourjs.com/

Do you have any link to share where I can check your integration ?

Regarding the JQuery version, You can use new version without problem, you can even use CDN.

Cheers,

Gael

Hello,

I just purchased your plugin and have run into a major issue.

With multiple steps I cannot re-use an el as shown in the documentation with continue turned on.

So If I set step1 to el:document step2 to el:document

Step one loads, then step 2 fails and loads the modal backdrop only with no js error.

Please advise.

Dan Thompson Port Orchard WA.

Hi,

Do you have any link to share ? This see the issue ?

THanks

Hello!, I would like to know if the virtual tour can only be shown once a day or week? Thx

Hi,

Actually there is an option to show the tour once the user have played it.

For more complex logic, you have to implement on your own.

Gael

Hello.

Can it be like this:

I have query wizard step. which have like 4 steps with form on all step.

I want my client fill all required field, before he can click next on button, so disabled the button until required form is typed.

can it be done with this plugin ? thank

Hi,

Sorry for the late response.

Yes you can achieve that by implementing your own code on PageTour.js events (onBeforeOpen, onAfterOpen, ...)

Look at the documentation : http://jquery-widget.pagetourjs.com/ Regards

can you provide an example of using multiple instances with the instanceName option?

Hi,

Here is a basic example to run multiple PageTour.js instrance in parallel.


// No instance name
    $.ptJs({
      autoStart: true,
      position:{
        location: 'lm'
      },
      steps: [
        {
          el: document,
          templateData: {
            content: 'Hi there!'
          }
        }
      ],
       templateData: {
        title: 'My Default Tour'
      }
    });

    // With instance name
    $.ptJs({
      autoStart: true,
      instanceName: 'second-tour',
      position:{
        location: 'rm'
      },
      steps: [
        {
          el: document,
          templateData: {
            content: 'Hi there!'
          }
        }
      ],
       templateData: {
        title: 'My Second Tour'
      }
    });

Best regards,

Every time you enter the tour appears, it is possible that it is only for the first time? I mean somehow work with a cookie.

Is it compatible for cross-domain?

Hello,

Yes you can use the option “autoStartOnce” as described on the documentation : http://jquery-widget.pagetourjs.com/#api

Regards,

jamesb15

jamesb15 Purchased

Hi, im thinking of buying this, but i first got a few questions:

1. Can this remember if the person already completed the tour? So it wont keep showing to same person everytime they visit site.

2. Can it be all full screen? I want to use it as an onboarding.

3. Can i make first step to have users register and then take them to another step to register to another site?

4. Im not a coder, how easy is it to implement on website?

Thanks!

jamesb15

jamesb15 Purchased

do

jamesb15

jamesb15 Purchased

do I put the showCloseButton: false, under $.ptJs({ autoStart: true,

jamesb15

jamesb15 Purchased

I figured it out, thanks

sashalev

sashalev Purchased

Thank you for this script. It is great. I have a small problem that I am trying to resolve, where i have 2 instances of the tour running on the same page, and for some reason when the second tour is activated by a click on a div (which happens to be 1st tour’s last highlited element), the first tour window step does not close… so I end up having 2 tours windows… is there a way to end the first tour when the new one is activated? Something like use $.ptJs(‘end’); but using it’s instance name (so that it doesnt end the 2nd tour)? Thank you for your help. Alex

Hi,

1. If you want to have multiple tours at the same time, you have to set an ‘instanceName’ for each of them.

2. Tours have to have the option “modal:true” otherwise they will automatically closed when you click outside.

3. To close a specific tour manually you have to call the end method with the instance Name : $.ptJs(‘end’,’tour2’);

Regards,

Gael

by
by
by
by
by
by