Access Keys:
Skip to content (Access Key - 0)

HTML5 widget

Inline HTML5 Widget

An inline HTML5 widget is an HTML page which is visible within a compiled InDesign page. A common use is to create data capture forms or to display content from feeds, (e.g. Twitter feeds). The HTML5 widget should be a local HTML file.

1. To add an inline HTML5 widget, you need to have your HTML5 files in the following structure:

     - FolderName (e.g. twitter-feed)

          - FirstHtmlPage (e.g. index.html)

          - Other files and/or folders (e.g. CSS/JavaScript/Images etc...)

  • Where the FolderName is a directory, and must be alphanumeric (text and numbers only).
  • The first HTML file you wish to link to (named however you wish, e.g. index.html) must be at the root level of the FolderName directory.
  • Any other files/assets (e.g. CSS/JavaScript/Images) must also be within the FolderName directory, but do not need to be at the root level. See below for a file structure example.

             

2. To place your HTML5 widget, you'll need to do the following:

  • Add a Rectangle to the page and size this to the dimensions of your HTML widget.
  • Add a preview image of your widget (normally just a simple screenshot) to the rectangle.
  • Open the Hyperlinks Panel and click on the "Create new hyperlink" button (below).

             

  • In the "Link To" dropdown, select "File".

             

  • Click the browse icon and select the HTML file you wish to link to (this is referenced above as FirstHtmlPage).

             

  • Click OK. The HTML5 widget is now inserted in the page. This is not visible in InDesign.

HTML5 Widget

3. To open an HTML5 widget from a button, the HTML5 widget must follow the structure below (same as above):

     - FolderName

          - FirstHtmlPage

          - Other files and/or folders

To add the button to launch the HTML5 widget: 

  • Add an image/icon to the page.
  • Open the Button window and click ‘convert to button’.

             

  • Click on the "+"  icon to add an action.

             

  • Scroll down to the ‘Open File’ action.

              

  • Change the value in the Dropdown box to 'All Documents'. Then select your HTML file (this is referenced above as FirstHtmlPage)

             

Download a demo here: AppStudio_testcases_HTMLWidget.zip

Please note, in the demo you may have to re-link the hyperlink index.html file (see step 2).

Adaptavist Theme Builder (4.2.1) Powered by Atlassian Confluence 3.5, the Enterprise Wiki