Instead of using a URL hyperlink to open a browser window on top of the whole publication, or displaying web content within your page using a web viewer, you can also choose to display a 'Web Overlay', i.e. a modal web viewer that is displayed on top of your page. 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 an object that will serve as the button that triggers the overlay. When the object is selected, click 'Web Overlay Button' in the Twixl Publisher palette.
Now you are presented with a number of options:
2.1. URL to Trigger
Enter the URL to be displayed in the overlay here.
Once you have copied all your html content and assets, use the "…" button in the Web Overlay panel to select the index page of your HTML content.
2.2. Analytics Name
Enter a reference that will be used in the analytics information.
2.3. Width and Height
Enter the size of the web overlay (in pixels) here.
2.4. Background color
The color of the layer that will be placed on top of the content outside the web overlay.
Opacity of the transparent layer.
2.6. Allow user interaction
Configures whether a user can interact with the content or not.
2.7. Show scroll bars
Whether or not to show scroll bars when scrolling through the web viewer.
2.8. 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.
Embedded content will always be available, even when a user is offline.
Once you have copied all your html content and assets to that location, use the URL to trigger "…" button in the Web Overlay button panel to select the index page of your HTML content.
The URL will look like the example below: