Strap yourself in, this is going to be a ride that you won’t forget – a joy ride one could say. Have you ever wanted to take control of the way your users interact with those magnificently-awesome websites you make? Create a guided “tour” for your potential customers and watch those conversion rates skyrocket? Great, you’re gonna be rich kiddo. Come, let me show you how it’s done.

This 1962 Studebaker Lark of a library is released under the MIT license and is a part of the extremely popular Foundation framework – that you definitely should check out if you haven’t already. Even so, not a lot of people are familiar with it, and it’s seemingly simple features…so here we are.

Assuming that you aren’t using Foundation for Frontend development, you need to download a release of your choice before firing up that glorious engine. Official GitHub repository is linked below, so what are you waiting for? Put the pedal to the metal.

GitHub Repository

Directory layout of the project is extremely simple, all required files are located in the root directory. To start using this puppy, just copy the main files to your project and include them as shown in the following example.

<link rel="stylesheet" type="text/css" href="my/awesome/assets/joyride.css">
<script type="text/javascript" src="my/awesome/assets/joyride.js"></script>

In addition to that, jQuery Cookie library should be included if you want to take full advantage of this spectacular library.

After that, you should update your desired page and clearly mark the stops (read: DOM elements) of your joy ride by assigning unique ID or Class attributes. I recommend using a unique prefix followed by a stop identifier as seen in the creative example below – just to avoid potential issues and simplify next steps.

<div id="stop-xxx">
    Lorem ipsum sit DeLorean...

So far so good, eh? Content displayed in the stop popovers is defined  by adding a hidden ordered list to your page. Each list item needs to contain an attribute specifying the ID of a corresponding stop like in the example below.

<ol id="my-tips" style="display: none">
    <li data-id="stop-1">...</li>
    <li data-id="stop-2">...</li>
    <li data-id="stop-3">...</li>

Finally, magic words must be uttered…

    "autoStart" : true

And that’s all it takes for a joy ride to happen, I hope that you enjoyed this one. As always, feel free to review the CodePen demo I’ve prepared for you, and experiment with more advanced features that weren’t covered in this article.

Hey! Don’t drive too fast….slow ride, take it easy.

Official Demo

CodePen Demo