Embed an ACP model in a Web Page

Revision as of 18:45, 12 November 2024 by Mhenrion (talk | contribs) (→‎Overview: simpified a bit)


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

Usually, the easiest way to embed the model is add a frame to your web page -- although there are other methods. If for some reason HTML frames are not a viable option, see Embed an ACP model in a Web page using an iFrame or no frame.

Showing your model in a Frame

To keep it simple, let’s say you just want to display your header logo at the top of the parent web page, and then have the ACP model shown below that. 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.

  1. Your Server, the server where your web site resides. This is the server you are able to upload and edit pages on.
  2. 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.

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.html 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.html" ></frame>
    <frame noresize="true" src=""></frame>
</frameset>
</html>

The web page above contains two frames (pages).

  1. The first yourHeader.html 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.
  2. 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.

  1. Sign into your ACP account
  2. 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).
  3. Use the radio button to select your model.
    ACPFrame01.png
  4. 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.
  5. Copy the link from this email invite.
    ACPFrame02.png

  6. After you copy the link, you press the Cancel button since we aren’t sending the invite to anyone.
  7. Go back to parent.htm, and paste the text from this link into the “scr” attribute for the second frame as shown 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://acp.analytica.com/view?invite=4771&code=2359748081441958275"></frame>
</frameset>
</html>
8. Now save parent.htm to a folder on your hard drive.

Step 3 - Creating yourHeader.html

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, we will mock up a header which is just an image of the Analytica cloud platform logo.

  1. Create the file yourHeader.html which you will insert into the "src" attribute of the first frame. Here is the code:
<html>
<body>
<img src="File:ACPlogo.png"/>
</body>
</html>
2. Save yourHeader.html to the same folder as parent.html. This file just loads the ACPlogo.png image, shown below:
ACPFrame3 - AnalyticaCloudPlatform.png
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:

ACPFrame04.png


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.

See Also

Comments


You are not allowed to post comments.