For some use cases, a Single Sign-on iframe or a Containers iframe should communicate with the Emarsys application. We are using window.postMessage() to implement this communication. Our code that receives your integration’s messages is open source and available on GitHub at emartech/suite-integration-js.
It’s possible that there will be more than one integration iframes will be loaded on a page. The iframes of Single Sign-on and Containers will receive an integration_instance_id GET parameter in the iframe URL. They can use this ID to identify themselves.
Resize message
Containers may have different heights based on the content they have, and this can change dynamically if the content changes. On the load of the content and content changes, the integration should send a resize message with the new height of the content.
var integration_instance_id = document.location.href.match(/integration_instance_id=(d+)/)[1];
window.postMessage({
"event": "resize",
"source": { "integration_instance_id": integration_instance_id },
"height": 200 /* pixel */
}, "*");
Refresh message
This message simply reloads the current page.
var integration_instance_id = document.location.href.match(/integration_instance_id=(d+)/)[1];
window.postMessage({
"event": "refresh",
"source": { "integration_instance_id": integration_instance_id }
}, "*");
Alert message
The integration can send an alert event to the Emarsys application, and it will display a banner alert at the top of the page. The text of the alert message is required, and optionally you can specify an icon, a CSS classname and a timeout as well. Please refer to the Emarsys UI Framework for more information about the available icons and alert classes.
var integration_instance_id = document.location.href.match(/integration_instance_id=(d+)/)[1];
window.postMessage({
"event": "alert",
"source": { "integration_instance_id": integration_instance_id },
"icon": "e-communication-network",
"text": "Hello World!",
"className": "e-alert-success"
}, "*");