The Web Content overlay lets you display a web page within a view area. Users can see the web page content in the view area without having to display a separate in-app browser. You can specify a web URL or a local HTML file. Note the following issues:

  • If you specify a local HTML file, make sure that the .html file and associated files and folders appear in the same folder. When the article content is created, all the files in the same folder as the .html file are uploaded, so limit that HTML folder to only the necessary assets. For example, if you add the .html file to Documents folder, all files and subfolders in the Documents are uploaded.
  • For any URL that gets redirected to a mobile URL automatically, specify the mobile URL (such as http://mobile.twitter.com/), not the original URL (such as http://twitter.com).
  • If you specify an HTML animation for a Web Content overlay, set the overlay to Auto Play with a minimal delay (such as 0.125 seconds) to ensure that the animation plays properly. Setting a delay prevents the overlay from auto-play when the page is preloaded into memory.
  • In InDesign CS6 or later, you can use the Insert HTML command to insert the embed code of a YouTube clip. For best results, edit the YouTube embed code to include "src=https://www.youtube.com" instead of "src=//www.youtube.com." Set the overlay to Auto Play, and add a poster image in front of the overlay.  

To create a Web Content overlay:

  1. Do one of the following:

    • Using the Rectangle tool or Rectangle Frame tool, drag to create the frame that displays the web content.

    • Place an image that acts as a poster for the web content.

  2. Select the frame, and select Web Content in the Overlays/Folio Overlays panel.

  3. Do one of the following:

    • To specify a URL, type or paste the URL in the Assets field. Type the entire URL, including “http://.”

    • To use local HTML files, click the folder icon and specify the local HTML file. The HTML file (such as index.html) should appear in a folder that includes any images or scripts used in the HTML file.

  4. Specify any of the following options:

    Auto Play

    Select this option to load the web page when the page is loaded on the mobile device. You can also specify the number of seconds to delay. If your target HTML is an animation that plays, specify a minimal delay.

    Transparent Background

    If this option is selected, the transparent background in a web page is preserved. Users can see through the transparency to view the DPS content in the background. If this option is deselected, the web content background is used.

    Allow User Interaction

    If this option is selected, users can interact with the web page. For example, they can tap a hyperlink to jump to a different web page.

    Scale Content To Fit

    If this option is selected, the web page is scaled to fit within the size specified in the overlay file. If this option is not selected, the web page is displayed at the same size it would appear in the device’s browser, and the HTML page can be cropped.

    Allow Access to Entitlement Information

    You can create a Web Content overlay that references the Reading API for features such as Camera API, Geolocation API, digital blow-ins, an calendars. (In the Overlays panel, this option is called "Allow API Access.") For details, see Using HTML and JavaScript to extend DPS.

    In addition to selecting this option for the overlay, add a custom JavaScript API to your HTML code.

    You can also create this type of conditional HTML content for an HTML article instead of a Web Content overlay. For an HTML article, select the "Allow Access to Entitlement Information" option in the Folio Producer Editor.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy