Take control of embed pages in Pro with iframe bridge
In some cases, you want to have control over the start of your animation or you want to control Maglr elements from within your embedded files. We have added a list of events and an example of how you can use these from inside the iFrame element in the Block editor, or the Embed element in the Pro editor. To start using this API, paste the snippet below inside the <head> tag of the HTML to include the needed files.
After including these files, the iframe will respond to the messages that the page sends and will translate them to events that are triggered in the document. To start interacting with the events, paste the following snippet just before the </body> closing tag.
To see how the events could work we created a demo page. You can embed this URL into your Pro page by adding the embed element and choose for the option 'Link to external page'.
This demo will show some of the incoming page events and example buttons how you could trigger an action in the Maglr parent page. Keep in mind to change the UUID, spreadID or IssueID when using the examples in your own project.
https://cdn.maglr.com/public/maglr-embed-events-demo/embed-events.html
The following events can be triggered:
EVENT_INIT OBJECT: fired after the page is initiated. The data object contains spread information, menu data and other settings like audio mute.
EVENT_SCENE_START: fired after scene start
EVENT_SCENE_STOP: fired after scene stop (only on page stop)
EVENT_ANIMATION_START: fired when an element/group animation starts
EVENT_ANIMATION_END: fired when an element/group animation is done
EVENT_ELEMENT_START: fired when an element/group is toggled from invisible to visible (happens before animation)
EVENT_ELEMENT_STOP: fired when an element/group is toggled from visible to invisible
EVENT_AUDIO_TOGGLED: fired when the user toggles audio on/off. ‘true’ = audio on, ‘false’ = audio off
The following functions can be called inside an iframe to trigger an action inside the page or interface.
In the functions below there are options to directly target a group, scene or element by UUID. From the Pro editor itself it's not possible to extract the UUID. To get this ID, inspect the element within the published HTML. You will see for example an ID like : uuid_d0a9d691-51f6-4d03-ac3a-86bae698705c_1. From this ID your can use the last part : d0a9d691-51f6-4d03-ac3a-86bae698705c_1.
Go to the given scene inside the current page.
scene: String|Number The uuid of a scene as String to go to that scene or the strings “next” or “prev” to go to the next or previous scene. When given a Number go to the scene found at the index. (Notice: sticky scenes do count)
Go to the given issue_id and spread_id.
issue_id: Number The id of the issue.
spread_id: Number The id of the page.
Toggle the given element(s) inside the current page ‘on’ or ‘off’ depending on their current state.
element: String|Array The uuid of an element as String or multiple uuid’s as an Array of strings.
close: String optional The close option to use (“closeOthers” or “closeLevel”).
Triggers an action in the interface.
action: String One of the following keywords that are supported by the interface (“home”, “back”, “previous_spread”, “next_spread”)
To measure what is going on inside your iFrame embed, we have the option to send simple events back to the Maglr page. These events are saved on the same page where the embed is used. You can find the events in the statistics dashboard.
In the statistics, the above event is shown as:
EMBED - Name of embed layer - Name of the event
<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>After including these files, the iframe will respond to the messages that the page sends and will translate them to events that are triggered in the document. To start interacting with the events, paste the following snippet just before the </body> closing tag.
<script>
$(document)
.on(EVENT_INIT, function(event, data){
//do something
})
.on(EVENT_SCENE_START, function(event){
//do something
})
;
</script>Demo page
To see how the events could work we created a demo page. You can embed this URL into your Pro page by adding the embed element and choose for the option 'Link to external page'.
This demo will show some of the incoming page events and example buttons how you could trigger an action in the Maglr parent page. Keep in mind to change the UUID, spreadID or IssueID when using the examples in your own project.
https://cdn.maglr.com/public/maglr-embed-events-demo/embed-events.html
Events
The following events can be triggered:
EVENT_INIT OBJECT: fired after the page is initiated. The data object contains spread information, menu data and other settings like audio mute.
EVENT_SCENE_START: fired after scene start
EVENT_SCENE_STOP: fired after scene stop (only on page stop)
EVENT_ANIMATION_START: fired when an element/group animation starts
EVENT_ANIMATION_END: fired when an element/group animation is done
EVENT_ELEMENT_START: fired when an element/group is toggled from invisible to visible (happens before animation)
EVENT_ELEMENT_STOP: fired when an element/group is toggled from visible to invisible
EVENT_AUDIO_TOGGLED: fired when the user toggles audio on/off. ‘true’ = audio on, ‘false’ = audio off
Functions
The following functions can be called inside an iframe to trigger an action inside the page or interface.
In the functions below there are options to directly target a group, scene or element by UUID. From the Pro editor itself it's not possible to extract the UUID. To get this ID, inspect the element within the published HTML. You will see for example an ID like : uuid_d0a9d691-51f6-4d03-ac3a-86bae698705c_1. From this ID your can use the last part : d0a9d691-51f6-4d03-ac3a-86bae698705c_1.
goToScene(scene)
Go to the given scene inside the current page.
scene: String|Number The uuid of a scene as String to go to that scene or the strings “next” or “prev” to go to the next or previous scene. When given a Number go to the scene found at the index. (Notice: sticky scenes do count)
goToScene('7ab17b28-e791-4e6b-b8e0-fcd7dd7bf2bd')
goToScene(1)
goToScene('next')
goToScene('prev')goToSpread(issue_id, spread_id)
Go to the given issue_id and spread_id.
issue_id: Number The id of the issue.
spread_id: Number The id of the page.
goToSpread(870, 11578)elementToggle(element, close)
Toggle the given element(s) inside the current page ‘on’ or ‘off’ depending on their current state.
element: String|Array The uuid of an element as String or multiple uuid’s as an Array of strings.
close: String optional 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_1'], 'closeOthers')interfaceAction(action)
Triggers an action in the interface.
action: String One of the following keywords that are supported by the interface (“home”, “back”, “previous_spread”, “next_spread”)
interfaceAction('next_spread')
interfaceAction('previous_spread')
interfaceAction('back')
interfaceAction('home')Create Analytics event in iFrame
To measure what is going on inside your iFrame embed, we have the option to send simple events back to the Maglr page. These events are saved on the same page where the embed is used. You can find the events in the statistics dashboard.
// Separate event
trackEvent(“Name of the event”);
// Event when form after form submit
$form.on(“form-submit-success”, function(){
trackEvent(“Name of the event”);
} )In the statistics, the above event is shown as:
EMBED - Name of embed layer - Name of the event
Updated on: 17/10/2024