View source for Embed an ACP model in a Web page using an iFrame or no frame

[[Category: Analytica Cloud Platform]]
[[Category:  Models]]

[[Analytica_Cloud_Platform|<<back]]


==Overview==
Suppose you want to allow users to play your model from a web page on your web site.  With [[Analytica Cloud Platform]] (ACP) you can do this. 

The way we have found is the easiest to show an ACP model in your web page is to use a frame, this method is described here: [[Embed an ACP model in a Web Page]].

If for some reason HTML frames are not a viable option, you can use one of the methods described here,

'''Prerequisite:''' You must already have an ACP account.

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  [[AcpStyles#Hide_the_Banner_and_Logo|here]].''

==Example 1 - Using an IFrame (Inline Frame)==

An inline frame is just an HTML document embedded inside another HTML document on a website. 

=== 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'. 

<pre style="background:white; border:white; margin-left: 1em;">
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Look at My Model&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Look at My Model&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

This is what this web page initially displays:

:[[File:ACP in a web page 05 - Look at my model.png]]

=== Step 2: Create the Link. ===

Currently, you can use ACP’s Email Invite functionality to create the link which will play your model.

#[https://www.analyticacloud.com/acp/client/AnalyticaCloudPlayer.aspx 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.
#:[[File:ACP inn a web page 01 - model folder.png]]<br/>
#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. <br/>
#:[[File:ACP_inn_a_web_page_02_-_email_invite.png]]<br/>
#After you copy the link, you press the '''Cancel''' button since we aren’t sending the invite to anyone.

===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...
* Paste the link for your model into the "src"attribute, and the code for your web page would look like this:

<pre style="background:white; border:white; margin-left: 1em;">
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Look at My Model&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Look at My Model&lt;/h1&gt;
    &lt;iframe width="600" height="400" src="<nowiki>https://www.analyticacloud.com/acp/ClientAs3/AcpFlex.aspx?inviteId=30&inviteCode=905163&subName=fredbrunt%40gmail%2Ecom</nowiki>"&gt;&lt;/iframe&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

*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:

:[[File:ACP_in_a_web_page_03_-_iframe.png]]

<!--
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 &lt;head&gt; and then paste a block of javascript code into the &lt;body&gt;.  

===Step 2 - &lt;Head&gt;s up===

Let’s start with the &lt;Head&gt; 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:

<pre style="background:white; border:white; margin-left: 1em;">
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Look at My Model&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Look at My Model&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

This is what this web page initially displays:

:[[File:ACP in a web page 05 - Look at my model.png]]

===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.

*[https://www.analyticacloud.com/acp/client/AnalyticaCloudPlayer.aspx 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
*:[[File:ACP in web page 04 select car cost.png]]<br/>
*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. <br/>
*:[[File:ACP in a web page 5 copy car cost link.png]]<br/>
*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).<br/>
:[[File:ACP in a web page 6 - Address bar car cost.png]]<br/>
*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 &lt;/head&gt;, then copy the block of text shown below:
:[[File:ACP in a web page 7 copy js code.png]]<br/>
*Now paste this source code into the &lt;head&gt; of our 'Look at my Model' web page. So far this is how the page looks.

<pre style="background:white; border:white; margin-left: 1em;">
&lt;html&gt;<br/>
&lt;head&gt;
&lt;title&gt;Look at My Model&lt;/title&gt;
&lt;script type="text/javascript" src="swfobject.js">&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    // 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;");
&lt;/script&gt;  
&lt;head&gt;

&lt;body&gt;
&lt;h1&gt;Look at My Model&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

*Next, go back to the source code and scroll down to the &lt;body&gt; and copy this block of code - including the <code>&lt;div&gt;&lt;/div&gt;</code> tags.:
:[[File:ACP in a web page 8 copy js code.png]]<br/>
*Paste this code into the &lt;body&gt; as shown below in red; so the web page code looks like this:

<pre style="background:white; border:white; margin-left: 1em;">
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Look at My Model&lt;/title&gt;
    &lt;script type="text/javascript" src="swfobject.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        // 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;");
    &lt;/script&gt;  
&lt;head&gt;<br/>
&lt;body&gt;<br/>
&lt;h1&gt;Look at My Model&lt;/h1&gt;
    &lt;div id="flashContent"&gt;
        &lt;p&gt;
            To view this page ensure that Adobe Flash Player version 
            11.1.0 or greater is installed. 
        &lt;/p&gt;
        &lt;script type="text/javascript"&gt; 
            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>" );
        &lt;/script&gt;
    &lt;div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

===Step 4 - A Couple More Tweaks===
Now we are getting close to being finished.  Just a couple more tweaks.  
*Edit the path to the <code>swfObject.js</code> file in &lt;head&gt; of your html page from this:

:<code>&lt;script type="text/javascript"> src="swfobject.js"&lt;/script&gt;</code>

...to this (type/paste the code below):<br/>

:<code>&lt;script type="text/javascript"></code>
:<code>src="<nowiki>https://www.analyticacloud.com/acp/clientAs3/swfobject.js</nowiki>"&lt;/script&gt;</code><br/>

*Continuing with the script in the &lt;head&gt;, we need to edit the link to the shockwave file to that shown below:

before:
<pre style="background:white; border:white; margin-left: 1em;">
swfobject.embedSWF(
    "AcpAs3.swf", "flashContent", 
    "100%", "100%",
</pre>

after:
<pre style="background:white; border:white; margin-left: 1em;">
swfobject.embedSWF(
    <nowiki>"https://www.analyticacloud.com/acp/ClientAs3/AcpAs3.swf"</nowiki>,"flashContent", 
    "100%", "100%",
</pre>

===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.:
:<code>"400", "300", </code>  to replace the <code>"100%", "100%",</code>

===Step 6 - Time to test it===
So now you can try saving the html file and loading this page onto your web server and then loading the page in a browser window. 
<!--Here's a link to the file we created on our server, if you want to see what it looks like or view the source https://www.analyticaonline.com/acp3inawebpage/ACPinawebpageembedjs.html-->
Hopefully, it will display your model below the page’s title something like this:

:[[File:ACP in a web page 9 finished.png]]

==Summary==
Hopefully these examples are a clear enough demonstration of how to play a model on a web page on your site by either using an iframe 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.

==See Also==
* [[Embedding an ACP model in a Web Page]]
* [[Analytica Cloud Platform]]
* [[Example Models]]
* [[Tutorial: Sharing a model with ACP]]
* [[Model Licensing]]