Articles on: Share & analyse

Automatic inject with webcomponents

Automatic format (inject) is an embed type that adds a Maglr page directly into your web page as a web component, instead of loading it in a separate iframe. The page becomes part of your website instead of a separate framed document. The advantages are listed in Benefits compared to an iframe embed.


Automatic format (inject) is available when you embed one specific page from a project. It is not offered when you embed the complete project with all pages.


Creating an inject embed


To create an Automatic format (inject) embed and add it to your website:


  1. In the project overview, open the project's menu and click Share. Or, inside the project, click Share project.
  2. Open the Embed code tab.
  3. Under Choose a page or project, select One specific page from this project, then choose the page in the drop-down. In a single-page project, the page is already selected.
  4. Under Choose an embed type, select Automatic format (inject) (selected by default).
  5. If a Generate embed code button appears, click it. The ratio, the optional settings and the code appear after you click it.
  6. Under Choose ratio, select how the embed sizes itself: In ratio, Auto fill, Max height - variable width or Max width + height. The options are explained in Choosing the embed size.
  7. Optional: under Optional settings, check Do not switch to the mobile version on a smaller screen to always show the desktop layout.
  8. Optional: under Optional settings, check Only activate this embed on specific domain(s), enter a domain without https://, such as domain.com, and click Add. Repeat for each domain.
  9. Under Copy the code, click Copy.
  10. Paste the code into your website's HTML, in the place where the page should appear.



The project must be active and published, and must not have security enabled, on the project or on its domain, such as a password, an auto-login link or an IP check. Otherwise the Embed code tab can't be used and shows Activate this project or Active security. The page you embed must also be active.


The ratio and the mobile setting are written into the embed code. If you change either one, copy the code again and replace it on your website. The domain restriction is saved in Maglr and takes effect without new code.


Choosing the embed size


An inject embed takes its space from the element (container) on your web page where you paste the code. You can place it full width between your website's header and footer, or in a fixed format between the paragraphs of an article. Under Choose ratio, you set how the embed scales within that container:


  • 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 and width) and fits in the embed according to the safe zone settings.
  • Max height - variable width: Embed can expand to the max available width of the parent page. The height can't get larger than the original page height.
  • Max width + height: Height and width of the embed never exceed the original page dimensions, and the embed scales down when needed.


Mobile layout in an inject embed


By default, an inject embed shows the page's mobile layout when the embed itself is less than 501 pixels wide. This depends on the width of the embed, not the width of the screen. To always show the desktop layout, check Do not switch to the mobile version on a smaller screen under Optional settings before you copy the code.


Benefits compared to an iframe embed


An iframe loads the embedded page as a separate document inside your website. An Automatic format (inject) embed adds the page to your website itself, which gives these advantages:


  • Search engines: The content becomes part of your web page instead of a separate framed document, so search engines can index it as part of your page.
  • Scroll animations: An iframe needs extra work to pass scroll positions to the embedded page, which causes a slight delay. This is most noticeable in scroll keyframe animations. An inject embed has no such delay.
  • Fixed and sticky elements: Inside an iframe, fixed and sticky positions have to be simulated, which causes a slight delay while scrolling. In an inject embed, they move smoothly.
  • Accessibility: Visitors can move through the embedded content with the Tab key, the same way as through the rest of your page.
  • Scaling: The embed resizes smoothly to different screen sizes. By default, it switches to the page's mobile layout when the embed is less than 501 pixels wide.


Masking content that animates outside the embed


If an inject embed sits in a smaller area of your web page and the Maglr page contains scroll animations with elements that move outside its edges, those elements can show outside the embed. To crop them at the edge of the embed, add a style attribute with clip-path: inset(0 0 0 0); to the <maglr-embed> tag in the code you copied:


<maglr-embed maglrid="XXXXX" size="in-ratio" style="clip-path: inset(0 0 0 0);"></maglr-embed>


Keep the <script> tag that comes with the copied code. The <maglr-embed> tag does not work without it.


Statistics for inject embeds


An Automatic format (inject) embed is measured in Maglr's statistics. Each time the embed loads, it counts as a page view, and click actions inside the embed are recorded as regular events.



The measurements are added to the statistics of the project the page belongs to. To see only traffic from embeds, open the project's statistics, use the Shared format filter and choose Shared as embed. This filter includes all embed types, not only inject embeds.


Styling isolation


An Automatic format (inject) embed is built as a web component with scoped CSS. The embed's styling stays inside the embed, so it doesn't change the styling of the rest of your web page.


Frequently asked questions


Can I place multiple inject embeds on one page?


Yes. You can add several Automatic format (inject) embeds to one web page, from the same project or from different projects. Copy the embed code for each page and paste each one where it should appear.


Why don't I see Automatic format (inject)?


Automatic format (inject) appears only when you select One specific page from this project in the Embed code tab. It is not offered for the complete project, and it is not available for Block pages. If the Embed code tab can't be used at all, the project is inactive or has security enabled.


Why does my inject embed show the mobile layout?


An inject embed shows the page's mobile layout when the embed is less than 501 pixels wide, even on a large screen. To always show the desktop layout, check Do not switch to the mobile version on a smaller screen under Optional settings in the Embed code tab, then copy the code again and replace it on your website.


Can I restrict which websites can show my inject embed?


Yes. In the Embed code tab, under Optional settings, check Only activate this embed on specific domain(s), enter each domain and click Add. The embed then only works on those domains and their subdomains. This setting is saved in Maglr, so you don't need to replace the code on your website.


Do I need to update the code on my website after I change the page?


No. An Automatic format (inject) embed loads the published page, so after you publish your changes, the embed shows the new version. You only need to copy the code again if you change the ratio or the mobile setting.

Updated on: 19/10/2026