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

Demo Download

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.

illustration1.jpg

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!

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles

How about skydrive presentation..? :)

Sü Smith

Sweet! Super nice. Thanks oodles for sharing.

Fernando Lee

IU think this a great tip might use it in the future, thanks

Outils Webmaster

It's a very nice implementation of Google docs ! Thanks

Jguiss

SDGSteve

Nice, Google Docs is full of useful things I never find time to explore, this is really handy.

that's nice. but i've never try google docs presentation. i'm impress that google docs can do this things. :D

Great Quick Tip.

I have blog.daitra.xyz in my "don't forget / revisit soon" bookmarks quite some time now. And now i'm finaly at the point were i can use this tips and tutorials in a new project. Nice work!! glad i found this site and i gladly suggest it to whoever it may concern :-)