Embed an ACP model in a Web Page

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.

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

<html>
<head>
<title>Look at My Analytica Model</title>
</head>
<body>
<h1>Look at My Analytica Model</h1>
</body>
</html>

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

Step 2 - Creating the Link to Play Your Model

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. Here we select Project portfolio planner.ana.
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.

Step 3: Insert the code for an Iframe.

1. Now in the web page source Insert the code for an Iframe with the link to your model in it.
2. For example, set the iframe to be 600 pixels wide by 400 pixels high.
3. 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:

<html>
<head>
  <title>Look at My Analytica Model</title>
</head>
<body>
  <h1>Look at My Analytica Model</h1>
  <iframe width="600" height="400" src="https://acp.analytica.com/view?invite=4771&code=2359748081441958275"></iframe>
</body>
</html>

4. 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 It will display the model in the iframe like this:

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 a user clicks it . This page has an example.