Embed an ACP model in a Web Page

<<back Page under construction"

Overview

People normally view Analytica Cloud Platform (ACP) models on an acp server such as 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.

You should be aware that any time a new user opens the web page, the model will appear and use an ACP session credit. You can avoid this (and the time delay while the ACP model loads) by hiding the model behind an image, and adding code to start the model when a user clicks it . here is an example.

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 keep it simple, let’s say you just want to display an ACP model in an otherwise empty web page, in an Iframe. We’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, 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 to 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>

If I save this on my server as ACPIframe.html and open it with the Chrome browser this is what this web page initially displays :

step 2 - Creating the Link to Play Your Model

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 ACPIframe.html, and paste the text from this link into the “scr” attribute for the second frame as shown below:

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:

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

3. So now copy this logo and save it as ACPlogo.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.html, yourHeader.html, and yourHeader.png. Just upload them into a folder, and then load parent.html in a browser. In this case, the model will play on the web page looking like this:

Or, if you just want to test this out on your computer, launch a browser, from the File menu select Open, and open parent.html. Here is a zipped archive of these 3 files File:ACPframe.zip.

Summary

Hopefully this example is a clear enough demonstration of how to play a model on a web page on your site. As menioned above, if for some reason a Frame is not an option, you can use one of the other methods described here Embed an ACP model in a Web page using an iFrame or no frame.

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.