Login

Help

Documentation

Web overlay buttons

Twixl Support Team Updated: - Created :

    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. 

    Web Overlay Button

    2. Web Overlay options

    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. Analytics Name: Enter a reference that will be used in the analytics information.
    3. Width and Height: Enter the size of the web overlay (in pixels) here.
    4. Background color: The color of the layer that will be placed on top of the content outside the web overlay.
    5. Opacity: Opacity of the transparent layer.
    6. Allow User Interaction: Configures whether a user can interact with the content or not.
    7. Show Scroll Bars: Whether or not to show scroll bars when scrolling through the web viewer.
    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.

    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

    ABOUT WEBRESOURCES:

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