A list of product tour plugins for onboarding

over 6 years ago from , Product Designer, co-founder of @marvelapp

Hey everyone,

I'm compiling a list of scripts/plugins to handle product tours for onboarding and thought I'd share what I have so far and see if anyone can add to it.

Hopscotch by LinkedIn - http://linkedin.github.io/hopscotch/#what-is

Jquery Impromptu http://trentrichardson.com/Impromptu/

Joyride by Zurb http://foundation.zurb.com/docs/components/joyride.html

Intro.js http://usablica.github.io/intro.js/

Chardin.js http://heelhook.github.io/chardin.js

Any others? I quite like how Intro.js highlights the area and impromptu's transitions but just seeing if there's anymore out there


  • Catalin CimpanuCatalin Cimpanu, 6 years ago

    Crumble - http://tommoor.github.com/crumble/

    Bootstrap Tour - http://sorich87.github.com/bootstrap-tour/

    jQuery Tour - https://github.com/yckart/jquery.tour.js

    Tour.js - http://oskarkrawczyk.github.com/tour.js/

    pageguide.js - http://tracelytics.github.com/pageguide/

    aSimpleTour - http://alvaroveliz.github.io/aSimpleTour/

    jquery.tourguide - http://maxkfranz.github.io/jquery.tourguide/

    jQuery TutorMe - https://github.com/shannoncruey/jquery.tutorme

    Trip.js - http://eragonj.github.io/Trip.js/

    Bootstro.js - http://clu3.github.io/bootstro.js/

    3 points
  • Derek PunsalanDerek Punsalan, 6 years ago (edited 6 years ago )

    Tourist.js - http://easelinc.github.io/tourist/

    Shepherd - http://github.hubspot.com/shepherd/docs/welcome/

    2 points
    • Murat Mutlu, 6 years ago (edited 6 years ago )

      These two are my favourite! Thanks!

      Wish tourist had the highlight function of sheperd, choices choices

      0 points
  • Aen TanAen Tan, 6 years ago

    Tourbus is seriously better than the rest design-wise, meaning it's more minimal and easier to style and customize. The API is also very straightforward.


    2 points
  • Heather McNamee, almost 3 years ago

    The original question asked about jQuery plugins for user onboarding. Then some other SaaS services came in with comments offering their services, like ours at Inline Manual. They don't explain why you'd choose one or the other or how you'd compare. I just wrote a blog post about this, and I think it might help others who are in the same situation: Should you build interactive walkthroughs in-house or use a service?.

    If you're just starting out, building a few tours with a jQuery plugin alongside your app wth work fine. But soon you'll want Tooltips as well as Tours. Then you're maintaining multiple plugins, and their dependencies.

    And soon (hopefully!) you'll grow, and you'll have a marketing or support person who wants to tweak the content, or add more. Then you're managing requests for content changes more frequently and the overhead increases.

    Or they want to segment welcome messages for user types, or analyse how the tours are helping to convert users. Soon you will be spending development time you should be spending on your product itself. Is it worth it?

    That's when you'll know you've reached the limits of an open source solution.

    I hope that helps!

    1 point
  • David ParrelliDavid Parrelli, 6 years ago

    I've used Hopscotch for our product's dashboard and it's quite good. Easy to style and implement.

    I hadn't heard of Intro.js until now, but love its ability to let the person interact with the highlighted area!

    1 point
  • Philip Balogun, over 2 years ago

    Product tour -> https://github.com/Robophil/Product-Tour

    0 points
  • Gokul Suresh, almost 3 years ago

    When it comes to Product Tours, the first and the foremost decision that you have to make would be the Build v/s Buy.

    Product walkthroughs are definitely becoming from a good-to-have to a must-to-have solution for most of the sophisticated web apps.

    The reason - It allows users to 'Learn while Doing.' So, it becomes pivotal to navigating with web apps, getting new users onboard and trained, providing proactive support and also in streamlining Change management.

    If you are to go for the Build option, then you’ll able to do that through some of the open source resources like the following. (I tried them personally.)

    But then, the issue here is that the time and resources spent on building such a solution will be humongous. Also the fact that, in spite of investing in it, you may not get the solution that is of the same standard as the fully built applications.

    Instead, If you prefer a no-coding solution for Product tours, then Whatfix is something that you should check out.

    Whatfix is a fully functional, performance support platform that you use on your web application to provide interactive guidance on it.

    Now the best part, you can use Whatfix's specialized widgets to onboard new users, train them on sophisticated software (like CRM, ERP, ITSM, etc), prove just-in-time help and support, improve user engagement and for many other use cases.

    Now, the decision of Build v/s Buy is definitely something that totally up to you. If you think that is something that needs to be discussed in person, feel free to reach out to me. :)

    Disclosure - I am the Product Adoption Expert of Whatfix

    0 points
  • Joana Leite, 3 years ago

    A positive user experience leads to customer satisfaction and loyalty, which results in customer retention. Helppier is all about helping and attracting users to the right place, at the right time with the right workflow. We focus on helping companies to improve their onboarding process and overall user experience.

    Learn here how to create memorable experiences on your website or web app: https://www.helppier.com/en/

    0 points