Articles on: The editor

Embed

The Embed element shows content from another website, or your own HTML, CSS and JavaScript code, inside a Maglr page. You choose how the content is added with the element's Type setting: iFrame link shows a web page by its link, and Code places pasted embed code on the page.


Adding an Embed element


To add an Embed element to a page:


  1. In the editor, click Add in the left panel.
  2. Click Specials, then click Embed or drag it onto the canvas.
  3. Resize the Embed element to fit the content you want to show. A new Embed element starts at 300 × 200 pixels and does not resize itself to its content.
  4. In the right panel, on the Element tab, open Settings (the wrench icon). In the Embed block, choose a Type: iFrame link or Code.


Embedding a page with an iFrame link


Use the Embed element's iFrame link type to show a page from another website, such as a form, inside your Maglr page. Visitors see that page in a frame the size of the Embed element.


  1. Select the Embed element on the canvas.
  2. In the right panel, on the Element tab, open Settings (the wrench icon). In the Embed block, set Type to iFrame link.
  3. Paste the link of the page into the link field, which shows https:// when empty. The link must start with https://.
  4. Resize the Embed element to fit the page.


A link that does not start with https:// is not saved, and the panel shows "Use a link that starts with https://".


In the editor, a page embedded with iFrame link runs without its scripts, so a page that needs JavaScript can look empty or broken there. Check the page in the preview to see it as visitors will.


Embedding your own code


Use the Embed element's Code type to place embed code on your page, such as the embed code of a social media post (for example, from X or Instagram), or a small piece of your own HTML, CSS and JavaScript.


  1. Copy the embed code from the other website, for example from a post's embed option.
  2. Select the Embed element on the canvas.
  3. In the right panel, on the Element tab, open Settings (the wrench icon). In the Embed block, set Type to Code.
  4. Paste the code into the code box.
  5. For longer code, click Open large code window, paste or edit the code in the Edit embed code window, and click Save. Changes in this window apply only when you click Save.
  6. Resize the Embed element so the content fits, or turn on Scroll inside under Options.


Code in an Embed element with the Code type is placed directly into the published page, not in a separate frame. Its CSS and JavaScript can therefore affect, or be affected by, the rest of the page. If the code is an <iframe> tag, the content inside that frame comes from the other website.


Maglr can't check the code you paste. Code that conflicts with the page can break the layout or other elements on the page. Test the page in the preview after adding code.


Scrolling inside an embed


By default, an Embed element cuts off any content that is larger than the element. To let visitors scroll that content instead:


  1. Select the Embed element on the canvas.
  2. In the right panel, on the Element tab, open Settings (the wrench icon) and go to the Embed block.
  3. Under Options, turn on Scroll inside.


Scroll inside is available for both the iFrame link and Code types. A page embedded with iFrame link can often scroll inside its own frame already; the setting matters most for Code embeds.


Embeds that use a file on the server


Some existing Embed elements use the File type, which loads a folder of files from the Maglr server. For these Embed elements:


  • The folder is chosen in the File on server dropdown in the Embed block.
  • Maglr loads the index.html file at the top level of that folder.
  • After the files in the folder change, click Reload embed to show the new version on the canvas in the editor.
  • Visitors get the changed files without any action in the editor. Their browser can still show a cached copy, so they may need to reload the page more than once to see the update.


New Embed elements offer only the iFrame link and Code types.


Controlling an embedded page with Maglr events


A page shown in an Embed element with the iFrame link type can exchange messages with your Maglr publication, for example to start or stop animations based on Maglr events. On the published page, code in an Embed element with the Code type is not in a frame, so it doesn't use this messaging. For more information, check out the Maglr JS Embed API.


Frequently asked questions


Why does my embedded page look empty in the editor?


In the editor, a page embedded with the Embed element's iFrame link type runs without its scripts. A page that needs JavaScript, such as many forms and maps, can look empty or broken in the editor. Check the page in the preview to see it as visitors will.


Why is my embed cut off?


An Embed element cuts off content that is larger than the element. Resize the Embed element to fit the content. Or select the element, open Settings (the wrench icon) on the Element tab of the right panel, and turn on Scroll inside under Options in the Embed block, so visitors can scroll the content. This matters most for the Code type; a page embedded with iFrame link can usually scroll inside its own frame.



No. The Embed element's iFrame link type only accepts links that start with https://. A link that starts with http:// is not saved, and the panel shows "Use a link that starts with https://".


Why can't I choose File on server for a new embed?


New Embed elements offer only the iFrame link and Code types. Only Embed elements that already use a file on the server have the File type and the File on server dropdown. To embed content in a new Embed element, use iFrame link for a page on another website, or Code for embed code.

Updated on: 29/10/2026