Quick Tip: Use a Google Docs Presentation as a Product Tour

Google Docs, the online productivity suite developed by the search giant, includes a rarely talked about feature - a fully fledged application for building presentations. As with everything done by Google, the presentations are HTML5 based and can be embedded into any web site. They also support transitions and effects that you would normally expect from something like Powerpoint, but implemented entirely in CSS3. This turns them into the perfect tool for building product tours!

Preparations

Here is what you need to do:

1. Create a Google Docs presentation that explains how your web app works. You can choose a design, drag and drop images from your desktop, use fonts from Google Web Fonts, define animations and even embed videos from YouTube;
2. Publish the presentation to the web (from File -> Publish to the web..);
3. In the Publish dialog, find the text area with the iframe embed code and copy the URL from the src attribute. This will be the link that we will be using, as the document link you see above it cannot be shown cross-domain;

So now you have the direct link to an embeddable and publicly accessible version of your presentation.

Showing the Presentation

All we need to do is show the presentation to people who visit our web application. To do this, we will need a lightbox script. Any plugin would do, but I chose to give fancybox2 a try.

After you download the plugin, you need to include the fancybox.css and js files in your HTML. Next, add a hyperlink that will trigger the lightbox:

index.html

<a id="tour" class="fancybox.iframe blueButton" href="https://docs.google.com/presentation/embed?id=1EJSb..">Launch Tour</a>

The link is assigned an id, and two classes. The first is a special class which tells fancybox the href should open in an iframe. The second is a class that I use to style the link into a button (you can see the relevant code in assets/css/styles.css). The href attribute points to the URL we copied from the embed code earlier.

Now to initialize the fancybox plugin:

assets/js/script.js

$(function(){

    $('#tour').fancybox({
        maxWidth    : 746,
        maxHeight   : 600,
        fitToView   : false,
        width       : '80%',
        height      : '80%',
        padding     : 0
    }).click(); // Open the tour on page load

});

Here we are passing a handful of options to fancybox and at the end trigger a click to show the plugin on load. And just like that you get a powerful tool that generates HTML5 tours and hosts them for you for free!