May 10, 2012

HOW TO: Embed a Clickable App Demo into your Website

Quick intro

This guide explains how to include a clickable app demo from in your website.

If you need to create the demo first, please start here:

How it works

The process is very similar to embedding a YouTube video into your website. Here are the 2 easy steps:

1 Get the HTML code from demo page

On the demo page click

The Share Overlay will open, which gives you different options to use your demo (share over URL or social media, embed, download, install on mobile, etc). Select the option

Select one of the 3 predefined sizes for the demo and copy the code provided in the field HTML code.

2 Paste the HTML code in your website

Paste the HTML code in your website. You can manually adjust the size of the demo by giving your own values for the attributes width and height.

When embedded in your website, the demo will not load all screenshots at once and thus making your page slower, but will load only the first image and those linked from it.

To make your demo available offline, download it and embed the downloaded version to your website.

Sample webpages with embedded demos

Here are some Awesome App Pages with Embedded Demos