Parent Page Message

The parent page message action allows the web viewer to communicate with the parent page it is embedded in, e.g. in order to open a chatbot or display a newsletter subscription form. The action is based on the postMessage JavaScript API.

Limitations & Requirements

The Parent Page Message is currently only available to admin users as it requires some web development skills to use properly and can only be used in a very specific scenario, which is as follows:

• The SmartVu is only available as a web version. The Parent Page Message Action is not supported in the mobile clients and will not do anything if activated.

• The SmartVu is displayed by embedding the Web Viewer in another page using an IFrame-Element. The action will not work if the SmartVu is accessed in the standalone web viewer (using a view.vuframe.com-Link)

• The parent page that the viewer is embedded in contains custom JavaScript-Code that responds to the message defined in the action. If this code is missing, the action will not do anything.

Usage

In order to set up the parent page message action, you will first need to choose an identifier for the action that the action should trigger. For example, a suitable identifier for an action that opens a chatbot would be OPEN_CHATBOT. Enter this identifier in the "Message" field of the action and save the SmartVu.

It is also possible to post custom JSON data to the parent page. To do so, enter the JSON string into the "Message" field. Note that you will need to deserialize the message in the code embedded on the parent page using JSON.parse.

Additionally, you will need to setup the code that receives the message on the parent page. To do so, add the following JavaScript snippet to the page:

// register listener depending on available methods (ensures IE compatibility)
  var setupMessageListener = function(callbackFunction){
    var eventMethod = window.addEventListener ? "addEventListener": "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

    eventer(messageEvent, function(e){
      var key = e.message ? 'message' : 'data';
      callbackFunction(e[key]);
    }, false);
  }

  // perform actions on receiving a message
  var handleMessage = function(message) {
    if(message === 'IDENTIFIER') {
      // do something
    }else if(message === 'IDENTIFIER_2'){
			// do something else
		}
  }

  setupMessageListener(handleMessage);

Now, replace the different cases in the function handleMessage so they cover the identifier you set in the action and executes the corresponding functionality. For example, in order to open a chatbot, you might use the following code:

  // perform actions on receiving a message
  var handleMessage = function(message) {
    if(message === 'OPEN_CHATBOT') {
      Intercom.openChatBox();
    }
  }