Single page embeds went from iFrames to inline web components
We've got news for you in regards to Maglr single page embeds (and not to be confused with the embed element). Under the hood, we have transitioned from iFrames to inline web components. We'll have to get a bit technical to understand the differences.
Embedding Maglr publications and pages
If you've never used a Maglr project or page as an embed before, you're missing out. Embedding Maglr creations is another way to draw attention to your content. Here are just some of the advantages:
Embeds can be viewed without the need to go to an external link or download a file
The embed codes work with every CMS and can be used as an extension of your website builder
Your embeds can be managed from within Maglr and are always up to date with the latest version
iFrames vs. web components: what is it and why switch?
Let's get technical. If that doesn't sound like anything that interests you, feel free to skip ahead to see what has changed and what's in it for you.
In embedding Maglr pages, we've been using iFrame technology. Long story short, iFrames come with several drawbacks:
An iFrame creates another window (HTML document) in your existing browser window and may result in unwanted scrollbars and bad user experience
The contents of an iFrame are isolated, meaning they're not part of the parent document and therefore it may not be affected by parent styles or optimised for search engines (SEO)
Can slow down page performance as your browser needs to load multiple documents instead of just one
Luckily for us, there's an alternative called "web components". It uses a custom "tag" instead of an iFrame which allows for the following merits:
Embedded content seamlessly integrates into your page, providing a much smoother user experience
Components simply scale better on various devices, improving responsiveness
The embed becomes part of your page's code, meaning it can better indexed by search engines and can inherit (but not alter) styles from the overarching web document
Web components will not block or slow down the initial page render, meaning that performance improves significantly
If you were to inspect the embed in the browser and compare them side-by-side, you'll find that the <iframe /> tag has changed into a <maglr-embed /> tag—indicating a custom web component. There may not be an obvious difference, but under the hood the technique of your embeds has completely changed, providing you with all the aforementioned benefits.
Important notes
This update is only for single page embeds created with the Pro editor, meaning standalone visuals and pages (landing pages, infographics, banners, and so on).
Prefer the iFrame version? Not to worry, the "legacy" iFrame version is still available.