How do I create a "Web Viewer" ?

palette_webviewer.png

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.
Select a rectangle, then use the 'Web Viewer' panel from the Twixl Publisher palette to enter the URL you want to display within its boundaries.

A number of options are available:
Appearance options
"Show scroll bars": whether or not to show scroll bars when scrolling through the web viewer
"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.
"Scale content to fit": if you want the width of the content to be adjusted to the width of your web viewer.
"Show loading indicator": can be used to provide the user with some feedback while the page is loading - typically this will be used only for external and not for embedded content.

Behavior options
"Allow user interaction": configures whether a user can interact with the content or not
"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
"Allow cookies": does just that

Embedded HTML
Web viewers can be used not only for external content, but also for embedded HTML content, which can be used 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 is located. You can select "Show WebResources" to navigate to that folder in the Finder.
Once you have copied all your html content and assets, use the "Select" button in the Web Viewer panel to select the index page of your HTML content.