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 can be done using webcomponents or iFrames (depricated). 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 (inject): 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. This version is using Webcomponents.
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.
Automatic format (iFrames - Depricated!): Similar to the first option but using iFrames instead of Webcomponent. Since the version with webcomponents is released we suggest to use that one. Performs better on SEO, Scaling, Accessibility and animation.
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).
](https://storage.crisp.chat/users/helpdesk/website/ab6dbd07644fa800/image_4eemb3.png)
You can choose from multiple ratio's, depending on the pagetype and the way you would like to show the embed inside your page:
In ratio - Embed height scales proportionally to the available width within the container of the parent page, based on the page size ratio.
Auto fill - Embed takes the entire available space within the container of the parent page where the code is added (height & width) and fits in the embed according to the safezone settings.
Max height - variable width - Embed can expand to the max available width of the parent page. The height can't get larger then the original page height.
Max width + height - Height and width of embed never exceed the original page dimensions but scales down when needed.
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.
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.
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 deprecated iFrame version will work but it will lose some functionality. The automatic inject variant will not work at all. 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
The automatic inject version using webcomponent will not work
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 (inject): 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. This version is using Webcomponents.
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.
Automatic format (iFrames - Depricated!): Similar to the first option but using iFrames instead of Webcomponent. Since the version with webcomponents is released we suggest to use that one. Performs better on SEO, Scaling, Accessibility and animation.
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).
](https://storage.crisp.chat/users/helpdesk/website/ab6dbd07644fa800/image_4eemb3.png)
You can choose from multiple ratio's, depending on the pagetype and the way you would like to show the embed inside your page:
In ratio - Embed height scales proportionally to the available width within the container of the parent page, based on the page size ratio.
Auto fill - Embed takes the entire available space within the container of the parent page where the code is added (height & width) and fits in the embed according to the safezone settings.
Max height - variable width - Embed can expand to the max available width of the parent page. The height can't get larger then the original page height.
Max width + height - Height and width of embed never exceed the original page dimensions but scales down when needed.
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.
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>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 deprecated iFrame version will work but it will lose some functionality. The automatic inject variant will not work at all. 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
The automatic inject version using webcomponent will not work
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: 18/02/2025