We’re here to help

Web viewers

Follow

Add dynamic web content to your publication.

1. How to make Web Viewers?

Any rectangle on a page can be turned into a 'Web Viewer'. A web viewer allows you to add dynamic web content to your application. Integrate live content such as a Twitter feed, integrate HTML5 apps or animations.

Display external web content

Create a rectangle, then use the 'Web Viewer' panel to enter the URL of the web page you want to display within its boundaries.

Integrate embedded web content

Embedded content will always be available, even when a user is offline.

All local content, including assets, JavaScript, etc., should be placed in a "WebResources" folder within the folder where your InDesign book or document is located. The folder will be created by the plug-in automatically when you define a Web Viewer for the first time. You can then select "Show WebResources…" to navigate to that folder in the Finder. Note that the contents should not be zipped, and should be placed there as is. You can organize several embedded web viewers by creating different subfolders in the WebResources folder.

Once you have copied all your html content and assets to that location, use the "…" button in the Web Viewer panel to select the index page of your HTML content.

The URL will look like the example below:

webresource://index.html
webresource://subfolder/index.html

TIP:

Use embedded web content to integrate HTML5-based animations.

2. Web Viewer Options

Web Viewer Options

2.1. Allow User Interaction

Configures whether a user can interact with the content or not.

2.3. Show Scroll Bars

Whether or not to show scroll bars when scrolling through the web viewer.

2.4. Transparent Background

Allows you to display web content transparently on your InDesign background. In order for the transparency to work properly, however, the HTML source must not have a background color.

2.5. Scale Content to Fit

If you want the width of the content to be adjusted to the width of your web viewer. NOTE: Some web pages may not resize properly.

3. URL schemes for special links from within a web viewer

4. Displaying PDF files within a web viewer

Displaying a PDF in a web viewer (either embedded or online) is possible only on the iPad. To achieve a similar result on Android, you may need to create a web hyperlink to the PDF.

You can also decide to open a URL in the device browser, e.g. if you want to allow readers to save a PDF.

5. Checking whether a reader is offline or online

Sometimes you may want to display embedded web content if a reader is offline, and online web content if the reader is online. Check out this article to learn how this can be done.

6. Raw HTML widget

If you want to quickly add a snippet of HTML code, you can select "Raw HTML" from the list of elements and just paste the code in the 'Raw HTML' field. There is no need to create separate html pages in the WebResources folder.

The "Requires an internet connection" option allows you to check whether a user is online first.

RAW HTML widget
Was this article helpful?
0 out of 0 found this helpful