We’re here to help

Web overlay buttons

Follow

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.

1. How to create a Web Overlay?

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. 

The Web Overlay Panel

2. Web Overlay options

Now you are presented with a number of options:

2.1. URL to Trigger

Enter the URL to be displayed in the overlay here.

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 "…" 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.

2.5. Opacity

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.

2.9. Scale content to fit

If you want the width of the content to be adjusted to the width of your web viewer.

3. 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 overlays by creating different subfolders in the WebResources folder.

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:

webresource://index.html
webresource://subfolder/index.html
Was this article helpful?
0 out of 0 found this helpful