The three standard options to embed a single Maglr page (automatic, fixed size and layover) all use iFrames to place the content on an external website. 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.
This feature is only available on request in combination with a Maglr Pro account and 'Micro Content' projects. Contact email@example.com for more information.
The downside of an iFrame is the fact that search engines don't really like them. Since 2020, the results are getting better in where Google is now able to 'spider crawl' the content of an iFrame that is used on a specific website. But it's not the best option in improving optimisation.
To get the best results, we offer the HTML embed inject. It does the same as the fullscreen embed, but instead of creating an iFrame we directly add the HTML to a div inside the external website. 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 use the inject version of the Maglr embed code?
- 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.
What does not work when using the inject version?
- Google Analytics is not running in case a page is injected into an external website. The specific website is probably already measured and we don't want to inject a script that could crash. For Analytics and Google Tag Manager, we do trigger events when clicking on certain interactions inside a Pro page. These interactions can be utilied. Read more about this implementation.
Take into account
We have tested this option in a lot of different websites and it does work perfectly. But by adding our code inside an existing website, it could sometimes cause a problem with your already existing CSS.
Our CSS is scoped, meaning the layout of the main page is not affected by our code. Depending on the type of CSS used in the main website, it could have an influence on the layout of our embedded pages.
When using important tags on default elements like H1, paragraphs or buttons, it could change the appearance of elements inside the Pro pages.
For this reason, this option is only available for the more 'advanced' users. Contact firstname.lastname@example.org for more information or to activate this option.