product-tour
June 3, 2015 | 18 Feedbacks

Product Tour

A responsive tour snippet, with a step-by-step guide to help users understand how to use your website.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Onboarding processes are essential to let users familiarize with your website/app functionalities as soon as possible. A common user case is the “free trial”: if a user is taking your app for a spin, he’s going to gather as many information as he can in few minutes, before deciding whether your app is worth paying for. You don’t want one of these info to be “how the hell does this work”? The easiest way to improve user experience is to build a simple step-by-step intro tour.

Today we release a handy tour snippet powered by CSS and jQuery, characterized by a user experience that changes according to the device size.

Here is a quick animation that shows the difference between the tour on small devices vs bigger ones:

tour animation

Creating the structure

The HTML structure is composed by an unordered list: each list item contains a .cd-more-info (step title, brief description and image for mobile version) and a <span> element used to create the dot indicator.

Note that the .cd-nav element (tour navigation visible in each step) is not directly inserted in the html but created using jQuery.
Also, the .cd-app-screen element has been used to create the fake background app, so you can remove it from the html (and the related style) when using it in your live application.

Adding style

On mobile devices, the tour is open as a modal window (with a smooth scale effect achieved adding a CSS3 transition to the scale property of the .cd-single-step list items): each step shows a title, a description and an image representing the feature being displayed. The css for this version is pretty straightforward (you can give a look at the code for more details/comments).

On desktop devices (viewport width bigger than 1100px), we assigned a position to each .cd-single-step list item (we used percentage rather than px so that they preserve their position regardless of the screen size): the <span> element inside each list item is used to create the dot indicator, while the pulse effect is created using the list item ::after pseudo-element and animating its box-shadow.

4 different classes have been defined to control the position of the tooltip relative to the dot indicator (.top, .bottom, .left and .right, to be assigned to the .cd-more-info element).

Events handling

We used jQuery to implement the tour navigation functionality (with keyboard, touch swipe and previous/next navigation). Besides, the createNavigation() function has been implemented to create the tour navigation element (.cd-nav) and insert it into the DOM.

Changelog

June 3, 2015
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • kszere

    Good work. :)

  • http://www.gunitrend.com mexperience

    Great work !!!

  • Surjith SM

    Great.. I was searching for this last month. Two things

    1. At last, The action should be “Finish Tour” not just the disabled next. Its not really good to close the popup to finish the tour.
    2. This seems hard to customize as its just positioned. Instead I would like to add the details directly in html

    This way, the script should calculate the position and add the tour automatically. How does that sound?

  • David Dinatih

    Here a really good full implementation of the concept : http://bootstraptour.com/

  • Aldi Unanto

    Bookmarked.

  • http://lagden.in Thiago Lagden Magalhães

    Hi!! Which app did you use to create the tour-animation.gif? Some people are telling me to use After Effect.

    • http://codyhouse.co/ Sebastiano Guerriero

      After Effects

      • http://lagden.in Thiago Lagden Magalhães

        Tks!

  • gbgnnb

    gthtghhgh

  • John

    can u tell the mockup template using in this page

  • Alex Martinez

    Hi! Awesome demo. Any chance to have it in a WordPress Plugin? Any privileged mind who wants to create it? I would pay for it! :D

  • Jaser Akuly

    Hello! I had a question. I am currently using this product tour over a static image, once I arrive at step 4 I would like to change the static image. How can i change the image without changing the html page with the click of the next button on the tour. So when I am on step 5 it should have a different image that is overplayed on. Any suggestions?

    Thanks.

  • Ali Ghasemzadeh

    Hello,
    How can I run it on page load??

    • http://codyhouse.co Claudia Romano

      Hi Ali, you can use the showStep() function to show the first step, and add the class ‘active’ to the .cd-tour-wrapper element (if you open the main.js file, you can give a look at the function attached for the click event on the #cd-tour-trigger button).

  • roy estfen

    Hello, can i set tour point position based on element and not percentage ?

  • bayoodeveloper

    hi there , really very nice work … but I wondering if there is any option that I can enable to make the tour works automatically without clicking ( next )

    thanks in advance :)

  • philip oghenerobo balogun

    Nice work. I built a library about this. Its very easy to use, customize and configure.
    Made some improvements also… ;).
    No need to specify anything from css or add any html directly to dom.
    Pass the element you wanna target and it does the rest for you..
    More about this on github:
    https://github.com/Robophil/Product-Tour .
    Give it a try and lets improve it
    Credits go to you