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.

Embed Code:

To get the specific code for each Xplain select the In Master Page option for previewing your Xplain in the Publish 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 How to Deploy bar on the left, like this;

Dimensions and embed code:

The defined display dimensions of your Xplain will be shown in the How to Deploy 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>

This method requires a little more configuration but it gives you more control over how your Xplains are loaded and displayed. It is particularly useful if you are putting multiple Xplains on the same page, because then you can minimize their impact on your page load time. There are also a number of other configuration options.

Script documentation

The documentation of the code snippet you need to insert is also included in the xploader.js script that you will find in the /js subfolder in your output folder when you publish an Xplain. You can delete the documentation text in this script before using it if you wish to make it more compact.

Special loader features

When you use the loader script you can minimize the impact of the Xplains on your page's loading performance. You can specify that their assets won't load until they are needed. You can also configure the Xplains so that they don't load their components until they scroll into view and/or are clicked or tapped by the user.

Files you need to upload

Here too, you first need to upload all the contents of your publishing output folder to your website to make the Xplain available.

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.

The loader script

The loader script is called xploader.js and you will find it in the \js\ subfolder along with all the other Xplain scripts. You can leave it there if you want, or put it somewhere else. For example, if your pages are on one server but you are embedding them in pages hosted in another location, you might want to put xploader.js on the same server as your web pages.

Step 1: Add the script reference to your page

You need to reference the xploader.js script after the snippet of code in the page that inserts the Xplain, or after all of them if there is more than one Xplain on the page. The best place for it is directly before the closing </body> tag at the bottom of the page.

<script src="<relative path>/js/xploader.js" type="text/javascript"></script>
</body>
</html>

Replace <relative path> with the path to the folder where the xploader.js script is stored.

Using defer to put the script reference in the <head> section

Alternatively you can also insert the script reference at the end of the <head> section of your page, provided you include the defer directive in the reference to ensure that the script is not executed until after the page has loaded:

<script defer src="<relative path>/js/xploader.js" type="text/javascript"></script>
</head>
...

Step 2: Add the code snippet where you want the Xplain to appear

The insertion snippet is a simple <div></div> tag with the class helpxplain and some additional attributes to configure how your Xplain is to be handled. It looks like this:

    <div class="helpxplain" 
    data-url="http://helpxplain.com/xplain/ppfan/index.html" 
    data-title="PPFan Example (click to play)"
    data-caption="This is the <b>caption</b> of this Example (click to play)"
    data-aspect="72.76227"
    data-lightbox="false" 
    data-load="click" 
    data-playbutton="true" 
    data-playafter="0" 
    data-startat="2">
    </div>

Attributes of the code snippet

This list provides a reference to the attributes you must and can use in the Xplain code snippet. Mandatory attributes are shown in red.

Examples

The best way to understand how this works is with examples. This will answer your questions much more directly than any theoretical explanations.

Image slider with autoplay after 3 seconds

Create your image slider Xplain with the Blank or Minimalist skin to eliminate distracting elements. These settings will load the Xplain only after it scrolls into view and start autoplay 3 seconds after loading.

<div class="helpxplain"
     data-url="./relative_path_to_your_xplain.html"
     data-aspect="56.25"   << Get this from the master page preview
     data-title="Presentation title"
     data-load="view"
     data-playafter="3" ></div>

Display a presentation in a lightbox and start it manually

Create your presentation with a skin that includes the appropriate controls. The following settings display the Xplain in a lightbox after the user clicks on the preview image, with autoplay turned off. A caption is displayed in an overlay over the preview image until the user clicks on it.

<div class="helpxplain"
     data-url="./relative_path_to_your_xplain.html"
     data-aspect="56.25" << Get this from the master page preview
     data-title="Presentation title"
     data-caption="Preview Image Caption"
     data-lightbox="true"
     data-playafter="0"></div>

Display a screencast in a lightbox with autoplay

Create your screencast Xplain with or without controls, depending on whether you want the user to be able to interact. The following settings display the screencast in a lightbox after the user clicks on the preview image and then start playing automatically 1 second after the lightbox and the Xplain have loaded.

<div class="helpxplain"
     data-url="./relative_path_to_your_xplain.html"
     data-aspect="56.25" << Get this from the master page preview
     data-title="Presentation title"
     data-caption="Preview Image Caption"
     data-lightbox="true"
     data-playbutton="true"
     data-playafter="1"></div>

Use a custom Play button

This code snippet specifies a custom Play button stored in the /images subfolder inside the current folder.

<div class="helpxplain"
     data-url="./relative_path_to_your_xplain.html"
     data-aspect="56.25" << Get this from the master page preview
     data-title="Presentation title"
     data-lightbox="true"
     data-playbutton="./images/myplaybutton.png"
     data-playafter="1" ></div>

Preload an Xplain with your page

You want to be absolutely certain that your Xplain is ready to play as soon as the preview image is visible. Setting data-load to preload ensures that all the necessary assets are loaded together with your page.

<div class="helpxplain"
     data-url="./relative_path_to_your_xplain.html"
     data-aspect="56.25" << Get this from the master page preview
     data-title="Presentation title"
     data-load="preload" ></div>

Display in a lightbox and start with slide 5 in autoplay mode

These settings activate lightbox mode and start your presentation with slide 5 instead of slide 1. The Xplain is loaded into the lightbox when the user clicks on it and autoplay begins at slide 5, three seconds after the lightbox and the Xplain have loaded.

<div class="helpxplain"
    data-url="./relative_path_to_your_xplain.html"
    data-aspect="56.25" << Get this from the master page preview
    data-title="Presentation title"
    data-lightbox="true"
    data-playbutton="true"
    data-startat="5"
    data-playafter="3" ></div>