(NOTE: If you are reading this via a reader or rss feed, I recommend you come to the real site in order to see this page in action!)

We often do our best to create a site that’s as obvious to use as possible. We want a super-easy-to-follow navigation system and users that do what we expect them to do. Unfortunately, occassionally like you see on Facebook and Google, you need to present users with a “site tour” in order to inform them about new features and navigation. Certain kinds of sites and projects are just to complicated to expect people to know how to use without at least explaining a few things to them.

The Joyride Drupal module makes it easy to create site specific tours to your latest features and site layout, so you can point your first-time users in the right direction.

What’s It for?

It’s important to sometimes hold a user’s hand and walk them through the different services and sections that your site provides. With such a common need, it’s no suprise that there are a number of 3rd party sites (like WalkMe) that provide a way to create “walkthrough” tours of your site. I tend to (as much as possible) avoid any solution that makes me dependant on external code, especially those that come with the eventual requirement of having to for that service.

So when I was trying to put together a site tour to improve some of the intial experience on one of my more complicated Drupal projects, I came across a nifty jQuery plugin that makes creating site tours relatively easy: Joyride.

From there, I created a helper module for Drupal 7 for controlling when these tours appear and to make it possible to add customized site tours through site configuration UI. Viola: Joyride for Drupal.

How Does It Work? Example of Drupal Joyride

Once you’ve downloaded the dependencies and enabled the module on your site (if you have some trouble installing, you may want to re-read the project page), you’ll be able to create page-specific site tours via the Context module UI.

Like most Drupal development situations, there were a couple ways I could have built this, including using Panels or even a custom settings page. Instead I used Context module since it covered all of the path loading control and provided a way to export Joyride site tours via normal ctools context exports, which solved two of my needs: 1. setting when javascript got triggered and 2. making sure I could export the settings to feature code.

Anyways, once enabled, you’ll want to go to check out the three demo pages as well as their related Contexts under Structure > Context > Joyride. You can also simply reload this blog page and use your browser inspecter to check out some of the nuts and bolts on how it works.

If you are familiar with basic html, css and javascript, the examples provided by the module’s demo page or on the full documentation pages and even on this blog page should give you a rough idea on how it works.

Once ready, go to the context page and create a new context like the following:

You’ll notice like any standard context page that you can control the path and/or roles which will have access to viewing the tour. So first establish where you want the code triggered.

Once you’ve established the situations where the code will be called, it’s time to create a specific example by putting together some simple html code. Without digging to far into the details, site tours are created via a series of list-items (“li”) where for each item you subsequently pass the class or id (or any other html element) you want the toptip to highlight and provide a few additional configuration to set toptip location and animation.

So for example, here is some code that will highlight your Drupal site logo:

<li data-id="logo" data-button="Next" data-options="tipLocation:bottom">
<h2>Stop #4</h2>
<p>You can use it to highlight images.</p>
</li>

As you can see, we select the “logo” id tag, create a next button and display the toptip under the html element. Pretty simple stuff!

From there, on the context page, you can decide whether to start the tour automatically, to play only once or simply provide a link to start the tour manually.

Conclusion

Once you’ve created a couple working examples with Joyride, you’ll realize how easy and flexible it is. It should be possible for most competent site builders to put these together.

As I said in the intro, don’t be intimidated by presenting new users with your latest brain-child of complex and dyanmic functions. Create a tour to guide them through your killer features and nuanced site layout.

Tags: drupal modulesite tourwalkmeDrupal PlanetPlanet Drupaljoyridejquery

Mark Koester
@markwkoester
Mark has worked on Drupal since the early days of D6. He is passionate about open source as well as entrepreneurship. When he isn't building, he enjoys traveling and speaking one of his many foreign languages.
Chengdu, China

• var switchTo5x=true;stLight.options({publisher:'dr-8d62520e-c444-86e2-d911-ab27da97627b'});