Articles on: Create, publish & manage

Embedding external code

The Embed element adds external content to your publication in two ways: it shows another web page through an iFrame link, or it runs your own code (HTML, which can include CSS and JavaScript) on the published page.


Image: external code in Maglr



The Embed element has a Type switch with two options:


  • iFrame link: shows an existing web page inside the element, in a frame the size of the element. A new Embed element uses this type by default. Use it when you want to show another website and don't need to write code.
  • Code: places your own HTML snippet, such as a third-party widget or embed code, directly into the published page. The code can include CSS inside <style> tags and JavaScript inside <script> tags.


If you only want to show another website, use iFrame link. Code runs on your published page itself, so it can change how the page looks and works.


For more about the Embed element and its settings, see Embed element.


Embedding a web page with an iFrame link


To show another web page inside your publication:


  1. In the editor's left panel, click Add.
  2. In the Add elements drawer, open Specials.
  3. Drag Embed onto your scene.
  4. With the Embed element selected, go to the Embed block on the Settings tab in the right panel.
  5. Under Type, select iFrame link. A new Embed element has this type selected by default.
  6. Paste the address of the web page. The address must start with https://.
  7. Optional: under Options, turn on Scroll inside to let visitors scroll content that is bigger than the element.


Image: embed element in the editor


If the address doesn't start with https://, the field turns red and shows "Use a link that starts with https://". The new address is not saved until it starts with https://; until then, the element keeps the last address that did.


Adding your own code


To run your own HTML, CSS or JavaScript in your publication:


  1. In the editor's left panel, click Add.
  2. In the Add elements drawer, open Specials.
  3. Drag Embed onto your scene.
  4. With the Embed element selected, go to the Embed block on the Settings tab in the right panel.
  5. Under Type, select Code.
  6. Type or paste your code in the code box ("Paste or type your embed code").
  7. Optional: for longer code, click Open large code window, edit your code, and click Save. Changes in the large code window are applied only when you click Save.
  8. Optional: under Options, turn on Scroll inside so visitors can scroll content that is bigger than the element.
  9. Preview your publication to check the result.


The code box takes HTML. Put CSS inside <style> tags and JavaScript inside <script> tags in the same box.


How embedded code behaves on the published page


On the published page, code from an Embed element set to Code is placed directly into the page's HTML, not inside a separate frame. It runs on the published page itself.


In the editor, the code is shown inside a separate frame. The editor view can therefore differ from the published page, so check the result in a preview.


Styles and scripts in your embedded code are not limited to the Embed element. They can affect other content on the same page, such as text, images and layout.


Showing content that is bigger than the Embed element


By default, an Embed element cuts off any content that doesn't fit inside the element's size. To let visitors scroll that content instead, select the Embed element and, under Options in the Embed block, turn on Scroll inside. Scroll inside is available for both iFrame link and Code.


Frequently asked questions



The Embed element only saves a web address that starts with https://. If the address starts with http:// or has no prefix, the field shows "Use a link that starts with https://" and the address is not saved. Change the address so it starts with https://.


Can I add a video, image or audio with the Embed element?


The Embed element has no separate option for videos, images or audio. Use the Video, Image or Audio element instead. The Video element accepts YouTube and Vimeo links.


Why is part of my embedded content cut off?


An Embed element shows only the content that fits inside its size. To show more, make the element bigger, or select it and turn on Scroll inside under Options in the Embed block so visitors can scroll the content.


Why can't I choose File for a new Embed element?


The File type is shown only for Embed elements that already display a file uploaded to Maglr's server. Those elements keep the File type and its settings. A new Embed element can use iFrame link or Code.


Why can't I edit the code in an Embed element?


If the Embed block shows "Code added by a designer. Ask a designer to change it.", your user role can't edit code. Ask a user with designer rights to change the code.

Updated on: 23/10/2026