Articles on: The editor

Take control of embedded pages with iframe bridge

The iframe bridge lets a web page that you embed in a Maglr page react to events on that Maglr page, such as a scene starting, and trigger actions on it, such as going to another scene. It works for your own HTML page shown through an Embed element with the type iFrame link.


Setting up the iframe bridge


To connect your own HTML page to a Maglr page with the iframe bridge:


  1. In your HTML page, paste the following two script tags inside the <head> tag:


<script src="https://customercontent.maglr.com/default-assets/jquery-3.0.0.min.js"></script>

<script src="https://customercontent.maglr.com/default-assets/message_api.js"></script>


  1. Paste the following script just before the closing </body> tag, and replace each //do something with your own code:


<script>
$(document)
    .on(EVENT_INIT, function(event, data){
        //do something
    })
    .on(EVENT_SCENE_START, function(event){
        //do something
    })
;
</script>


  1. Put your HTML page online at an address that starts with https://.
  2. In the Maglr editor, add an Embed element to your page.
  3. In the Embed settings, set Type to iFrame link.
  4. Paste the https:// address of your HTML page into the link field.
  5. Open the preview or the published Maglr page to test the events. The events come from the Maglr page as visitors see it, not from the editor canvas.


The bridge only works with the iFrame link type. When you publish, Maglr adds an identifier parameter to the address of your page, and the bridge script uses it to talk to the Maglr page. An embed with the type Code gets no identifier, so the bridge can't work in it.


Trying the demo page


Maglr has a demo page that shows some of the events your embedded page receives, with example buttons that trigger actions on the Maglr page. To try it:


  1. In the Maglr editor, add an Embed element to your page.
  2. In the Embed settings, set Type to iFrame link.
  3. Paste the demo address into the link field: https://cdn.maglr.com/public/maglr-embed-events-demo/embed-events.html


The demo's example buttons use IDs from a demo project. To use an example in your own project, replace the element and scene UUIDs, the project ID and the page ID with your own.


Events your page can listen to


After you add the iframe bridge scripts to your embedded page, it receives these events from the Maglr page it is embedded in. Listen to them with $(document).on(...), as in the setup script.


  • EVENT_INIT: fired when your embedded page has loaded. The data object holds information about the project and the page (their IDs and titles), the URL parameters of the Maglr page, and the page's replaceable values.
  • EVENT_SCENE_START: fired when the scene that contains the embed starts.
  • EVENT_SCENE_STOP: fired when the scene that contains the embed stops, for example when the visitor goes to another scene or page.
  • EVENT_ANIMATION_START: fired when the embed, or the group it is in, starts its in-animation.
  • EVENT_ANIMATION_END: fired when the in-animation of the embed, or of the group it is in, is done.
  • EVENT_ELEMENT_START: fired when the embed becomes visible: when it, or its group, is shown, when it scrolls into view, or when its in-animation ends.
  • EVENT_ELEMENT_STOP: fired when the embed, or its group, is hidden.


Finding an element or scene UUID


The functions goToScene and elementToggle target a scene or element by its UUID. The editor doesn't show UUIDs, so you take them from the published Maglr page:


  1. Open the preview or the published Maglr page in your browser.
  2. Right-click the element and choose your browser's Inspect option.
  3. Find the element's id, for example uuid_s11578_d0a9d691-51f6-4d03-ac3a-86bae698705c_1.
  4. Copy the UUID in the middle, between uuid_s11578_ and the final _1: d0a9d691-51f6-4d03-ac3a-86bae698705c.


A scene's id starts with scene_s instead of uuid_s, for example scene_s11578_7ab17b28-e791-4e6b-b8e0-fcd7dd7bf2bd_1. Copy the UUID in the middle in the same way.


Use the UUID only. Maglr adds the rest of the ID for the layout the visitor is on (_1 is desktop, _2 is mobile). elementToggle also accepts a full element ID that starts with uuid_, but that only works on the one layout in the ID.


Functions your page can call


After you add the iframe bridge scripts to your embedded page, it can call these functions to trigger an action on the Maglr page it is embedded in. To find the UUID of an element or scene, see Finding an element or scene UUID.


goToScene(scene)


goToScene goes to a scene on the current Maglr page.


The scene parameter takes one of these values:


  • A scene UUID: a String, to go to that scene.
  • 'next' or 'prev': a String, to go to the next or previous scene.
  • A Number: to go to the scene at that position. The first scene is 0, the second is 1, and so on. A sticky scene counts as a scene.


goToScene('7ab17b28-e791-4e6b-b8e0-fcd7dd7bf2bd')
goToScene(1)
goToScene('next')
goToScene('prev')


goToSpread(issue_id, spread_id)


goToSpread goes to a page in a project.


  • issue_id: a Number. The ID of the project.
  • spread_id: a Number. The ID of the page.


goToSpread(870, 11578)


elementToggle(element, close)


elementToggle shows or hides one or more elements on the current Maglr page: a hidden element is shown, and a visible element is hidden.


  • element: a String or an Array. The UUID of one element as a String, or the UUIDs of several elements as an Array of Strings.
  • close (optional): a String. The close option to use: 'closeOthers' or 'closeLevel'.


elementToggle('c152d2ea-6d71-4962-b24f-7907aab4511a')

elementToggle(['c152d2ea-6d71-4962-b24f-7907aab4511a', 'fde01f48-1e2e-49d4-b9e4-973bd86d1c86'], 'closeOthers')


interfaceAction(action)


interfaceAction triggers an action in the interface around the Maglr page.


The action parameter is a String with one of these values:


  • home: goes to the start of the project.
  • back: goes back to the page the visitor came from.
  • previous_spread: goes to the previous page.
  • next_spread: goes to the next page.
  • menu.open: opens the side menu, if the interface has one.


interfaceAction('next_spread')
interfaceAction('previous_spread')
interfaceAction('back')
interfaceAction('home')


Tracking events in statistics


The trackEvent function sends an event from your embedded page to Maglr's statistics, so you can measure what visitors do inside the embed. It works after you add the iframe bridge scripts to your embedded page. The event is saved for the Maglr page that the embed is on.


// Send an event
trackEvent('Name of the event');

// Send an event when your own form is submitted (replace 'form' with a selector for your form)
document.querySelector('form').addEventListener('submit', function(){
    trackEvent('Form submitted');
});


In the project's statistics, under Events overview, the event appears with the embed element's layer name as the action and your event name as the label.


Frequently asked questions


Why doesn't my embedded page receive any events?


Check these points:


  • The Embed element's Type is iFrame link, not Code.
  • The address of your page starts with https://.
  • The two iframe bridge script tags are inside the <head> tag of your page.
  • Your page keeps the identifier parameter that Maglr adds to its address. A redirect that drops it stops the bridge from working.
  • You test on the preview or the published Maglr page, not in the editor.


Does the iframe bridge work with the Code embed type?


No. The iframe bridge only works in an Embed element with the type iFrame link. A Code embed doesn't get the identifier the bridge needs to talk to the Maglr page.


Can I find an element's UUID in the editor?


No. The editor doesn't show element or scene UUIDs. Open the preview or the published Maglr page in your browser, inspect the element, and copy the UUID from the middle of its id. For example, from uuid_s11578_d0a9d691-51f6-4d03-ac3a-86bae698705c_1, copy d0a9d691-51f6-4d03-ac3a-86bae698705c.


Where do I see events sent with trackEvent?


In the project's statistics, under Events overview. Each event appears with the embed element's layer name as the action and the name you passed to trackEvent as the label.

Updated on: 20/10/2026