An overlay is a microapp page type that is layered on top of an existing microapp page, typically accessed via a hotspot with an associated animation. Typically, editors utilize video or image tiles in overlay pages to add a more dynamic 'pop-up' feel to the microapp when the user clicks on the content. Overlays are listed below the Microapp pages panel on the left side of the Builder.
When viewers access the overlay page, Tiled automatically generates an X icon in the left corner, which the viewer can click to close the overlay, returning to the source page. This icon can be turned off or replaced with a custom icon.
Tips for using overlays
- Individual overlays are not linked to specific microapp pages, and can be added to multiple pages.
- Viewers cannot access overlays without first accessing the source page with the link to the overlay, which is displayed in front of the source page.
- You cannot stack one overlay on top of another.
- You can configure the opaqueness of your overlay.
- Tiled recommends that editors do not link an overlay to another overlay.
Creating an overlay
To create a new overlay page, click the + icon next to the Overlays panel from the Microapp Editor. A new Overlay page is added to the display. Click the page to edit it like you would any other microapp page.
Once created, access the desired microapp page from which the overlay will come from.. Create a hotspot, and select the name of the Overlay in the Link to dropdown list.
Duplicating an overlay
If you have an overlay that you want to use as a base for additional overlays, you can duplicate it. Right-click the desired overlay and select Duplicate. The duplicated overlay appears as the bottom-most overlay in the Overlay panel.
Altering the Page Role for an Overlay
The Page Role feature allows you to change an existing microapp page to an overlay, as well as change an overlay into a microapp page or a state.
Change a microapp page to an overlay
To change a microapp page to an overlay, first navigate to the desired page. Click the Page Role dropdown list on the Builder Toolbar and select Overlay.
Additionally, you can click the *** button to the right of the page in the Microapp pages panel, and select Make into an overlay.
Change an overlay to its own microapp page
To change an overlay to a microapp page, navigate to the desired overlay. Click the Page Role dropdown list on the Builder Toolbar and select Normal. The page is added as the last page of the microapp.
Additionally, you can click the *** button to the right of the overlay in the Overlay pages panel, and select Make into a normal page.
Deleting an overlay
If you have an overlay that you want to remove from your microapp, you can delete it. Click the *** button to the right of the overlay in the Overlay pages panel, and select Delete.