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.2. Open Links Inline

Will open all links in that same web viewer window - if this is unckeched, tapping links in a web viewer will open the browser pop-up window  (this is the same pop-up window as the one triggered by http hyperlinks).  

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

3.1. Link to a page

If you want to add a link to a page in your publication from within a web viewer window, you can do so by creating an HREF like the one below:

tp-pagelink://{article_name}/{page_number}

An example would be:

<a href="tp-pagelink://TOC/3">

3.2. Link to make the Table of Contents viewer visible/invisible

tp-toolbar://toggle : toggles the current view, whether visible or invisible
tp-toolbar://hide
tp-toolbar://show

3.3. Link to the store

tp-store://show : links to the store

For an overview of all custom URL schemes for Twixl Publisher, check this article.

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

Comments

0 comments

Please sign in to leave a comment.