HOW TO Insert a Mobile App Demo into a PowerPoint Presentation

In this guide I'll show you how to embed your mobile app demo in a PowerPoint presentation. You'll be able to click through the demo right in PowerPoint without exiting the presentation and opening a new browser window.

An AppDemoStore demo is just a web page. So, to be able to embed a demo into PowerPoint we have to figure out how to embed a web page into PowerPoint - it's pretty easy, you'll see in a moment.

PowerPoint does not provide direct support for inserting web pages (as it does for images for example), but we can use a very simple macro to do the job. There are also a few add-ins available online which let you insert a web page into a PowerPoint. But the main disadvantage of this approach is that if you send the presentation to other people they have to install the add-in also.

In this guide I'm going to explain how to insert an AppDemoStore demo (the web page representing the demo) into a PowerPoint presentation using the Microsoft Web Browser control and a one-line macro script. I'm using Microsoft PowerPoint 2010 for this guide, but the process is similar for other PowerPoint versions.

1. Add the Developer tab

In order to be able to add the Microsoft Web Browser control which will load our demo web page, we have to add the Developer tab to the PowerPoint presentation. By default, this tab is not visible, but we can add it to the toolbar like this:

1. in the menu go to: File -> Options.
2. go to Customize Ribbon and in the Main Tabs section select the Developer tab.

2. Add the Microsoft Web Browser control

The Microsoft Web Browser control is basically an Internet Explorer web browser which can be embedded into PowerPoint slides. We'll use it to load our demo web page. Here is how to add the browser control to a slide:

1. go to the Developer tab click the button More Controls
2. select Microsoft Web Browser
3. drag a big area on your slide to have enough space to see the demo properly

3. Add a CommandButton control to load the demo

We'll use a CommandButton control to trigger the loading of the demo web page:

1. go to the Developer tab and click the button Command Button
2. right-click on the button you have just added to the slide, click Properties and for the Caption property type "Load Demo"
3. double-click the button to add the macro code in Visual Basic
4. type the following line of code to be executed when you click the button (make sure you're typing in the CommandButton1_Click function):

   WebBrowser1.Navigate "http://www.appdemostore.com/embed?id=2689345"

   (change the ID value to your own demo ID)
   
   You can also load a downloaded demo file if you wish (for offline scenarios for example). In this case you have to load the demo HTML file from the specific location on your computer:

   WebBrowser1.Navigate "file:///C:/PowerPointDemo/my_demo.html"

Now when you're in Slide Show mode and click the Load Demo button, the demo will load into the Web Browser control and you'll be able to click through it without leaving your PowerPoint presentation.

That's it! You can save the presentation as PowerPoint Macro-Enabled presentation and send it to your business partners, project stakeholders, investors, etc.

AppDemoStore JavaScript API

The new AppDemoStore JavaScript API allows you to better integrate your demo into your web pages.

It has two functions:

• selectScreen - this is a function which you can use to jump to a certain screen in a demo.
  Usage example: build your own navigation buttons which better fit your web page design.
• onScreenSelect - this in an event which is fired when users select a screen in a demo.
  Usage example: show a feedback or contact form when the users get to a certain screen in your demo.

Note: due to security features built into all modern browsers, to access these functions you need to download the demo from AppDemoStore.com and serve it from the same domain as the containing web page.

Example 1: Cross-demo Interaction

In the code below we have two demos. When the user clicks through the first one the other demo will jump to a corresponding relevant screen.

HTML Code

<iframe id='demo1' src='/demo_1.html' width='680' height='438' style='border:0 none'></iframe>
<iframe id='demo2' src='/demo_2.html' width='227' height='480' style='border:0 none'></iframe>

JavaScript Code

window.onload = function() {
 
 // get iframe content windows
 var iframe1 = document.getElementById('demo1').contentWindow;
 var iframe2 = document.getElementById('demo2').contentWindow;

 // get demo objects from iframes
 var demo1 = iframe1.demo;
 var demo2 = iframe2.demo;
 
 // define behavior for demo1
 demo1.onScreenSelect = function(screen) {
  switch (screen) {
   case 0 : demo2.selectScreen(0); break;
   case 1 : demo2.selectScreen(1); break;
   case 2 : demo2.selectScreen(4); break;
   case 3 : demo2.selectScreen(6); break;
   case 4 : demo2.selectScreen(9); break;
  }
 };
 
 // define behavior for demo2
 demo2.onScreenSelect = function(screen) {
  switch (screen) {
   case 0 : demo1.selectScreen(0); break;
  }
 };
  
};

In the code above observe how we get the selected screen index using the onScreenSelect function and the screen variable. Then, based on that we go to a certain screen index in the second demo using the selectScreen function. The screen counting starts at 0, so screen index 0 actually means 'Screen 1'. Also note that we use the window.onload event in order to make sure the browser had enough time to load the demos.

See how this kind of cross-demo interaction works here: www.appdemostore.com/learn_how_to

Example 2: Navigation buttons

In this example we create two buttons which we'll use to control the navigation in our demo.

HTML Code

<iframe id='demo1' src='/demo_1.html' width='680' height='438' style='border:0 none'></iframe>
<button onclick='goPrev()'>Prev</button>
<button onclick='goNext()'>Next</button>

JavaScript Code

// at first the demo is null - it will be loaded at window.onload
var demo = null;

// go to previous screen
function goPrev() {
 demo.selectScreen('p');
};

//go to next screen
function goNext() {
 demo.selectScreen('n');
};

window.onload = function() {
 
 // get iframe content window
 var iframe1 = document.getElementById('demo1').contentWindow;

 // get demo object from iframe
 demo = iframe1.demo;
};

In the code above also notice the that we use the window.onload event to load the demo. Then we use demo.selectScreen('p') to go to the previous screen and demo.selectScreen('n') to go to the next screen. Once this basic functionality is in place you can use CSS to style your navigation buttons to better fit your web site design.

How to Add Scrolling Areas in your App Demo

This blog explains how to add horizontal and vertical scrollig areas to your interactive app demo. See demos at the end of the blog for examples.

1. Create a long image to use for the scrolling area, by merging several screenshots. This is how you create such an image:

• Take several screenhots of the scrolling area you want to simulate.
• For each image, cut the visual elements which don't belong to the scroll, such as the upper bar and the lower menu of the app.
• Merge the images with a graphic tool such as Paint (Windows) or Preview (Mac).
• Save the big image and use it as a source for the scrolling area (as described in step 2).

 Need more help with the merging process in Paint? Read this blog.

2. Open your demo for edit and go to the screen where you want to add the scrollable area and do the following steps:

• Add the control named "Scrollable Area" on top of an already existing screenshot which has the visual elements which you need besides your scrollable area (e.g. upper bar, lower menu, etc).
• Upload the image created in step one to it.
• (only for horizontal scrolling areas) Select "horizontal" as the scrolling direction.
• Use the mouse to adjust the position and size to fit exactely on top of scrolling area which is visible in the screenshot behind.
• Double-click the scrolling area and add controls to it (hotspots, text areas). Position these controls within the scrolling area using the mouse.
• When ready, click "Done" on the top left of the scrolling area - this is how you "exit" the scrolling are and are able to interact with the other controls on that screen, and also adjust the position and size of the scrolling area.
• Preview the demo to see how the scroll works.

 

Vertical Scroll Sample

Horizontal Scroll Sample

HOW TO: Merge Images with Paint on Windows

This guide explains how to create a long image to use as the source for the scrolling area in a demo. If you have a Mac, you can use Preview to achieve this task - the process is similar.

Merging Images with Paint:

1. Open all images in Paint.

2. Cut the unnecessary parts from all the images (for example the upper and lower bars).

• First, cut the upper part: select the entire image (Ctrl+A) and drag it upwards.
• Second, cut the lower part: drag the bottom image handle upwards (not the selection handle).

3. In the first image, make enough space for the other images, which will be pasted here. To do this, drag the image handles.

4. Paste all other images in the first one, one by one, and adjust their position.

5. Done! Save the long image and use it as a source for the scrolling area. Click through the demo on the right to see the result.

Here's a more detailed guide: http://www.ehow.com/how_5522537_merge-pictures.html

How to Show your Mobile App: Screenshots vs Video Demo vs Interactive Demo

In this blog post we will look at thee popular ways to showcase mobile apps:

• App Screenshots
• Interactive App Demo
• Video App Demo

Showing a few screenshots is the simplest and easiest way to give people an idea of what your app is doing. But you should also consider more effective ways of showcasing your app. For example, interactive demos can be very engaging while video demos, when properly made, can be quite captivating. Both demos and videos are great ways to increase the effectiveness of your mobile app marketing campaigns. We'll dive deeper into details in a sec.

To analyze the three options we have for showcasing mobile apps we used the awesome Evernote iPhone app. For the screenshots slideshow and for the interactive demos we used the AppDemoStore.com demo platform and for the video demo we used the video created in another tutorial on How to create an App Demo Video.

The table below shows a quick comparison of the 3 options in terms of creation and maintenance effort, engagement, analytics and costs. The right option for you depends on your app and the amount of effort and money you are willing to spend on this.

	App Screenshots	Interactive App Demo	Video App Demo
Creation Effort	low	medium screenshots + interaction	high specialized tools and professional help needed
Maintenance Effort	low	low when the app changes simply replace the affected screens	high when the app changes you need to recreate the video
Engagement	low	high people click through the demo as they would do on the device	high people could find the video interesting but could also loose interest at some point
Analytics	none	advanced such as: number of views, screen interaction flow, navigation paths, exit screens	basic such as: number of views and total minutes watched
Costs	free	free	medium-high

App Screenshots

All mobile app presentation pages can greatly benefit from showing a series of screenshots.

Advantages:

• Easy to create and maintain
• Free

Disadvantages:

• Less entertaining than demos
• Lower impact than demos

How to maximize the impact:
Create a simple slideshow demo out of the screenshots, like in the sample demo on the right.

Interactive App Demo

An interactive app demo is made of screenshots but with added interaction, screen transitions and UI effects. You could use an interactive demo as a simulation to showcase the main features of your app or as a guided tutorial for a specific task.

Advantages:

• High impact on users, because they get to touch and feel the app. It is like test driving an app to see how it's working - people are more likely to buy such an app
• Can be embedded in your app presentation web page
• Valuable in-depth analytics such as screen interaction flow, top navigation paths, exit screens
• Capture leads and feedback with the demo

Disadvantages:

• Might require extra effort to simulate some fancy UI effects.

How to maximize the impact:
Try to define the UI effects and screen transitions as close as possible to your mobile app. Have a look at the demo on the right.

Video App Demo

A video demo is another great way to show your app. You could create a screen cast which shows in detail how the app works - it is less entertaining and more informative. Or you could create an app trailer which tells a story around the app - this kind of video is very entertaining but shows less of how the app really works.

Advantages:

• Very entertaining
• Can be easily shared
• Can be embedded in the app website

Disadvantages:

• Relatively high effort for creation and maintenance
• Can be expensive

How to maximize the impact:
You can have it done by a professional, although it might not be cheap. If you prefer to do it yourself for fee you should check our tutorial on How to create an App Demo Video for a few tips.

HOW TO: Create an Interactive In-app Tutorial for your iPhone/iPad App

This blog explains how to easily create an in-app guided tutorial for your iPhone or iPad app, using the AppDemoStore.com platform.

AppDemoStore.com is the leading cloud platform for creating online interactive tutorials, demos, simulations for mobile apps. It eables you to easily create your demos, by uploading some app screenshots and adding interaction, animations and annotations to them. The demos are online, HTML-based, easily embeddable in your website, app or Facebook page.

 First, you will have to create your interactive tutorial as described in step 1, then you will have to copy the code provided in step 2 into your app in Xcode.

1. Create the app tutorial. 

To create your tutorial on AppDemoStore.com, you have to:

• Sign up for a FREE account here. Once signed in, you will be able to create up to 10 demos (tutorials, simulations, mock-ups). Create a new "demo".
• You can choose a device frame for your demo (e.g. iPhone, iPad) if you wish. Your demo will run within this frame when viewed on a desktop. 
• Upload your app screenshots. 
• Add some interaction (clickable hotspots), animations (loading, slide, fade, etc.) and annotations to your tutorial.

Here's a sample interactive tutorial (use the orange hotspots to interact with it), created and hosted on AppDemoStore and embedded into this page. We will use this tutorial as example in the step 2.

2. Embed the tutorial in your app.

This step is very easy: just copy this Objective-C code to your Xcode app (replace the demo-id marked with red with your own):

// web view
UIWebView *webView = [[UIWebView alloc] initWithFrame:UIScreen.mainScreen.bounds];
self.view = webView;
   
// load url
// Change the URL below to match your demo
NSString *urlDemo = @"http://www.appdemostore.com/m/2816110";
NSURL *url = [NSURL URLWithString:urlDemo];
NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
[webView loadRequest:urlRequest];

Tip: If you have a PRO membership, you can download the demo as HTML file and include it in your app without hosting it on AppDemoStore platform.

HOW TO: Embed an Interactive App Demo into your Facebook Page

This blog describes how to embed a demo created on AppDemoStore.com into a Facebook Fun Page.

We will use a special app to create a tab which enables us to write our own HTML code. The result will look like this: Check our Facebook page.

Some of the advantages of including an interactive demo of your app in your Facebook page are:

• your friends can experience your app right on Facebook
• easy to share and spread it virally
• get Facebook-related statistics
  

1. Add the app called "Static HTML Iframe Tab" to your Facebook Page

The only way to add your own HTML code to Facebook is by using an app - there are several apps for this, we choose the "Static HTML Iframe by Woobox". Here are the steps to add this app to your Facebook Page:

• Log in to Facebook with the user that has admin rights for the Page you want to add the demo to.
• Search for "Static HTML Iframe Tab by Woobox"or access it  directly via this link.
• Add the app to your page by clicking the button "Install Page Tab", then "Add Page Tab".

2. Include the demo and customize the tab

The app will create a new tab called "Welcome" in your Facebook Page. We will embed the demo in this tab. To be able to edit the tab, you need to authorize the app by clicking the button "Authorize the Tab Application". The tab will open in Edit mode which looks like in this screenshot.

 Here's what you have to do here:

• Give a meaningful name  to the tab (e.g. Our App Demo, Test our App Online, etc.) and upload an image for it (e.g. an app screenshot).

• Go to your demo page on AppDemoStore.com,  copy the code provided in the "Embed" section and paste it in the HTML section. This is the code we used on our Facebook Page:

<h2><b>Android 4.0 Ice Cream Sandwich Simulator</b></h2>
<p><iframe src="http://www.appdemostore.com/embed?id=1635013" style="border: 0 none;" height="580" width="290"></iframe></p>
</div>

• You can also customize who can view this tab and how the share will look like.
• Save the tab and you will be able to play with the demo.

 I hope this guide was useful and will help you promote your app better!