Embed an ACP model in a Web Page
Overview
Suppose you want to allow users to play your model from a web page on your web site. With Analytica Cloud Player (ACP) you can do this.
Prerequisite: You must already have an ACP account.
There are a number of approaches, and so far the way we have found the easiest is to just create a page that uses frames on your web site, and then have your model shown in one of those frames.
If for some reason HTML frames are not a viable option, the second example on this page will show another approach of embedding some Javascript code directly into your web page that you want to use for playing models in ACP.
When a new user arrives at your web page with the model embedded, the model will appear and an ACP session credit will be consumed.
If you want to display the model without the banner section of the ACP web page, you can find out how to do it here.
Example 1 - Showing your model in a Frame
To keep it simple, let’s say you just want to display your header logo and navigation tabs at the top of the parent web page, and then have the ACP model shown below that. I’ll show you an example of how to do this, and hopefully that’s enough for you to get started on playing your own model within a web page on your web site.
In this example, there are two servers.
- Your Server, the server where your web site resides. This is the server you are able to upload and edit pages on.
- And there’s ACP’s server, AnalyticaCloud.com, which hosts ACP and will contain the web page that plays your model. Since this page is an HTML frame, it will appear the model is being played on your web site.
If you are not familiar with HTML frames, you should probably take a minute to google “HTML Frames Tutorial” and find a one page tutorial on how HTML frames work.
- Basically, you create a “parent” web page which contains a number of other web pages within it.
- The subpages which are displayed within the parent frame can be specified to use a certain amount of vertical or horizontal space.
- The most common way of setting up the frames for displaying a model is by tiling the frames vertically.
Step 1 - Creating the Parent Web Page
The first thing we need to do is to create the parent web page which will contain (in this case) two frames. For the purpose of this example, let’s say you want to display the header of your web site with the logo and navigation tabs at the top of the page. And in the second frame below that you want visitors to your web site to be able to play your model.
- Create a parent web page 'parent.htm' in a text editor or whatever website software you are using. Here’s the html code for a basic web page:
<html>
- <head><title>Your title</title></head>
<frameset rows="100,*" border="0">
<frame noresize="true" src="yourHeader.htm" ></frame>
- <frame noresize="true" src=""></frame>
- </frameset>
</html>
The web page above contains two frames (pages).
- The first yourHeader.htm is your web site’s header and contains UI for navigation of your web site. The parent page says to give this header page the top 100 pixels of the parent web to display the header’s content.
- The rest of the parent web page will display the second frame page. This second page is on the AnalyticaCloud.com web server. You cannot author it, but you can “pass in” information using “URL encoding”. The URL encoding will contain the information so ACP knows which model to play among other things.
step 2 - Creating the Link to Play Your Model
Currently, you can use ACP’s Email Invite functionality to create the link which will play your model.
- Sign into your ACP account
- Ensure the model you want to play in your web page is in the Model folder of ACP - it will need to remain there as long as it is embedded in your web page (deleting it would cause an error message for visitors to your web page that the model can't be found).
- Use the radio button to select your model.
- Then click the [Email Invite] button. This starts the email invite creation process and exposes some more UI including the text of the email invite.
- Copy the link from this email invite.
- After you copy the link, you press the [Cancel] button since we aren’t sending the invite to anyone.
- Go back to parent.htm, and paste the text from this link into the “scr” attribute for the second frame as shown in red below:
<html>
- <head><title>Your title</title></head>
<frameset rows="100,*" border="0">
<frame noresize="true" src="yourHeader.htm" ></frame>
- <frame noresize="true" src="https://www.analyticacloud.com/acp/ClientAs3/AcpFlex.aspx?inviteId=30&inviteCode=905163&subName=fredbrunt%40gmail%2Ecom"></frame>
- </frameset>
</html>
- Now save parent.htm to a folder on your hard drive.
Step 3 - Creating yourHeader.htm
In this example, the top frame is your web site’s logo, title and navigation tabs. This content is going to be based on your web site.
For the sake of this example, I will mock up a header which is just an image.
- Create the file yourHeader.htm which you will insert into the "src" attribute of the first frame. Here is the code:
<html>
- <body>
- <img src="yourHeader.png"/>
- </body>
</html>
- Save yourHeader.htm to the same folder as parent.htm. This file just loads the yourHeader.png image, shown below:
- So now copy this logo and save it as yourHeader.png into the same folder as the other two files.
Step 4 - Finishing the Example
So now we’ve completed making the files. In this example the files you are going to place on your server are parent.htm, yourHeader.htm, and yourHeader.png. Just upload them into a folder, and then load parent.htm in a browser. In this case, the model will play on the web page looking like this:
I’ve uploaded these files onto another one of Lumina’s servers in case you want to test it out.
See http://analyticaonline.com/acp3Inawebpage/parent.htm to see ACP playing a model within another web page.
Or, if you just want to test this out on your computer, launch a browser, from the File menu select Open, and open parent.htm.
Example 2 - Using an IFrame (Inline Frame)
An inline frame is just an HTML document embedded inside another HTML document on a website.
There's no need for a frameset when using an iframe, just insert the link to your model into the "src" Attribute for the Iframe.
Step 1: Create a Web page.
- First, create a web page that we can start with. Here is one that just contains a title, 'Look at My Model'.
<html>
<head>
<title>Look at My Model</title>
- </head>
- <body>
- <h1>Look at My Model</h1>
- </body>
</html>
This is what this web page initially displays:
Step 2: Create the Link.
- The steps for getting the link to your model are the same as in Step two above. I.e. create the link in an email Invite and then copy the link.
Step 3: Insert the code for an Iframe.
- Now Insert the code for an Iframe with the link to your model in it -
- I will set the iframe to be 600 pixels wide by 400 pixels high...
so the code for your web page would look like this:
<html>
<head>
<title>Look at My Model</title>
- </head>
- <body>
- <h1>Look at My Model</h1>
- <iframe width="600" height="400" src="https://www.analyticacloud.com/acp/ClientAs3/AcpFlex.aspx?inviteId=30&inviteCode=905163&subName=fredbrunt%40gmail%2Ecom "></iframe>
- </body>
</html>
- Now you can save the web page and load the page into a browser and it will display the model in the iframe like this:
You can follow this link http://analyticaonline.com/acp3Inawebpage/acp3Iframe.htm to see ACP playing a model in an iframe on one of our servers.
Example 3 – No Frames – JavaScript
It’s not uncommon to find out that frames are not a viable option; for example because you are using an existing framework that doesn’t support frames, or would require a lot work. Here’s another approach which may work for you.
Step 1 - Start with Your HTML Page
This approach should work with any HTML page you want to use. You just tweak the existing page by adding a javascript include and some code to the <head> and then paste a block of javascript code into the <body>.
Step 2 - <Head>s up
Let’s start with the <Head> section of your HTML page. Usually ACP is loaded using a popular javascript library called swfObject.js. I’m not going to go into the technical reasons for doing this, but just google “swfObject.js” and you’ll find plenty.
To get started we need a web page, so I’m going to start the same as with the iframe - a blank web page that just contains a title, 'Look at My Model'. Here’s the HTML page we are going to start with:
<html>
<head>
<title>Look at My Model</title>
- </head>
- <body>
- <h1>Look at My Model</h1>
- </body>
</html>
This is what this web page initially displays:
Step 3 - Insert the Source code for the ACP model
So now we are going to add ACP to this page and have it play a model below the title. Similar to Examples 1 and 2, we will start by creating a link that will open your model using ACP’s Email Invite feature.
- Sign into your ACP account
- Ensure the model you want to play in your web page is in the Model folder of ACP - it will need to remain there as long as it is embedded in your web page (deleting it would cause an error message for visitors to your web page that the model can't be found).
- Use the radio button to select your model. Here we'll use the 'car cost in a web page' model
- Then click the [Email Invite] button. This starts the email invite creation process and exposes some more UI including the text of the email invite.
- Copy the link from this email invite.
- After you copy the link, you press the [Cancel] button since we aren’t sending the invite to anyone.
- Go to FireFox, paste this link into the address bar and press enter. This should load your model into the browser.
- Click on the address bar (to ensure focus is on the browser window and not the embedded flash player).
- What we are after is the source code, so Press ‘Ctrl+U’ (View source).
- Now the source code we need is shown. You may need to scroll down a little to the end of the </head>, then copy the block of text shown below:
- Now paste this source code - in red below - into the <head> of our 'Look at my Model' web page. So far this is how the page looks.
<html>
<head>
<title>Look at My Model</title>
<script type="text/javascript" src="swfobject.js"></script>
- <script type="text/javascript">
- // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
- var swfVersionStr = "11.1.0";
- // To use express install, set to playerProductInstall.swf, otherwise the empty string.
- var xiSwfUrlStr = "playerProductInstall.swf";
- var flashvars = {};
- flashvars.inviteId = '6';
- flashvars.inviteCode = '220947';
- flashvars.subName = 'acp demos';
- var params = {};
- params.quality = "high";
- params.bgcolor = "#ffffff";
- params.allowscriptaccess = "sameDomain";
- params.allowfullscreen = "true";
- params.wmode = "transparent";
- var attributes = {};
- attributes.id = "AcpAs3";
- attributes.name = "AcpAs3";
- attributes.align = "left";
- swfobject.embedSWF(
- "AcpAs3.swf", "flashContent",
- "100%", "100%",
- swfVersionStr, xiSwfUrlStr,
- flashvars, params, attributes);
- // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
- swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
<head>
<body>
<h1>Look at My Model</h1>
</body>
</html>
- Next, go back to the source code and scroll down to the <body> and copy this block of code - including the
<div></div>
tags.:
- Paste this code into the <body> as shown below in red; so the web page code looks like this:
<html>
<head>
<title>Look at My Model</title>
<script type="text/javascript" src="swfobject.js"></script>
- <script type="text/javascript">
- // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
- var swfVersionStr = "11.1.0";
- // To use express install, set to playerProductInstall.swf, otherwise the empty string.
- var xiSwfUrlStr = "playerProductInstall.swf";
- var flashvars = {};
- flashvars.inviteId = '6';
- flashvars.inviteCode = '220947';
- flashvars.subName = 'acp demos';
- var params = {};
- params.quality = "high";
- params.bgcolor = "#ffffff";
- params.allowscriptaccess = "sameDomain";
- params.allowfullscreen = "true";
- params.wmode = "transparent";
- var attributes = {};
- attributes.id = "AcpAs3";
- attributes.name = "AcpAs3";
- attributes.align = "left";
- swfobject.embedSWF(
- "AcpAs3.swf", "flashContent",
- "100%", "100%",
- swfVersionStr, xiSwfUrlStr,
- flashvars, params, attributes);
- // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
- swfobject.createCSS("#flashContent", "display:block;text-align:left;");
- </script>
<head>
<body>
<h1>Look at My Model</h1>
- <div id="flashContent">
- <p>
- To view this page ensure that Adobe Flash Player version
- 11.1.0 or greater is installed.
- </p>
- <script type="text/javascript">
- var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
- document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
- + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
- </script>
- <div>
</body>
</html>
Step 4 - A Couple More Tweaks
Now we are getting close to being finished. Just a couple more tweaks.
- Edit the path to the swfObject.js file in <head> of your html page from this:
<script type="text/javascript" src="swfobject.js"</script>
...to this (type/paste the code in red below):
<script type="text/javascript"
src="https://www.analyticacloud.com/acp/clientAs3/swfobject.js"</script>
- Continuing with the script in the <head>, we need to edit the link to the shockwave file to that shown in red below:
before:
swfobject.embedSWF(
- "AcpAs3.swf", "flashContent",
"100%", "100%",
after:
swfobject.embedSWF(
- "https://www.analyticacloud.com/acp/ClientAs3/AcpAs3.swf", "flashContent",
"100%", "100%",
Step 5 - Optional - Set the size for the ACP rectangle on your web page
- In the previous line of code you can substitute your desired width and height for the ACP rectangle on your web site e.g.:
:"400", "300",
to replace the"100%", "100%",
Step 6 - Time to test it
So now you can try saving the html file and loading this page onto your webserver and then loading the page in a browser window. Hopefully, it will display your model below the page’s title something like this:
Summary
Hopefully these two examples are a clear enough demonstration of how to play a model on a web page on your site by either using an HTML frame or using some Javascript code.
If you have questions, or if something isn’t working, please email us at acp@lumina.com and we will be happy to help you out.
Enable comment auto-refresher