Overlay embed
Like explained in the multi-page embed article, embedding a complete publication fullscreen within a website could cause usability problems. The scroll behaviour of the website can conflict with the scroll of the embedded publication, causing a visitor to leave the page as quick as possible.
To overcome this problem, we have developed the overlay embed. A variant where you place a publication within your website in a nice and visual way. At the position where the embed is added, a responsive banner is displayed which can be configured through this module (more info below).
After a click on the banner, a full-screen overlay animates into the screen. In this screen-filling frame, the publication is loaded where visitors can scroll through the page(s). The focus for this frame is fixed so that the visitor is not bothered with the scrolling behaviour of the main site.
A close button is displayed at the top center of the page and will always remain in view. If someone wants to close the overlay again, they will return to the exact position of the webpage where they left off.
This solution is a user-friendly variant if you want to make publications with multiple pages accessible within your own website. A visitor does not have to leave the website (where a new tab is often opened) but returns to it after closing the overlayed publication.
There are various layouts to choose from to style the banner that is displayed on your website. The banner itself is designed to be as neutral as possible, with text and colors being configurable. Within the module, you will see a small preview of the banner. This provides insight into the length of the title and subtitle, which you would do best to keep short.
The cover image inside the embed is automatically retrieved, based on the first page of the publication. If you want to change this image, it is possible to replace the thumbnail via the page settings. Click here for more information about this.
With the banner overlay, we trigger additional events to measure the performance of the banner itself. These events can be found within the statistics of the embed, or within your custom Google Tag Manager integration.
Custom events:
To overcome this problem, we have developed the overlay embed. A variant where you place a publication within your website in a nice and visual way. At the position where the embed is added, a responsive banner is displayed which can be configured through this module (more info below).
After a click on the banner, a full-screen overlay animates into the screen. In this screen-filling frame, the publication is loaded where visitors can scroll through the page(s). The focus for this frame is fixed so that the visitor is not bothered with the scrolling behaviour of the main site.
A close button is displayed at the top center of the page and will always remain in view. If someone wants to close the overlay again, they will return to the exact position of the webpage where they left off.
This solution is a user-friendly variant if you want to make publications with multiple pages accessible within your own website. A visitor does not have to leave the website (where a new tab is often opened) but returns to it after closing the overlayed publication.
The appearance of the banner
There are various layouts to choose from to style the banner that is displayed on your website. The banner itself is designed to be as neutral as possible, with text and colors being configurable. Within the module, you will see a small preview of the banner. This provides insight into the length of the title and subtitle, which you would do best to keep short.
Select a different cover image
The cover image inside the embed is automatically retrieved, based on the first page of the publication. If you want to change this image, it is possible to replace the thumbnail via the page settings. Click here for more information about this.
Events & Analytics with banner overlay
With the banner overlay, we trigger additional events to measure the performance of the banner itself. These events can be found within the statistics of the embed, or within your custom Google Tag Manager integration.
Custom events:
| Category | Action | Label |
|---|---|---|
| Embed-previewbanner | Show-banner | [hash-code embed] |
| Open-fullscreen-banner | [hash-code embed] |
Updated on: 08/02/2023