How do I create a "Web Overlay" ?

Instead of using a URL hyperlink to open a browser window on top of the whole publication, you can also choose to display a 'Web Overlay', i.e. a modal web viewer of a smaller size. The 'Web Overlay' will always be positioned at the center of the page and add a level of transparency to the rest of the page.

To create a web overlay, first create a rectangle that will serve as the button that triggers the overlay to open. When the rectangle is selected, click 'Web Overlay' from the Twixl Publisher palette.

Now you are presented with a number of options:
URL: enter the URL to be displayed in the overlay here

Appearance options
"Width" and "Height": enter the size of the web overlay (in pixels) here.
"Background color": the color of the layer that will be placed on top of the content outside the web overlay.
"Background opacity": opacity of the transparent layer.
"Scale content to fit": if you want the width of the content to be adjusted to the width of your web overlay..
"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
"Allow cookies": does just that

Embedded HTML
Similar to web viewers, web overlays can also be used to load embedded HTML content. 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 Overlay panel to select the index page of your HTML content.