Automatic inject with webcomponents
The standard option to embed something into your website is using iFrames. It's the same technique YouTube is using for embedding videos. The big advantage: the embedded content is 'separated' from the website itself. If content inside an iFrame is causing problems or errors, it doesn't affect the main page.
The downside of an iFrame is the fact that search engines don't really like them. Accessibility is not working as expected and when you design a page with complex scroll animations there is always an iframe in between, causing performance issues.
Note: this feature is only available for embedding single pages created with the Pro editor.
To get the best results for single pages we offer the Automatic embed. Instead of creating an iFrame we directly add the HTML to a div inside the external website using modern webcomponents. In this situation, the generated Maglr content becomes a part of the main website. Search engines such as Google will just see this content as a regular page, not knowing it's loaded from an external source.
Search engines are able to index the content from this page better
Complex scroll animations are running better, as for iFrames we need to create a bridge between the main page and the iFrame sending over scroll positions. This causes a small delay, especially noticable in scroll keyframe animations.
Fixed/sticky positions are running smooth. Inside iframes we need to 'fake' this position, causing a small delay when scrolling through the page.
Accessibility you can just 'TAB' through the page
Scaling It resizes smoother to different screen sizes & mobile
A Maglr design can be used in multiple ways within a page. It can be displayed fullscreen between the website’s header and footer or in a fixed format between the paragraphs of an article. The frame in which you place the embed code determines the space the embed can occupy. You can specify how this embed should scale:
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.
If the standard statistics in Maglr are activated, measurements are also performed within the embeds. When a ‘single page embed’ is loaded, it is counted as a pageview. Additionally, all other click actions are recorded as regular events.
The measurements are added to the statistics of the project itself. If you use a project for publications and a separate page as an embed, you can filter the statistics to see which traffic originates from the embed.
If you use an embed in a smaller format within your page and include scroll animations with elements that animate outside the page, this may look odd on your website. To crop or mask elements that might animate outside your embed, you can add the style tag within the code of the embed.
If you want to add multiple embeds from the same or different projects to a page, this is possible. Simply place the various embed codes on the page, and your designs will appear.
A web component is built using scoped CSS. Styling settings cannot leak from a web component. Our embeds cannot influence other layout elements of a page.
The downside of an iFrame is the fact that search engines don't really like them. Accessibility is not working as expected and when you design a page with complex scroll animations there is always an iframe in between, causing performance issues.
Note: this feature is only available for embedding single pages created with the Pro editor.
To get the best results for single pages we offer the Automatic embed. Instead of creating an iFrame we directly add the HTML to a div inside the external website using modern webcomponents. In this situation, the generated Maglr content becomes a part of the main website. Search engines such as Google will just see this content as a regular page, not knowing it's loaded from an external source.
Why using webcomponents and not iframes?
Search engines are able to index the content from this page better
Complex scroll animations are running better, as for iFrames we need to create a bridge between the main page and the iFrame sending over scroll positions. This causes a small delay, especially noticable in scroll keyframe animations.
Fixed/sticky positions are running smooth. Inside iframes we need to 'fake' this position, causing a small delay when scrolling through the page.
Accessibility you can just 'TAB' through the page
Scaling It resizes smoother to different screen sizes & mobile
Configuring the embed
A Maglr design can be used in multiple ways within a page. It can be displayed fullscreen between the website’s header and footer or in a fixed format between the paragraphs of an article. The frame in which you place the embed code determines the space the embed can occupy. You can specify how this embed should scale:
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.
Statistics
If the standard statistics in Maglr are activated, measurements are also performed within the embeds. When a ‘single page embed’ is loaded, it is counted as a pageview. Additionally, all other click actions are recorded as regular events.
The measurements are added to the statistics of the project itself. If you use a project for publications and a separate page as an embed, you can filter the statistics to see which traffic originates from the embed.
Mask / overflow embed
If you use an embed in a smaller format within your page and include scroll animations with elements that animate outside the page, this may look odd on your website. To crop or mask elements that might animate outside your embed, you can add the style tag within the code of the embed.
<maglr-embed maglrid="XXXXX" size="in-ratio" style="clip-path: inset(0 0 0 0);"></maglr-embed>Multiple embeds
If you want to add multiple embeds from the same or different projects to a page, this is possible. Simply place the various embed codes on the page, and your designs will appear.
Scoped CSS
A web component is built using scoped CSS. Styling settings cannot leak from a web component. Our embeds cannot influence other layout elements of a page.
Updated on: 18/02/2025