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.

Google Docs - Powered Product Tour

Google Docs - Powered Product Tour

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!

Join our newsletter and get our PSDs!18,924 people learn about HTML5, JS and more. Join them!

by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

7 Comments

  1. inzacky says:

    How about skydrive presentation..? :)

  2. Sü Smith says:

    Sweet! Super nice. Thanks oodles for sharing.

  3. Fernando Lee says:

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

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

    Jguiss

  5. SDGSteve says:

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

  6. Vicky says:

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

  7. Michiel says:

    Great Quick Tip.

    I have tutorialzine.com 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 :-)

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links