Articles on: Share & analyse

Overlay embed

The overlay embed places a banner on your website. When a visitor clicks the banner, your Maglr publication opens in a full-screen overlay on top of the web page. Because the publication scrolls inside its own overlay, its scrolling doesn't conflict with the scrolling of your website, which can happen when a full publication is embedded directly in a page (see embedding a multi-page publication). You can use the overlay embed for a complete project or for one page.


Image: overlay embed banner


Setting up an overlay embed


You set up an overlay embed in the Embed code tab of the project's share panel. The project must be active and not secured; Print projects don't have an Embed code tab.


  1. In the Projects overview, point to the ... button on the project's thumbnail and click Share in the menu that opens.
  2. Open the Embed code tab.
  3. Under "Choose a page or project", select The complete project with all pages or One specific page from this project. If you choose one page, select the page.
  4. Under "Choose an embed type", select Preview with fullscreen layover (for the complete project) or Open in fullscreen layover (for one page).


Image: embed options in Maglr


If the tab shows a Generate embed code button instead of the settings, click it first.


  1. Under "Banner preview", select a Layout.
  2. Fill in the Title, Subtitle and Button text.
  3. Set the Title color, Background color and Button color.
  4. Optional: under "Optional settings", set a maximum width or limit the embed to specific domains.
  5. Under "Copy the code", click Copy.
  6. Paste the code into the HTML of your website where the banner should appear.


Banner settings save automatically; there is no save button. The maximum width is part of the embed code, so if you change it later, copy and paste the code again.


Customizing the overlay embed banner


The overlay embed banner has four layouts and six editable fields, which you set under "Banner preview" in the Embed code tab. The preview updates as you type. Keep the title and subtitle short; the preview shows how they fit.


Image: customising the banner


Layouts:


  • Shadow: the cover image fills the banner as a background. This is the default.
  • Blur: the cover image fills the banner as a blurred background.
  • Centered: the cover image fills the banner as a blurred background, with the text centered.
  • Thumbnail: a small cover image is shown next to the text.


Fields:


  • Title: by default, the meta title of the page or project, or its name if there is no meta title.
  • Subtitle: shown above the title.
  • Button: the button text. The default is "Open".
  • Title color: the default is white.
  • Background color: the default is black.
  • Button color: the button text turns black or white automatically, depending on what contrasts best with this color.


The color pickers include your account's brand colors as presets.


Changes save automatically and apply to the banner each time it loads. You don't need to replace the embed code on your website after changing the layout, texts or colors.


What visitors see with an overlay embed


On your website, the overlay embed shows as a banner in the spot where you pasted the code:


  • The banner takes a 16:9 area. With the Thumbnail layout, or when the banner is narrower than 520 px (as on most phones), the area resizes to fit the banner.
  • Clicking the cover image or the button slides a full-screen overlay in, with the publication loaded inside it.
  • While the overlay is open, the website behind it doesn't scroll. Visitors scroll through the publication inside the overlay.
  • A "Close" button stays fixed at the top center of the screen. Its text is shown in the language of the project.
  • Clicking "Close" slides the overlay away, and the visitor is back at the same position on your web page.


Changing the cover image of the overlay embed


The overlay embed banner uses the thumbnail of the embedded page as its cover image. For a complete project, it uses the thumbnail of the project's first page. To use a different image, set a custom thumbnail in the page settings and publish the project; the banner shows the new image after publishing. See changing the thumbnail.


Tracking the overlay embed


The overlay embed sends one custom event: when a visitor clicks the "Close" button in the overlay. This event appears in Maglr Statistics, in the Events list as "embed previewbanner", and, if you have set them up, to Google Analytics and your Google Tag Manager integration.


Category

Action

Label

Embed-previewbanner

Close-fullscreen-banner

[hash-code embed]


There is no separate event for showing the banner or opening the overlay. When a visitor opens the overlay, the publication loads and its visits count as normal page views from the embed.


Frequently asked questions


Do I need to replace the embed code after changing the overlay embed banner?


No. Banner settings (layout, texts, colors and allowed domains) save automatically, and the banner on your website loads the latest settings each time it is shown. You only need to copy the code again if you change the maximum width, or the autoplay or navigation settings of a complete-project embed.


How does the overlay embed look on mobile?


The banner stays in the spot where you placed the embed code. When the banner is narrower than 520 px, as on most phones, the banner area resizes to fit the banner. When a visitor taps the banner, the publication opens full screen in the overlay.


Why can't I select "Do not switch to the mobile version on a smaller screen" for the overlay embed?


For a one-page embed, the option is greyed out when you select Open in fullscreen layover; the overlay embed doesn't use it. For a complete-project embed, the option isn't shown under "Optional settings" at all.

Updated on: 20/10/2026