Embedding NetHelp Targets Into Web Pages

Doc-To-Help’s NetHelp is architected to make it easy to embed a single topic, or an entire Help system, into a web page. This lets you stream updated content to your website without web development.

There is some lightweight front-end configuration that must be made to your website. Your output does not need to be hosted on the same web server as your main site. In that case, you would add an iframe, because using an iframe makes it possible to place the web site and the NetHelp target on different servers (domains). If both your output and your website will be hosted on the same web server, an iframe is not needed.

This method allows to place the website and NetHelp output on different servers (domains).

  1. Publish your built NetHelp output to a server.

    Example  

    Here is an example of a published NetHelp location:

    http://mysite.com/help/mytarget/

    The full URL to the NetHelp output would be:

    http://mysite.com/help/mytarget/index.html

  2. Add an iframe element to your web page that contains the NetHelp output. The iframe tag must have the "src" attribute set to the default NetHelp page ("index.html") in the target folder.

    Example  

    To embed full NetHelp output without parameters add the following.

    Copy 
    <iframe src="http://mysite.com/help/mytarget/index.html">
    </iframe>

The URL in the "src" attribute can be used to set NetHelp output parameters if desired. For explanations of these parameters, see NetHelp-supported Parameters.

Example — Iframe Embedded in Website

Here is an example of code used for an iframe embedded in a website.

Copy 
<iframe src="http://helpcentral.componentone.com/nethelp/c1intellispell/index.html" width="1000px" height="350px">
</iframe>

To embed a single topic on a web page, use the following.

Copy 
<iframe src="http://mysite.com/help/mytarget/index.html?topiconly=true">
</iframe>

Example — Single-Topic Iframe Embedded in Website

Here is an example of code used for a single-topic iframe embedded in a website.

Copy 
<iframe src="http://helpcentral.componentone.com/nethelp/c1intellispell/index.html?topiconly=true" width="300px" height="500px">
</iframe>

Example — Generic

Here is a generic example.

Copy 
<!DOCTYPE html>
<html>
<head>
    <title>IFrame example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body style="padding: 10px;">
    <p>Some text before help frame.</p>
    <!-- HELP FRAME -->
    <iframe src="http://mysite.com/help/mytarget/index.html"></iframe width="800px" height="400px" >
    <!-- END OF HELP FRAME -->
    <p>Some text after help frame.</p>
</body>
</html>

You can embed NetHelp output into any HTML element (e.g., into a DIV element).

This option is only available if the NetHelp output and the container page (into which you embed the NetHelp output) are placed in the same domain.

  1. Publish your built NetHelp output to a server.

    Example  

    Here is an example of a published NetHelp location:

    http://mysite.com/help/mytarget/

    The full URL to the NetHelp output would be:

    http://mysite.com/help/mytarget/index.html

  2. Add a container element (any HTML element) to your page, which will contain the NetHelp output.

    The container must have the CSS property position set to either the relative, absolute, or fixed value. This is a restriction of the Doc-To-Help standard themes (Tabs and Accordion). You must also set the height for the container if you want to display NetHelp output in full mode (you do not need to do this for topic-only mode).

    Example  

    Here is an example.

    Copy 
    <div id="mytarget" style="position:relative; height:500px;">
    </div>

    If you want to display the NetHelp output in topic-only mode, the container element may look like this.

    Copy 
    <div id="mytarget">
    </div>
  3. Add the "script" tag to the "head" section of the page. This script tag must have the "src" attribute set to the "js/nethelp.connect.js" file located in the NetHelp target folder. You can also set the following optional attributes for this tag to set up the target:

    • "data-placeholder" This specifies the jQuery-selector of the container element created in step 2. If this attribute is missed, the NetHelp engine will search for an element with the attribute "data-c1-role" equal to the "nethelp" value. If no such element is found, the "body" element will be used as a container for the NetHelp output. The NetHelp output is placed into a container element and replaces all its content.

    • "data-start" This specifies the URL of the topic that will be shown instead of the default topic when the NetHelp output is loaded.

    • "data-topiconly" If set to "true," the NetHelp output will be displayed in the topic-only mode (without header, toolbars, and Contents, Index and Search tabs).

    • "data-settings" This specifies the URL of the NetHelp target settings file (by default it is the "settings.xml" file in the root target folder).

    • "data-responsive" This is used only for Responsive themes, set to "true."

Example — Tabs and Accordion Themes

Here is an example for Tabs and Accordion themes.

Copy 
<script type="text/javascript" src="/help/mytarget/js/nethelp.connect.js" data-placeholder="#mytarget">
</script>

Example — Responsive Theme

Here is an example for the Responsive theme.

Copy 
<script type="text/javascript" src="/help/mytarget/js/nethelp.connect.js" data-placeholder="#mytarget" data-responsive="true">
</script>

Note If you are viewing the website from the local file system, the NetHelp output folder must be located in a subfolder of your site. Otherwise your browser may block the NetHelp files.

Example — Generic

Here is a generic example.

Copy 
<!DOCTYPE html>
<html>
<head>
    <title>Inline example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script type="text/javascript" src="/help/mytarget/js/nethelp.connect.js"
        data-settings="/help/mytarget/settings.xml"
        data-start="/help/mytarget/Documents/home_topic.htm"></script>
</head>
<body style="padding: 10px;">
    <p>Some text before help frame.</p>
    <!-- HELP FRAME -->
    <div data-c1-role="nethelp" style="position:relative; width:800px; height:400px;"></div>
    <!-- END OF HELP FRAME -->
    <p>Some text after help frame.</p>
</body>
</html>