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)
- 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.
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.
3. To open an HTML5 widget from a button, the HTML5 widget must follow the structure below (same as above):
- 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).