The instructions below explain the general principles of deploying your animated Xplains on your website. The procedure is like embedding a YouTube video, and just as easy.
Files you need to upload
When you publish a an animated HTML infographic, HelpXplain creates the following files and folders in your output folder, which should be empty before you start. You should upload the entire folder with all the files it contains to a suitable location on your web server.
|
This is the main Xplain file. It will usually be called index.html but you can give it any name you like. The name index.html will be opened automatically by web browsers on most web servers. However, you need to use different names if you want to put multiple Xplains in the same folder.
|
|
This folder contains the photos and other graphical images used in your Xplain. It has the name of the main HTML file without the .html extension.
|
|
This folder contains the script files used to make your Xplain work.
|
Embed Code:
To get the specific code for each Xplain select the In Master Page option for previewing your Xplain in the dialog. You will then be shown the specific folder names and embed code for deploying your Xplain on your website.
After publishing, the finished Xplain will be displayed in a master page with a bar on the left, like this;
Dimensions and embed code:
The defined display dimensions of your Xplain will be shown in the box in the Master Page preview. However, the absolute dimensions are not critical, because an Xplain is always responsive and automatically fits the screen where it is displayed. What is important is maintaining the aspect ratio (the relationship of width to height).
The code for embedding a responsive iFrame containing your Xplain in your own web page will look like the example below, but the individual settings may be slightly different depending on the settings in your individual Xplain.
You will need to adjust the path in the src= reference depending on where you store the Xplain files and folders relative to the web page containing the embed code.
Sample embed code:
<div style="position:relative; width:100%; height:0; padding:0 0 56.333333333333336% 0; overflow:hidden">
<iframe style="position:absolute; left:0; top:0; width:100%; height:100%; border:none"
src="./your-folder-name/index.html">
</iframe>
</div>
|