Embedding a single page

Embedding a single page places one page of your Maglr project on an external website, without the project's navigation. You create the embed code in the Embed code tab of the Share project window, choose how the page fits on the website, and paste the code into your website's HTML. Which embed type and ratio suit you depends on the page: for example, an infographic inside a blog article, or a page designed to fill the whole screen.

Before you start

You can only create an embed when these conditions are met:

• The project is active and published. If it isn't, the Embed code tab shows the message Activate this project and the embed options can't be used.
• The project has no security: no password or login on the project, and no security on the domain it's published on. If it has, the tab shows the message Active security and the embed options can't be used. Turn that security off before you embed.

Creating a single-page embed

To create the embed code for one page of your project:

1. Go to the page overview of your project and click Share project in the menu on the left. You can also open the project's menu on the projects overview and click Share.
2. Open the Embed code tab.
3. Under Choose a page or project, select One specific page from this project.

4. Choose the page from the dropdown.
5. Under Choose an embed type, select the embed type you want.
6. If a Generate embed code button appears, click it. This button appears when the page has no embed code yet: once for Automatic format (inject), and once for the other embed types together.
7. For Automatic format (inject) and Automatic format (iframe): under Choose ratio, choose how the embed fills the space on your website.
8. Under Optional settings, tick the settings you need.
9. Under Copy the code, click Copy.
10. Paste the full code into your website's HTML where you want the page to appear.

Embed types

The Choose an embed type field in the Embed code tab offers these embed types for a single page.

Automatic format (inject)

Automatic format (inject) is the default embed type. The page becomes part of your website instead of sitting in an iframe, which the product describes as better for SEO and for performance with scroll animations.

• The embed adapts to the width of the container (div) it's placed in on your website, and resizes when the screen size changes.
• The Choose ratio setting decides how the height follows the width, and whether the embed can grow larger than the page's original size.
• A page with a mobile layout shows it when the embed or the visitor's screen is narrower than 501 px, unless Do not switch to the mobile version on a smaller screen is ticked.

For more about this embed type, see Automatic inject with webcomponents.

Fixed format (manual)

Fixed format (manual) gives the embed an exact width and height. The embed keeps the width and height set in the code (800 × 500 px by default) and does not resize to the screen. You change the size by editing the code: see Changing the size of a Fixed format embed.

Open in fullscreen layover

Open in fullscreen layover places a banner on your website. When a visitor clicks the banner, the page opens fullscreen on top of your website. After closing the overlay, the visitor returns to the place on the website where they clicked the banner. For the banner settings, see Overlay embed.

Automatic format (iframe)

Automatic format (iframe) is a legacy embed type that shows the page in an iframe and resizes it to the available space. To see it, click Show legacy embed options below the other embed types. For most pages, use Automatic format (inject) instead; the product recommends the inject version when the page has scroll animations.

Choosing a ratio

The Choose ratio setting decides how an automatic embed fills the container on your website. It's available for Automatic format (inject) and Automatic format (iframe), each with its own options. Fixed format (manual) and Open in fullscreen layover have no ratio setting.

The ratios for Automatic format (inject) are:

• In ratio (default): the embed height scales proportionally to the available width within the container of the parent page, based on the page size ratio.
• Auto fill: the embed takes the entire available space (height and width) within the container of the parent page where the code is added, and fits the page in according to the safe zone settings.
• Max height - variable width: the embed can expand to the maximum available width of the parent page. The height can't get larger than the original page height.
• Max width + height: the height and width of the embed never exceed the original page dimensions, but scale down when needed.

The ratios for Automatic format (iframe) are:

• Proportional (default): the height scales proportionally to the width, based on the page size ratio.
• Variable width: the embed can expand in width. The height can't get larger than the original page height.
• Original format: the height and width never exceed the original page dimensions.

Optional settings

The Optional settings section of the Embed code tab holds three settings. Tick a setting's checkbox to turn it on.

Turning off the mobile version

A page with a mobile layout shows it when the embed or the visitor's screen is narrower than 501 px. To always show the desktop layout instead, tick Do not switch to the mobile version on a smaller screen.

• With Automatic format (inject), the page keeps its desktop layout at every size.
• With Fixed format (manual) and Automatic format (iframe), the page keeps its desktop layout and is scaled down to fit the embed.
• The option is greyed out for Open in fullscreen layover.
• A page without a mobile layout never switches, so you don't need this option for it.

Setting a maximum width

To limit how wide the embed can get on your website, tick Choose a maximum width displaying this embed and enter a width in pixels. The default is 600 px.

This setting is available for Fixed format (manual), Open in fullscreen layover and Automatic format (iframe). It's not available for Automatic format (inject).

Restricting the embed to specific domains

Only activate this embed on specific domain(s) limits the websites where the embed works. Anyone can copy embed code from a website's source, so use this setting when the page should only appear on your own website.

1. Under Optional settings, tick Only activate this embed on specific domain(s).
2. Type the domain, for example yourwebsite.com.
3. Click Add.
4. Repeat for each domain where the embed may appear.

To remove a domain, click the x on its tag.

A listed domain also allows its subdomains: adding yourwebsite.com allows www.yourwebsite.com and blog.yourwebsite.com too. On any other website, the embed doesn't load. With Automatic format (inject), visitors see the red text "Maglr.com embed error". With the other embed types, the embed area shows an "Embed incorrect" message.

Copying the embed code

The embed code is under Copy the code in the Embed code tab. Click Copy and paste the complete code into your website's HTML. If parts of the code are missing, the embed will not run properly.

Changing the size of a Fixed format embed

A Fixed format (manual) embed keeps the width and height written in its code and does not resize to the screen. By default the size is 800 × 500 px. Use it to place the page in a container of a specific size on your website.

To change the size:

1. Copy the Fixed format (manual) code.
2. In the style attribute of the <div>, replace the width and height values with the size you need.
3. Paste the code into your website's HTML.

The code looks like this, with your own embed ID in place of XXXXX:

<div data-maglrEmbed="XXXXX" data-type="static" style="width:800px;height:500px;">
<iframe src="https://embed.maglr.com/XXXXX" 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>

The size is set in pixels by default, but you can also use percentages, for example width:100%;. A percentage height only works when the element around the embed has a height. If you set a maximum width, it's added to the same style attribute.

Embeds when JavaScript is blocked

Some organisations block JavaScript from external domains. Every Maglr embed code includes a script from embed.maglr.com, so blocking it affects the embed:

• Automatic format (inject) doesn't work at all, because it runs entirely on that script.
• Fixed format (manual) and Automatic format (iframe) still show the page in an iframe, but lose some functionality. Fixed format (manual) keeps the size in its code; Automatic format (iframe) shows as a 16:9 area.

Without the script, an embed that still shows loses these functions:

• The embed doesn't resize automatically.
• Scroll-triggered animations don't work.
• The embed can't switch to the mobile version of the page.

If an embed doesn't work on a network, check your browser's developer console for errors, or ask your IT team to allow the *.maglr.com domain.

Frequently asked questions

Do I need to update the embed code after I change the page?

No. A single-page embed always shows the latest published version of the page, so publish the page again and the embed on your website updates. You only need to copy new code after you change the embed type, ratio, the mobile setting or the maximum width.

Why does my embed show the mobile version of the page?

A page with a mobile layout shows it when the embed or the visitor's screen is narrower than 501 px. To always show the desktop layout, tick Do not switch to the mobile version on a smaller screen under Optional settings in the Embed code tab, then copy the new code and replace the code on your website.

Why can't I tick the option to turn off the mobile version?

The Do not switch to the mobile version on a smaller screen option is greyed out for the Open in fullscreen layover embed type. Choose another embed type to use it.

Why does my embed show an error on my website?

An embed shows an error instead of the page in these cases. With Automatic format (inject), the error is the red text "Maglr.com embed error". With the other embed types, the embed area shows an "Embed incorrect" message.

• Only activate this embed on specific domain(s) is on and the website's domain isn't in the list. Add the domain under Optional settings in the Embed code tab.
• The project or the page is inactive. Activate and publish it again.

Related updates:

• 19/02/2025 | Single page embeds went from iFrames to inline web components

Updated on: 16/10/2026