Embed a multi-page publication
Besides embedding a single page, you can also choose to embed a complete publication with several pages within a website. This embed contains the navigation environment to navigate through the different pages.
If you choose to place such an embed within an existing website, it is important to think about the ease of use. A website itself already scrolls vertically. If you place an embed with multiple pages within such an environment, a user can already scroll vertically but perhaps also scroll horizontally and vertically inside the embed/iFrame. You can get a situation that is not always user-friendly, especially on mobile.
We therefore recommend placing a multi-page embed in the following ways:
In a smaller format within, for example, a blog article. The content of the embed shrinks, but does not take up the entire space of the screen. A user cannot get stuck in the embed while scrolling through the page.
If you use the embed as a kind of slideshow in the header of your website design. Because a header most likely has a fixed height, the visitors will not get stuck in the embed.
As a fullscreen layover. We only show a visual banner, which will open the publication fullscreen on top of the website after clicking. This option 'locks' the viewer within the opened publication, and they can return to the original webpage via a close action. Click here for more information about this type of embed.
When creating the embed, choose the first option (multi-page). You will then have the choice between:
Fixed format: a standard embed code where you set the dimensions (width & height) for the iFrame place on the webpage. When setting the width and height, it is possible to enter pixel or percentage values.
Layover format: the variant where the embed is placed fullscreen over the original webpage. Details of these variants are further described in this article.
This iFrame version does not automatically scale (to mobile)
Statistic are measured inside the iFrame and not pushed outside the iframe (in combination with GTM datalayer)
This iFrame version does not switch back to mobile format, because the size per page can be different. Choose for the Layover format if the mobile variant of a page is important.
Because you're embedding a multi-page publication, a navigation environment is required. By default, we use the navigation environment linked to the project. You may now want to display the pages (depending on the function) smaller than the original publication. The standard navigation is probably too large or contains functions that are redundant for this purpose. It is then necessary to replace the navigation. Maglr offers multiple options to achieve this:
Default navigation: keep the existing navigation environment already present in the publication.
Minimal navigation: replace the existing navigation environment with a minimal one, only showing a few necessary options.
Carousel navigation: add a slideshow type of navigation, mostly used when the publication is displayed as an interactive banner/slideshow.
No navigation: completely remove the navigation environment. Keep in mind that you then need to design the navigation yourself or enable autoplay.
You can set the following settings when creating an embed:
Autoplay: when using the project for a banner or slideshow, it's possible to de-activate the navigation controls and enable autoplay. Inside the embed code, an additional parameter is added to the URL (&autoplay=5), which is set to 5 seconds by default. You are able to manually change this parameter.
Only embed on: in case you have created specific content that you only want to show on a specific website, this option is for you. It's always possible that others can copy the embed code and put it on another website. With this option, you can limit the domains where the content is allowed to be displayed on. By adding your domain to the whitelist, the embed can only start here. Other domains that will try to run this code will get an error.
As described above, our basic embed code for multi-page publications does not automatically resize, as the publication contains multiple pages with different heights. We cannot tell how a client would like to use this type of embed inside his website.
A little manual configuration is required. Below you will find an example. By pasting in the embed code, you are able to change the width and height of the container. By default it is set in pixels. You can also choose to use a percentage, like the width in the example below.
If you would like to use a different size for the mobile version, it's possible to add a small piece of custom CSS. It could be the case that you designed different slides/pages for mobile, requiring a different height.
Add an ID to the iFrame by putting in id="my-embed". You can replace this name.
Paste in the <style></style> code and replace the height with a value you need for your embed.
In this example the embed code will change from 500px to 600px if the screen width gets smaller than 500pixels.
In case the content of the iFrame is scrolling and you would like to disable this (maybe because the mobile page itself is also scrolling), you can change the iFrame variable scrolling="yes" into scrolling="no".
If you choose to place such an embed within an existing website, it is important to think about the ease of use. A website itself already scrolls vertically. If you place an embed with multiple pages within such an environment, a user can already scroll vertically but perhaps also scroll horizontally and vertically inside the embed/iFrame. You can get a situation that is not always user-friendly, especially on mobile.
We therefore recommend placing a multi-page embed in the following ways:
In a smaller format within, for example, a blog article. The content of the embed shrinks, but does not take up the entire space of the screen. A user cannot get stuck in the embed while scrolling through the page.
If you use the embed as a kind of slideshow in the header of your website design. Because a header most likely has a fixed height, the visitors will not get stuck in the embed.
As a fullscreen layover. We only show a visual banner, which will open the publication fullscreen on top of the website after clicking. This option 'locks' the viewer within the opened publication, and they can return to the original webpage via a close action. Click here for more information about this type of embed.
Create a multi-page embed
When creating the embed, choose the first option (multi-page). You will then have the choice between:
Fixed format: a standard embed code where you set the dimensions (width & height) for the iFrame place on the webpage. When setting the width and height, it is possible to enter pixel or percentage values.
Layover format: the variant where the embed is placed fullscreen over the original webpage. Details of these variants are further described in this article.
Differences with a single page embed
This iFrame version does not automatically scale (to mobile)
Statistic are measured inside the iFrame and not pushed outside the iframe (in combination with GTM datalayer)
This iFrame version does not switch back to mobile format, because the size per page can be different. Choose for the Layover format if the mobile variant of a page is important.
Adjust navigation type
Because you're embedding a multi-page publication, a navigation environment is required. By default, we use the navigation environment linked to the project. You may now want to display the pages (depending on the function) smaller than the original publication. The standard navigation is probably too large or contains functions that are redundant for this purpose. It is then necessary to replace the navigation. Maglr offers multiple options to achieve this:
Default navigation: keep the existing navigation environment already present in the publication.
Minimal navigation: replace the existing navigation environment with a minimal one, only showing a few necessary options.
Carousel navigation: add a slideshow type of navigation, mostly used when the publication is displayed as an interactive banner/slideshow.
No navigation: completely remove the navigation environment. Keep in mind that you then need to design the navigation yourself or enable autoplay.
Optional settings
You can set the following settings when creating an embed:
Autoplay: when using the project for a banner or slideshow, it's possible to de-activate the navigation controls and enable autoplay. Inside the embed code, an additional parameter is added to the URL (&autoplay=5), which is set to 5 seconds by default. You are able to manually change this parameter.
Only embed on: in case you have created specific content that you only want to show on a specific website, this option is for you. It's always possible that others can copy the embed code and put it on another website. With this option, you can limit the domains where the content is allowed to be displayed on. By adding your domain to the whitelist, the embed can only start here. Other domains that will try to run this code will get an error.
Configure with additional options
As described above, our basic embed code for multi-page publications does not automatically resize, as the publication contains multiple pages with different heights. We cannot tell how a client would like to use this type of embed inside his website.
A little manual configuration is required. Below you will find an example. By pasting in the embed code, you are able to change the width and height of the container. By default it is set in pixels. You can also choose to use a percentage, like the width in the example below.
<iframe src="https://embed.maglr.com/XXXXXX?nav=carousel&autoplay=5"
width="100%" height="500" seamless="seamless" scrolling="yes"
frameborder="0" allowtransparency="true" allowfullscreen ></iframe>Change the height for mobile sizes
If you would like to use a different size for the mobile version, it's possible to add a small piece of custom CSS. It could be the case that you designed different slides/pages for mobile, requiring a different height.
Add an ID to the iFrame by putting in id="my-embed". You can replace this name.
Paste in the <style></style> code and replace the height with a value you need for your embed.
In this example the embed code will change from 500px to 600px if the screen width gets smaller than 500pixels.
Disable scrolling
In case the content of the iFrame is scrolling and you would like to disable this (maybe because the mobile page itself is also scrolling), you can change the iFrame variable scrolling="yes" into scrolling="no".
<iframe id="my-embed" src="https://embed.maglr.com/XXXXXX?nav=carousel&autoplay=5"
width="100%" height="500" seamless="seamless" scrolling="yes"
frameborder="0" allowtransparency="true" allowfullscreen ></iframe>
<style>
@media only screen and (max-width: 500px) {
#my-embed {height:600px;}
}
</style>Updated on: 24/10/2024