Help+Manual News

Quick Tutorial: WordPress Integration for HelpXplain


This is quick tutorial how to integrate HelpXplain presentations into WordPress.

Is this possible at all? Yes, it is. But you need little manual coding.

  1. Create your Xplain with HelpXplain and upload the data to your webserver.
     
  2. Test your Xplain online and note the full url.
    For example, this one:
    https://www.helpandmanual.com/snipsvg/help/xplain/_sharetohm.html
     
  3. Note the url of the Xplain loader script that HelpXplain creates automatically.
    This script is saved to the /js folder, relative to your Xplain HTML page: ./js/xploader.js folder.
    Write down the full url of this script (it’s the same for all Xplains that you are going to embed in the post):
    https://www.helpandmanual.com/snipsvg/help/xplain/js/xploader.js
    For details, please refer to the online help of HelpXplain
     
  4. Now we are ready to insert a <div> tag into our WordPress posting, that will host the preview of the Xplain. Switch the WordPress editor to raw code and insert the following code:

     

The HTML Code

You get the raw HTML code for integration from HelpXplain directly. Export in HelpXplain and let you show the actual embed code for your Xplain. This is the code we need to paste in WordPress. Right after the <div> tag, which acts as a placeholder for the Xplain, we add a <script> tag with a reference to the xploader.js script. This script will do the rest.

Here is the code example once again, with nice formatting:

The Result

This is a WordPress blog. So you can test the result of the code above right here:

Comments are closed.