Login
Status page

Help

Documentation

  1. Twixl Help
  2. Create in InDesign
  3. InDesign interactivity

Web viewers

Twixl Support Team Updated: - Created :

    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.

    1.1. 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.

    1.2. 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.

    ABOUT WEBRESOURCES:

    For more info about the WebResources folder, see this KB-article.

    2. Web Viewer Options

    Web Viewer Options
    1. Allow User Interaction: Configures whether a user can interact with the content or not.
    2. Open Links Inline: Will open all links in that same web viewer window - if this is unchecked, 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).  
    3. Show Scroll Bars: Whether or not to show scroll bars when scrolling through the web viewer.
    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.
    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">

    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