iFrame API

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. This API is available for the iframe embed in Maglr templates & Maglr Pro. To start using the message API, paste the snippet below inside the <head> tag of the html to include the needed files.

<script src=“../../default-assets/jquery-3.0.0.min.js”></script>
<script src=“../../default-assets/message_api.js”></script>

After including these files, the iframe will respond to the messages that the page sends and will translates 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.


    .on(EVENT_INIT, function(event, data){
        //do something
    .on(EVENT_SCENE_START, function(event){
        //do something




The following events can be triggered:

Fired after the page is initiated. The data object contains spread information, menu data and other settings like audio mute.

Fired after scene start

Fired after scene stop (only on page stop)

Fired when an element/group animation starts

Fired when an element/group animation is done

Fired when an element/group is toggled from invisible to visible (happens before animation)

Fired when an element/group is toggled from visible to invisible

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.

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)

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.

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”).

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”)

Create Analytics event in iFrame
To measure what is going on inside your iFrame embed we have the option to sent simple events back to the Maglr page. These event are saved within the page the embed is used. You can see the events back 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