Embed a single page
By embedding a single page, we extract the specific page from the Maglr project (without its navigation environment) and place this inside an external website. This is done using iFrames. The way this page is shown depends on the type of design you have created. For example: is it just an infographic that needs to be added inside a blog article? Or is the project designed as a fullscreen page? These steps are important to know in combination with the choices when creating an embedded piece of content.
From the page overview of your project, click the share project button in the menu on the left. In the window that pops up, go to the embed code tab and select the one specific page from this project option.
You will now see multiple ways to create your embed. These are explained in detail below:
Automatic format: in comparison with a YouTube embed (which is normally a fixed size), this embed version will take up all space available showing as much of the page possible. The amount of space depends on size of the container (div) of the website where you put the embed code in. Depending on the embed's ratio configuration (scroll down), the embed code calculates the dimensions of the embed each time you resize the screen and resizes itself accordingly. When the screen reaches a certain small size, the mobile version of the page is automatically activated.
Fixed format (manual): a fixed format allows you to decide the exact dimensions of the embed. You can set the with and height inside the parameters of the embed code and adjust them to your specific needs. This version does automatically activate the mobile version, scaling the embed to fit the size of a mobile screen. You can also manually customise the embed size on mobile.
Fullscreen overlay: this embed type places a visual banner on your external page, which opens the embed fullscreen on top of the webpage after a click. This option offers plenty of space to view a page or publication fullscreen without leaving the website. After closing the overlay, the visitor returns to the place on the webpage where the banner was clicked. Read more about the overlay embed by clicking here.
Inject in page (on request): the HTML inject option of the embed code is a more advanced version where some know-how about HTML is required. This version is used when SEO is important (does not require iFrames) or when your page is using extensive scrolling animations. This option is enabled on request. Read more about this embed inject version by clicking here.
Maglr's embed code is intelligent. When the code is added to a website, it contains an iframe and a small piece of JavaScript. This script is necessary to correctly place the embed, no matter what screen type is being used. It will also send scripts about scroll positions for advanced scroll animations and trigger the mobile version (when available).
You can choose from multiple ratio's, depending on the pagetype and the way you would like to show the embed inside your page:
Proportional: the page will be shown proportionally inside the container (div) in your website. If the size of the container is bigger than the size of Maglr page, it will grow to fit. Depending on the type of page in Maglr, the embed will either grow or scale when the screen size is altered.
Variable width: in case you would like to create a website header, this is the version you might be looking for. Width can grow up to 100%, but the height of the iFrame cannot get bigger than original height of the Maglr page.
Original format: a version commonly used for infographics. If you create a Maglr design at 600x500 pixels, the iFrame will set these same size as a maximum. If the container in which the embed is added is smaller, the embed will scale down proportionally.
You can set the following settings when creating an embed:
Disable the mobile version: when the screen gets smaller, we automatically activate the mobile version at around 480px. In case there is no mobile version available, or if you would like to show the desktop version (sized down) at all times, check this option to disable it.
Enable maximum width: with all types of embed variations, we always try to show the embed as big as possible inside the available container (div) of a website. In case you would like to limit this, choose a maximum width for the embed. By default, we filled in a maximum of 600px, but this can be adjusted to your own needs.
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.
Note: when making changes afterwards, always update the adjusted embed code. Changing the page does not require to update the embed code. It is possible to create multiple embeds from one page.
When everything is configured, it's time to copy the code. Always copy the complete code. If specific parts are missing, the embed will not run properly.
When an embed code (iframe) is added somewhere below the initial view, it could be (depending on the browser type) that animations are finished as soon as the embed comes into screen. To solve this problem, you can add an additional plugin script. Click here for more information about this.
Our embed code for 'fixed' single page embeds does not automatically resize. This version can be used if you would like to put in an embed/page in a specific sized container within you website.
To change the dimensions, 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 the height of the container. By default this is set in pixels, but you can also change this to percentages.
If you would like to use a different size for the mobile version, it's possible to add a small piece of custom CSS.
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 the example below, the embed code will change from 500px to 700px if the screen width gets smaller than 500pixels.
Some corporate organisations block the use of JavaScript from external domains. The Maglr embed code is a combination of an iframe & small piece of JavaScript. In case JavaScript is blocked, the iFrame will work but it will lose some functionality. Without the JavaScript:
Auto resize will not work
Scroll triggered animations are not working in Pro pages
We cannot switch to the mobile version of an embed
In case some of these issues occur, check the developer console in the Google Chrome browser for specific errors or contact your IT team and ask to whitelist the *.maglr.com domain in your corporate environment.
From the page overview of your project, click the share project button in the menu on the left. In the window that pops up, go to the embed code tab and select the one specific page from this project option.
Embed types
You will now see multiple ways to create your embed. These are explained in detail below:
Automatic format: in comparison with a YouTube embed (which is normally a fixed size), this embed version will take up all space available showing as much of the page possible. The amount of space depends on size of the container (div) of the website where you put the embed code in. Depending on the embed's ratio configuration (scroll down), the embed code calculates the dimensions of the embed each time you resize the screen and resizes itself accordingly. When the screen reaches a certain small size, the mobile version of the page is automatically activated.
Fixed format (manual): a fixed format allows you to decide the exact dimensions of the embed. You can set the with and height inside the parameters of the embed code and adjust them to your specific needs. This version does automatically activate the mobile version, scaling the embed to fit the size of a mobile screen. You can also manually customise the embed size on mobile.
Fullscreen overlay: this embed type places a visual banner on your external page, which opens the embed fullscreen on top of the webpage after a click. This option offers plenty of space to view a page or publication fullscreen without leaving the website. After closing the overlay, the visitor returns to the place on the webpage where the banner was clicked. Read more about the overlay embed by clicking here.
Inject in page (on request): the HTML inject option of the embed code is a more advanced version where some know-how about HTML is required. This version is used when SEO is important (does not require iFrames) or when your page is using extensive scrolling animations. This option is enabled on request. Read more about this embed inject version by clicking here.
Choose ratio
Maglr's embed code is intelligent. When the code is added to a website, it contains an iframe and a small piece of JavaScript. This script is necessary to correctly place the embed, no matter what screen type is being used. It will also send scripts about scroll positions for advanced scroll animations and trigger the mobile version (when available).
You can choose from multiple ratio's, depending on the pagetype and the way you would like to show the embed inside your page:
Proportional: the page will be shown proportionally inside the container (div) in your website. If the size of the container is bigger than the size of Maglr page, it will grow to fit. Depending on the type of page in Maglr, the embed will either grow or scale when the screen size is altered.
Variable width: in case you would like to create a website header, this is the version you might be looking for. Width can grow up to 100%, but the height of the iFrame cannot get bigger than original height of the Maglr page.
Original format: a version commonly used for infographics. If you create a Maglr design at 600x500 pixels, the iFrame will set these same size as a maximum. If the container in which the embed is added is smaller, the embed will scale down proportionally.
Optional settings
You can set the following settings when creating an embed:
Disable the mobile version: when the screen gets smaller, we automatically activate the mobile version at around 480px. In case there is no mobile version available, or if you would like to show the desktop version (sized down) at all times, check this option to disable it.
Enable maximum width: with all types of embed variations, we always try to show the embed as big as possible inside the available container (div) of a website. In case you would like to limit this, choose a maximum width for the embed. By default, we filled in a maximum of 600px, but this can be adjusted to your own needs.
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.
Note: when making changes afterwards, always update the adjusted embed code. Changing the page does not require to update the embed code. It is possible to create multiple embeds from one page.
Copy the code
When everything is configured, it's time to copy the code. Always copy the complete code. If specific parts are missing, the embed will not run properly.
Embed already starting outside the viewport
When an embed code (iframe) is added somewhere below the initial view, it could be (depending on the browser type) that animations are finished as soon as the embed comes into screen. To solve this problem, you can add an additional plugin script. Click here for more information about this.
Configure height on mobile for embed type: Fixed format
Our embed code for 'fixed' single page embeds does not automatically resize. This version can be used if you would like to put in an embed/page in a specific sized container within you website.
To change the dimensions, 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 the height of the container. By default this is set in pixels, but you can also change this to percentages.
<div data-maglrEmbed="XXXXX" data-type="static" style="width:800px;height:500px;">
<iframe src="https://embed.maglr.com/payls0sppy" frameborder="0"
style="width:100%;height:100%;" allowfullscreen></iframe></div>
<script type="text/javascript" src="https://embed.maglr.com/assets/embed/js/embed.min.js" ></script>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.
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 the example below, the embed code will change from 500px to 700px if the screen width gets smaller than 500pixels.
<div id="my-embed" data-maglrEmbed="XXXXX" data-type="static" style="width:800px;height:500px;">
<iframe src="https://embed.maglr.com/payls0sppy" frameborder="0"
style="width:100%;height:100%;" allowfullscreen></iframe></div>
<script type="text/javascript" src="https://embed.maglr.com/assets/embed/js/embed.min.js" ></script>
<style>
@media only screen and (max-width: 500px) {
#my-embed {height:700px;}
}
</style>What if JavaScript is blocked?
Some corporate organisations block the use of JavaScript from external domains. The Maglr embed code is a combination of an iframe & small piece of JavaScript. In case JavaScript is blocked, the iFrame will work but it will lose some functionality. Without the JavaScript:
Auto resize will not work
Scroll triggered animations are not working in Pro pages
We cannot switch to the mobile version of an embed
In case some of these issues occur, check the developer console in the Google Chrome browser for specific errors or contact your IT team and ask to whitelist the *.maglr.com domain in your corporate environment.
Updated on: 24/10/2024