View source for Embed an ACP model in a Web Page

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

[[Analytica_Cloud_Platform|<<back]]

==Overview==
People normally view [[Analytica Cloud Platform]] (ACP) models on an acp server  such as [https://ACP.Analytica.com  https://ACP.Analytica.com].  However, you can also embed an ACP model in any web page, for example on your own web site, to make it more easily accessible to end users.  When you do this, your users see the ACP model as a region in an iFrame within your HTML content, although the model is actually being run on the ACP server.  

This page explains how to configure your own web page to display an ACP model.

'''Prerequisite:''' You must already have an ACP account, which you do if you have a subscription to any desktop Edition of Analytica.

The model will appear and use an ACP session credit whenever a user visits the web page. You can avoid this (and the time delay while the ACP model loads) by hiding the model behind an image which can be a screenshot of the top module of the ACP model. You can add code to start the model when the image or a button is clicked and use a session credit only when a user clicks the image.

==Showing your model in an inline Frame (Iframe)==
An inline frame is just an HTML document embedded inside another HTML document on a website. 

=== Step 1: Create a Web page. ===
To start simple, let’s display an ACP model in an otherwise empty web page, in an Iframe. We’ll show you an example of how to do this, plus a few tweaks, 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.
*ACP’s server, https://acp.analytica.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.''

#First, create a web page - you can use a text editor. Here is one that just contains a title, 'Look at My Analytica Model'. Save this as an html file ACPIframe.html.

<div style="margin-left: 2em;">
<code><nowiki>&lt;html&gt;</nowiki></code><br>
<code><nowiki>&lt;head&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;title&gt;Look at My Analytica Model&lt;/title&gt;</nowiki></code><br>
<code><nowiki>&lt;/head&gt;</nowiki></code><br>
<code><nowiki>&lt;body&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;h1&gt;Look at My Analytica Model&lt;/h1&gt;</nowiki></code><br>
<code><nowiki>&lt;/body&gt;</nowiki></code><br>
<code><nowiki>&lt;/html&gt;</nowiki></code>
</div>

When opened in the Chrome browser this is what this web page initially displays :

:[[File:ACPIFrame01.png]]

=== Step 2 - Creating the Link to Play Your Model ===
Use ACP’s Email Invite functionality to create the link which will play your model.

#[https://acp.analytica.com/ Sign into your ACP account]  
#If your model doesn't already use  [[ACP_Auto_zoom|Auto Zoom]] style that will make the ACP zoom to fit the Iframe, you should make it do so. Click the model to open it in ACP, select ACP Style lib, and set it to Auto Zoom. Then save the model.
#Click a radio button to select your model -- in this example. the Project portfolio planner.ana.
#:[[File:ACPFrame01.png|720px|thumb|left]]
#Click the '''Email Invite''' button to show the email invitation dialog:
#Copy the link from this email invite. <br/>
#:[[File:ACPFrame02.png|720px|thumb|left]]<br/>
#Press '''Cancel''' button, since we aren’t sending the invite to anyone.

''Note: Ensure a model you insert in a web page stays in the same ACP Model Project and folder.'' If you delete it, the web page will show an error message saying "the model can't be found".

===Step 3: Insert the code for an Iframe. ===
<ol>
<li> Now in the  web page source Insert the code for an Iframe with the link to your model in it.</li>
<li>Set the Iframe to be a size that looks good for your model diagram, and that fits with auto zoom. It will probably need to be tweaked later, but you can do this by playing the model in ACP, and by using developer's tools or by taking a screenshot of the model and checking the dimensions. In this case the model looks good at width: 900px; height: 446px.</li>
<li>Add Iframe html tags and paste the link for your model into the "src" attribute, and the code for ACPIframe.html will look like this. Insert your model's URL into the URL highlighted in yellow and adjust the sizes highlighted in cyan as necessary: </li>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> ACPIframe.html sample code</div>
<div class="mw-collapsible-content">
<code><nowiki>&lt;html&gt;</nowiki></code><br>
<code><nowiki>&lt;head&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;title&gt;Look at My Analytica Model&lt;/title&gt;</nowiki></code><br>
<code><nowiki>&lt;/head&gt;</nowiki></code><br>
<code><nowiki>&lt;body&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;h1&gt;Look at My Analytica Model&lt;/h1&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;iframe width="</nowiki><span style="background-color: cyan;">900</span>" height="<span style="background-color: cyan;">446</span><nowiki>" src="</nowiki><span style="background-color: yellow;"><nowiki>https://acp.analytica.com/view?invite=4771&amp;code=2359748081441958275</nowiki></span>"&gt;&lt;/iframe&gt;</code><br>
<code><nowiki>&lt;/body&gt;</nowiki></code><br>
<code><nowiki>&lt;/html&gt;</nowiki></code>
</div></div>


<li>Now you can save the web page and load it in a browser. Or you can see it on the Analytica docs server here: [https://docs.analytica.com/custom_pages/ACPIframe.html https://docs.analytica.com/custom_pages/ACPIframe.html]
It will display the model in the iframe like this:</li>
:[[File:ACPIFrame02.png|720px|thumb|left]]
Download the example html [[File:ACPIframe.zip]].

</ol>
<!--
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.
-->

==Put an ACP model behind an image==
To avoid the ACP model loading each time the page is visited, you can hide the model behind an image, and add code to start the model when the  image is clicked like a button. 

'''Tip:''' To save time and get the screen shots to paste into an editor at close to the same size as what you are seeing in the browser, you may want to adjust your display settings to 100%.

<ol>
<li>Make a display image to put over the iframe when ACP is not running the model. Here is one way to do this:</li>
<ol>
<li>Enter the source url from the html into the address bar for Chrome. Then with the browser unmaximized, adjust the window size until it looks good and the zoom fits the diagram. Using developer's tools elements tab I can see the model diagram looks pretty good at 900px wide; 447px height;.[[File:ACPIFrame05.png|720px|thumb|left]]
</li>
<li>Take a screenshot, crop it to remove all but the model and the top bar and save the image.
[[File:ACPIFrame06.png|720px|thumb|left]]</li>
</ul>
<li>Save the image where it is accessible to the javascript - for instance, in the same folder or in an uploads directory.</li>
<li>Add a div in the html source containing the container with the display image and the following script. Add your URL in place of the yellow highlighted URL below, and adjust the cyan highlighted dimensions as necessary to fit your site.</li></ol>
<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Model behind image sample code</div>
<div class="mw-collapsible-content">
<code><nowiki>&lt;html&gt;</nowiki></code><br>
<code><nowiki>&lt;head&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;title&gt;Look at My Analytica Model&lt;/title&gt;</nowiki></code><br>
<code><nowiki>&lt;/head&gt;</nowiki></code><br>
<code><nowiki>&lt;body&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;h1&gt;Look at My Analytica Model&lt;/h1&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px; width: </nowiki><span style="background-color: cyan;">900px</span>; height: </nowiki><span style="background-color: cyan;">447px</span><nowiki>;"&gt;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>&lt;img id="runImage" src="ACPIframe02.png" style="width: 100%; height: 100%;"&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;/div&gt;</nowiki></code><br><br>
&nbsp;&nbsp;<code><nowiki>&lt;script&gt;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>function showIframe() {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Hide the image</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Create and configure the iframe</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const iframe = document.createElement('iframe');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.src = '</nowiki><span style="background-color: yellow;"><nowiki>https://acp.analytica.com/view?invite=4714&code=4200729999208732852</nowiki></span><nowiki>';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.width = '</nowiki><span style="background-color: cyan;">900px</span><nowiki>';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.height = '</nowiki><span style="background-color: cyan;">446px</span><nowiki>';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.border = 'none';</nowiki></code><br><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Append the iframe to the container</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.getElementById('container').appendChild(iframe);</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Add click event listener to the image container</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.getElementById('container').addEventListener('click', showIframe);</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;/script&gt;</nowiki></code><br>
<code><nowiki>&lt;/body&gt;</nowiki></code><br>
<code><nowiki>&lt;/html&gt;</nowiki></code>
</div></div>


Download the example html file and image [[File:ACPIModelBehindImage.zip]]

You can see what this page looks like here: [https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html https://docs.analytica.com/custom_pages/ACPModelBehindIframe.html]

== Buttons to expand to full screen and minimize==

It's convenient for users to be able to expand an embedded ACP window to the full browser window -- and to minimize it again.  Here's a live example:  [[https://docs.analytica.com/custom_pages/ACPIframeInteract.html https://docs.analytica.com/custom_pages/ACPIframeInteract.html]


Here is how to add 
* a maximize button [[File:Arrows-maximize.png|24px]] to show the Iframe fullscreen -  visible in the Iframe when the model is running at normal size.
* a minimize button [[File:Arrows-minimize.png|24px]] to exitfull screen visible when the Iframe is full screen.
* a button on the Iframe labeled "click to interact with the model in Analytica Cloud Platform" to clarify that you need to click it to start the model in ACP.
* Some styling with a 1 pixel wide outline and a drop shadow. You can set these in a css file too.
* The fullscreen and minimize icons from the docs.analytica.com wiki - we will just use links to them for now. You can insert any icon you like.

Here is an example html file with the code to add these extra features, using the same overlay image as before: [[File:ACPIframeInteract.zip]]

Here is example code to add these extra features. You will need to change the following highlighted code to customize it properly for your page:
* Yellow: Your model's URL
* Cyan: Your model's ideal display size
* Green: URL where you are hosting the minimize/maximize icon files
* Pink: URL where you are hosting a still image of your model (users click on this image, typically of the model itself, to run the model).


<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated HTML for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki>&lt;!DOCTYPE html&gt;</nowiki></code><br>
<code><nowiki>&lt;html&gt;</nowiki></code><br>
<code><nowiki>&lt;head&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;title&gt;Interactive Analytica Model&lt;/title&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;style&gt;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>#container {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>position: relative;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>cursor: pointer;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>width: </nowiki><span style="background-color: cyan;">900px</span><nowiki>;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>height: </nowiki><span style="background-color: cyan;">447px</span><nowiki>;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>margin: 0 auto;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>border: 1px solid #ccc;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>#runImage {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>width: 100%;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>height: 100%;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>display: block;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>.control-button {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>position: absolute;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>width: 30px;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>height: 30px;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>background-size: contain;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>background-repeat: no-repeat;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>background-color: transparent;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>border: none;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>cursor: pointer;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>#maximizeButton {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>bottom: 10px;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>right: 120px;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>background-image: url("</nowiki><span style="background-color: lime;"><nowiki>https://docs.analytica.com/images/9/9c/Arrows-maximize.png</nowiki></span>");</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>display: none;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>#minimizeButton {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>bottom: 10px;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>right: 120px;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>background-image: url("</nowiki><span style="background-color: lime;"><nowiki>https://docs.analytica.com/images/8/82/Arrows-minimize.png</nowiki></span><nowiki>");</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>display: none;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>#interactButton {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>position: absolute;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>bottom: 10px;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>right: 120px;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>padding: 5px 10px;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>font-size: 16px;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>font-weight: bold;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>background-color: #e4e4e4;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>color: black;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>border: none;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>border-radius: 5px;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>cursor: pointer;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>opacity: 0.9;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>display: inline-block;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;/style&gt;</nowiki></code><br>
<code><nowiki>&lt;/head&gt;</nowiki></code><br>
<code><nowiki>&lt;body&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;div id="container"&gt;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>&lt;img id="runImage" src="</nowiki><span style="background-color: pink;">ACPIframe02.png</span><nowiki>"&gt;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>&lt;button id="maximizeButton" class="control-button" title="Click to use full screen"&gt;&lt;/button&gt;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>&lt;button id="minimizeButton" class="control-button" title="Exit full screen"&gt;&lt;/button&gt;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>&lt;button id="interactButton"&gt;Click to interact with the model in Analytica Cloud Platform&lt;/button&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;/div&gt;</nowiki></code><br>
</div></div>

<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;"> Updated script for minimize/maximize buttons</div>
<div class="mw-collapsible-content">
<code><nowiki>&lt;script&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>document.addEventListener('DOMContentLoaded', function () {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>let iframeAdded = false;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const container = document.getElementById('container');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const runImage = document.getElementById('runImage');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>function showIframe() {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>runImage.style.display = 'none';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.display = 'none';</nowiki></code><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (!iframeAdded) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const iframe = document.createElement('iframe');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.src = '</nowiki><span style="background-color: yellow;"><nowiki>https://acp.analytica.com/view?invite=4771&code=2359748081441958275</nowiki></span><nowiki>';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.width = '100%';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.height = '100%';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.border = 'none';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.appendChild(iframe);</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframeAdded = true;</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>function maximizeIframe() {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (container.requestFullscreen) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.requestFullscreen();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>} else if (container.webkitRequestFullscreen) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.webkitRequestFullscreen();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>} else if (container.msRequestFullscreen) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.msRequestFullscreen();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.display = 'none';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.display = 'inline-block';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>function minimizeIframe() {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (document.exitFullscreen) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.exitFullscreen();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>} else if (document.webkitExitFullscreen) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.webkitExitFullscreen();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>} else if (document.msExitFullscreen) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.msExitFullscreen();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.display = 'inline-block';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.display = 'none';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.addEventListener('click', function (event) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>event.stopPropagation();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>showIframe();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.addEventListener('click', function (event) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>event.stopPropagation();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeIframe();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.addEventListener('click', function (event) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>event.stopPropagation();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeIframe();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.addEventListener('click', showIframe);</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br>
<code><nowiki>&lt;/script&gt;</nowiki></code><br>
<code><nowiki>&lt;/body&gt;</nowiki></code><br>
<code><nowiki>&lt;/html&gt;</nowiki></code>
</div></div>

==ACP in an Iframe on a wiki==
You cannot usually add html or javascript into a mediawiki page.  Instead, you can run the code in a widget. To do this you need to install the widget extension, then save the code as a widget page  and put the widget into your mediawiki page.
*Here's an example page in Analytica docs which uses a widget file to run the same model. [https://docs.analytica.com/index.php/Testiframe https://docs.analytica.com/index.php/Testiframe].
*You can inspect this code by navigating to the page and selecting <code>This page > show source</code>. 
*You can also navigate to the widget page and view the source: [https://docs.analytica.com/index.php/Widget:Ppplanner05 https://docs.analytica.com/index.php/Widget:Ppplanner05].

==ACP in an Iframe on a wordpress site==
Running live on this page: [https://analytica.com/acpiframeminmax/ https://analytica.com/acpiframeminmax/]
To add an iframe running an ACP model on an Elementor page:
*Upload images needed to your wordpress site and note the location and urls.
*Click edit with Elementor.
*Add a new section then drag an HTML widget onto the section.
*In the code block for the HTML widget enter the code for your overlay image and for your iframe. ''Below this bullet list is the code for this particular Iframe: you would need to edit the elements - e.g. container and styles.''
* Press the submit button in Elementor to save the page version
* Check the functionality - probably the best way is to open an incognito tab to ensure you don't get browser cxaching interferingm, then check the playing of the model. 
* Once the section with the Iframe is playing the model as desired you can exit the page In Elementor.

Here is example code to do this. You will need to change the following highlighted code to customize it properly for your page:
* Yellow: Your model's URL
* Cyan: Your model's display size
* Green: URL where you are hosting the minimize/maximize icon files
* Pink: URL where you are hosting a still image of your model (users click on this image, typically of the model itself, to run the model)
* Magenta: Dimensions of the still image of your model (pink)


<div class="toccolours mw-collapsible" style="margin-left: 2em;overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Code for an ACP model playing in an Iframe in elementor</div>
<div class="mw-collapsible-content">
<code><nowiki>&lt;script&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>function showIframe() {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.getElementById('runImage').style.display = 'none';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const container = document.getElementById('container');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const interactButton = document.getElementById('interactButton');</nowiki></code><br><br>

&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Hide the "Interact" button if present</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (interactButton) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.display = 'none';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>

&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Check if iframe is already present</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>let iframe = document.getElementById('embeddedIframe');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (!iframe) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe = document.createElement('iframe');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.id = 'embeddedIframe';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.src = '</nowiki><span style="background-color: yellow;"><nowiki>https://acp.analytica.com/view0?invite=4314&amp;code=2462049136540573676</nowiki></span><nowiki>';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.width = '</nowiki><span style="background-color: cyan;">1210px</span><nowiki>';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.height = '</nowiki><span style="background-color: cyan;">600px</span><nowiki>';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.border = 'none';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.appendChild(iframe);</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.display = 'block';</nowiki></code><br><br>

&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Ensure maximize button is displayed</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>let maximizeButton = document.getElementById('maximizeButton');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (!maximizeButton) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton = document.createElement('button');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.id = 'maximizeButton';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.title = 'Click to use full screen';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.position = 'absolute';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.bottom = '10px';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.right = '110px';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.background = 'transparent';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.border = 'none';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.cursor = 'pointer';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.width = '30px';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.height = '30px';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.backgroundImage = 'url("</nowiki><span style="background-color: lime;"><nowiki>https://analytica.com/wp-content/uploads/2024/11/arrows-maximize.png</nowiki></span><nowiki>")';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.backgroundSize = 'contain';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.onclick = function() {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.requestFullscreen();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.width = "100%";</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.height = "100%";</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>maximizeButton.style.display = 'none';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.display = 'block';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>};</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.appendChild(maximizeButton);</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Ensure minimize button is created</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>let minimizeButton = document.getElementById('minimizeButton');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (!minimizeButton) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton = document.createElement('button');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.id = 'minimizeButton';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.title = 'Exit full screen';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.position = 'fixed';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.bottom = '10px';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.right = '110px';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.background = 'transparent';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.border = 'none';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.cursor = 'pointer';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.width = '30px';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.height = '30px';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.backgroundImage = 'url("</nowiki><span style="background-color: lime;"><nowiki>https://analytica.com/wp-content/uploads/2024/11/arrows-minimize.png</nowiki></span><nowiki>")';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.backgroundSize = 'contain';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.backgroundRepeat = 'no-repeat';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.style.display = 'none'; // Hidden initially</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>minimizeButton.onclick = function() {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>document.exitFullscreen();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.width = '</nowiki><span style="background-color: cyan;">1210px</span><nowiki>';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.height = '</nowiki><span style="background-color: cyan;">600px</span><nowiki>';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>};</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.appendChild(minimizeButton);</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br><br>

&nbsp;&nbsp;<code><nowiki>// Event listener to handle fullscreen changes</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>document.addEventListener('fullscreenchange', function() {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const maximizeButton = document.getElementById('maximizeButton');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const minimizeButton = document.getElementById('minimizeButton');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const iframe = document.getElementById('embeddedIframe');</nowiki></code><br><br>

&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Check if in fullscreen mode</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (document.fullscreenElement) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (maximizeButton) maximizeButton.style.display = 'none';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (minimizeButton) minimizeButton.style.display = 'block';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>} else {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (maximizeButton) maximizeButton.style.display = 'block';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>if (minimizeButton) minimizeButton.style.display = 'none';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>// Restore iframe size when exiting fullscreen</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.width = '</nowiki><span style="background-color: cyan;">1210px</span><nowiki>';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>iframe.style.height ='</nowiki><span style="background-color: cyan;">600px</span><nowiki>';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>}</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br><br>

&nbsp;&nbsp;<code><nowiki>// Create the "Click to interact" button</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>document.addEventListener('DOMContentLoaded', function() {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const container = document.getElementById('container');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>const interactButton = document.createElement('button');</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.id = 'interactButton';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.position = 'absolute';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.bottom = '13px';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.right = '140px';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.padding = '5px 10px';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.fontSize = '16px';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.fontWeight = 'bold';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.backgroundColor = '#d3d3d3';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.color = 'black';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.border = 'none';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.borderRadius = '5px';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.cursor = 'pointer';</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.style.opacity = '0.9';</nowiki></code><br><br>

&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>interactButton.onclick = function(event) {</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>event.stopPropagation();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>showIframe();</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>};</nowiki></code><br>
&nbsp;&nbsp;&nbsp;&nbsp;<code><nowiki>container.appendChild(interactButton);</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>});</nowiki></code><br>
<code><nowiki>&lt;/script&gt;</nowiki></code><br>
<br>
<code><nowiki>&lt;div id="container" class="screenshot-border" style="position: relative; width: 100%; height: auto;"&gt;</nowiki></code><br>
&nbsp;&nbsp;<code><nowiki>&lt;img id="runImage" src="</nowiki><span style="background-color: pink;"><nowiki>https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp</nowiki></span><nowiki>" width="</nowiki><span style="background-color: magenta;">1210px</span><nowiki>" height="</nowiki><span style="background-color: magenta;">648px</span><nowiki>" onclick="showIframe()" style="cursor: pointer;"&gt;</nowiki></code><br>
<code><nowiki>&lt;/div&gt;</nowiki></code>
</div></div>

<!--
'''<font color="blue">Coming...this section is under construction.</font>'''-->

==See Also==
* [[Analytica Cloud Player]]
* [[Example Models]]
* [[Tutorial: Sharing a model with ACP]]
* [[Model Licensing]]