Dress Rush

In this tutorial you will learn how to create an online pitch deck. We won’t be going into any specific details about how to design the deck, or how to do the basic HTML and CSS required, but we will be showing you how to implement the simple jQuery plugin we built to run the pitch deck interaction. If you’d like to find out more about why we did it and what the results were, read our recap here. 

1. Design the Pitch Deck

Start out by creating the design for your pitch deck using your favorite graphics editor. We used Photoshop, but depending on how much you plan on working with vectors, you may want to use Illustrator or Fireworks. Make sure you know how users will navigate through your presentation. Our plugin is set up to work with table of content links that are directed to each slide individually, and next/previous buttons.

2. Develop the Pitch Deck with HTML+CSS

You can create code that is as fancy or as simple as you want. On our presentation, we exported entire slides as images, rather than breaking them down into text/images. The only thing you need to keep in mind while coding is that each slide needs to be in an element that can be identified by a single class. By default, the plugin uses .slide to identify a new slide, but that setting can be changed if desired.

3. Make it awesome with jQuery PitchDeck

Now you’re to the easy part. The simple plugin we created is used to add the same functionality shown on our pitch peck. This plugin will add the following functionality:

• Assign links to animate to specific slides
• Assign links to animate to the previous/next slides
• Automatically update the link corresponding to the slide you are currently on
• Add keyboard left and right controls of the slides.
• Adds a simple label on hover to each of the top navigational links

Including the Plugin

To include the plugin, you will have to first download jQuery, Ariel Flesler’s jQuery.ScrollTo, jQuery Waypoints, and of course our plugin, jQuery PitchDeck.

Make sure to include all the plugin files in the head of your HTML document. To call the pitch deck plugin, it simply takes:

$(document).pitchdeck();

You can optionally change the default settings of the plugin. The settings are as follows:

• link_labels (default: false) - specifies whether or not labels will be added for each top link
• top_links (default: ‘.toplink’) - selector for the elements that will have the optional label on hover
• nav (default: ‘.nav’) - selector for the elements that will navigate to the slides
• slides (default: ‘.slide’) - selector for the slide elements
• duration (default: ‘1000’) - duration of the page scroll animation, in milliseconds
• easing (default: ‘swing’) - specifies the easing equation used for the page scroll animation
• next_button (default: ‘.next’) - selector for the next slide links
• prev_button (default: ‘.prev’) - selector for the previous slide links
• keyboard (default: true) - specifies whether or not to enable the left, right, and space keys for slide navigation

In order for the navigation links to work correctly, you must link them to the id of the slide you want to navigate to. For example, for slide 1 you would give the .slide element an id of “slide1” and for the link you would set href=”#slide1”.

4. Connect it to AngelList

If the goal is to get investors to request an introduction, you can integrate some cool tools to do this using a little bit of code from another 500 Startups accelerator company, Spinnakr.  

• Sign-up for an account on Spinnakr.com
• Go through the “Getting Started” process (answering some questions about your business). We said we were interested in “Fundraising.”
• At the end of the process, you get snippet of code that you can drop in the footer of your website.
• Spinnakr will then pull your AngelList details from your profile automatically and set it to display to your investors. You can customize how it appears and what information it displays.

• If you sign in to your account, you can also set the AngelList messaging to appear to visitors from other sources as well. For example, we displayed it to visitors from TechCrunch, SiliconAngle, etc.

5. Enjoy your very own awesome online pitch deck!

That’s it! Feel free to post any comments/questions on this post.

6. Share the love

If you found this helpful, plan to use it as a guide to build your own online pitch deck, or write about it on your blog, all we ask is that you provide a link back to this article. If you end up creating your, share a link to it here as well!

And, if you know someone getting married, in a wedding, or attending a wedding, please point them to DressRush.com and we promise to take care of them!  

7. Contact us

If you’d like to contact someone from our team, you can find links to our emails, twitter, and LinkedIn on slide 3 of our online pitch deck. Oh, and a special thanks to our friends at AppSumo for being so supportive!

Thanks!

♥ The Dress Rush Team

(Aaron, Sara, Matt, and Mike)