Articles on: Share & analyse

Embedding a multi-page publication

A multi-page embed places a complete Maglr project, with all its pages and a navigation to move between them, on another website. To embed only one page instead, see embedding a single page. For an overview of what embeds can do, see interactive embeds.


Where to place a multi-page embed


A multi-page embed works best where visitors cannot get stuck scrolling inside it. A website already scrolls vertically, and an embed with several pages can also scroll horizontally and vertically inside its own frame. Scrolling inside a scrolling page is hard to use, especially on mobile.


Recommended placements for a multi-page embed:


  • In a small area of a page, for example inside a blog article. The embed takes up only part of the screen, so visitors scroll past it instead of getting stuck in it.
  • As a slideshow in your website's header. A header usually has a fixed height, so visitors do not get stuck in the embed.
  • As a fullscreen layover. The page shows a visual banner. Clicking it opens the project fullscreen on top of the website, and visitors close it to return to the page. See the overlay embed for this embed type.


Creating a multi-page embed


You create a multi-page embed from the project's share options in the dashboard. The project must be active and published, and must not have active security (such as a password). Otherwise the Embed code tab is greyed out with a warning.


To create a multi-page embed:


  1. Open the project's share options: on the projects overview, open the project's menu and click Share, or inside the project click Share project.
  2. Go to the Embed code tab.
  3. Under Choose a page or project, select The complete project with all pages.
  4. Under Choose an embed type, select Fixed format (manual) or Preview with fullscreen layover.
  5. Under Change navigation type, select a navigation type.
  6. If no code is shown yet, click Generate embed code.
  7. Optionally, choose settings under Optional settings, such as autoplay or allowed domains.
  8. Under Copy the code, click Copy.
  9. Paste the code into your website.


Image: embed options in Maglr


The complete project with all pages is selected by default. It does not appear for Micro content projects, which hold a single page; for those, see embedding a single page.


Embed types for a multi-page embed


A multi-page embed comes in two embed types, chosen under Choose an embed type in the Embed code tab:


  • Fixed format (manual): a standard iframe embed code. The code is generated with a width of 800 and a height of 500 pixels, and you change these values in the code itself. See Changing the size of a fixed-format embed.
  • Preview with fullscreen layover: the page shows a banner, and clicking it opens the project fullscreen on top of the web page. You design the banner under Banner preview. See the overlay embed for all its settings.


Limitations of the fixed-format embed


A multi-page embed in Fixed format (manual) has these limitations:


  • No automatic mobile version: the embed does not scale or switch to the mobile version of the pages, because each page can have a different size. If the mobile version of your pages matters, use Preview with fullscreen layover, or set a different height for mobile with CSS (see Setting a different height on mobile).
  • Statistics stay inside the embed: statistics are measured inside the iframe and are not sent to your website's Google Tag Manager dataLayer. See analysing embed statistics.


Choosing a navigation type


A multi-page embed needs a navigation so visitors can move between pages. You choose it under Change navigation type in the Embed code tab. When the embed is small, the project's own navigation can be too large or contain functions you don't need in an embed, so you can replace it with a smaller one.


The navigation types are:


  • Default navigation: keeps the navigation the project already uses.
  • Minimal navigation: replaces the project's navigation with a minimal one that shows only a few essential controls.
  • Carousel navigation: adds a slideshow-style navigation, suited to an embed used as an interactive banner or slideshow.
  • No navigation: removes the navigation completely. To let visitors move between pages, design your own navigation into the pages or turn on autoplay.


Image: embed navigation types


Optional settings


The Optional settings section of the Embed code tab adds extra options to a multi-page embed's code.


Autoplay


The Autoplay pages (5 sec default) setting makes the embed move to the next page automatically, which suits an embed used as a banner or slideshow. Autoplay is a separate setting from the navigation: to show a slideshow without navigation controls, select No navigation under Change navigation type and also tick Autoplay pages (5 sec default).


Autoplay adds &autoplay=5 to the URL in the embed code, which means 5 seconds per page. You can change this number in the code to show each page longer. The value is in seconds, and the minimum is 5: a value below 5 is ignored, and the embed then does not autoplay.


Allowed domains


The Only activate this embed on specific domain(s) setting limits the websites where the embed works. Anyone can copy an embed code and place it on another website. With this setting, the embed only runs on the domains you add.


To limit the embed to specific domains:


  1. Under Optional settings, tick Only activate this embed on specific domain(s).
  2. Type a domain without https://, for example domain.com.
  3. Click Add.
  4. Repeat for each domain where the embed may appear.


An allowed domain also covers its subdomains: allowing domain.com also allows www.domain.com and blog.domain.com. On any other website, visitors see an "Embed incorrect" error instead of the project.


Changing the size of a fixed-format embed


A Fixed format (manual) multi-page embed does not resize automatically, because the pages of a project can have different heights. You set its size by editing the width and height values in the embed code. The generated code uses pixels; you can also use a percentage, for example width="100%".


To change the size of a fixed-format embed:


  1. Copy the embed code from the Embed code tab.
  2. Change the width and height values to the size you need.
  3. Paste the edited code into your website.


In this example, the width is changed to 100% of the available space and the height stays 500 pixels:


<iframe src="https://embed.maglr.com/XXXXXX?nav=carousel&autoplay=5" width="100%" height="500" scrolling="yes" frameborder="0" allowtransparency="true" allowfullscreen></iframe>


Setting a different height on mobile


A fixed-format multi-page embed can use a different height on small screens with a short piece of CSS. This helps when you designed different pages for mobile that need more or less height.


To set a different height on mobile:


  1. Add an ID to the iframe tag, for example id="my-embed". You can choose any name.
  2. Add a <style> block with a media query below the iframe code.
  3. In the media query, set the screen width at which the height changes and the height you need.


In this example, the embed's height changes from 500 to 600 pixels when the screen is narrower than 500 pixels:


<iframe id="my-embed" src="https://embed.maglr.com/XXXXXX?nav=carousel&autoplay=5" width="100%" height="500" scrolling="yes" frameborder="0" allowtransparency="true" allowfullscreen></iframe>

<style>
@media only screen and (max-width: 500px) {
#my-embed {height:600px;}
}
</style>


Disabling scrolling inside the embed


To stop the content of a fixed-format multi-page embed from scrolling inside its frame, change scrolling="yes" to scrolling="no" in the embed code. This helps when the web page around the embed also scrolls, for example on mobile.


Frequently asked questions


Why doesn't my multi-page embed switch to the mobile version?


A multi-page embed in Fixed format (manual) does not scale or switch to the mobile version, because each page can have a different size. Use the Preview with fullscreen layover embed type if the mobile version matters, or add CSS to the embed code to set a different height on small screens.


Why is the Embed code tab greyed out?


The Embed code tab is greyed out, and shows a warning when you open it, when the project is not active and published, or when the project has active security, such as a password. Activate and publish the project, or turn off its security, to create an embed.


Can autoplay move faster than every 5 seconds?


No. The autoplay value in a Maglr embed code is in seconds, and the minimum is 5. A value below 5 is ignored, and the embed then does not autoplay.


Do allowed domains include subdomains?


Yes. When you add a domain under Only activate this embed on specific domain(s), the embed also works on all subdomains of that domain. Allowing domain.com also allows www.domain.com and blog.domain.com.


What do visitors see when an embed is placed on a domain that isn't allowed?


When an embed limited with Only activate this embed on specific domain(s) is placed on a website that is not one of the allowed domains or their subdomains, visitors see an "Embed incorrect" error instead of the project.

Updated on: 19/10/2026