postMessage API

Zoho Writer document messaging or postMessage API enables your web application to interact with Zoho Writer editor frame by securely sending messages and making the editor work your way. 

How it works?

To integrate with Zoho Writer online editor and communicate from your web application, we have come up with XDC (Cross Domain Communicator) API wrapper.

The XDC wrapper is written over the Web Messaging protocol and handles all the communication between the host page and Writer editor window with minimal configuration. To facilitate ease of integration and accomplish required tasks, partners will be using Zoho Writer's custom XDC methods instead of Web Message protocol methods directly. 

The XDC.setTarget wrapper as shown in the code window defines the origin host page and target editor iFrame (Zoho Writer) that will be used for sending and receiving messages. 

Admin Note:

To enable postMessage APIs, you need to register your domain(s) with us.

Please refer this link to know how to add your postMessage domains using Office Integrator Dashboard.

Posting messages to the Writer Editor Window

To post messages to the Writer editor iFrame, you need to send a request from the host page in the format as shown in the "XDC.postMessage" code section:

Request Parameters

ParameterData TypeDescription
Mandatory Parameters
messageStringSpecifies the method name
dataObjectDefines the data to be sent from the host page
oncompleteSuccess callbackReturns successful response
onexceptionException callbackReturns error cases

Note: You can test or try out the available postMessage APIs using our demo page .

Load xdc-1.0.min.js and set target

Copied<script type="text/javascript" src="https://js.zohocdn.com/officeplatform/v1/js/common/xdc-1.0.min.js"></script>
<script type="text/javascript">
	// Cross Domain Communicator
	XDC.setTarget({
		"origin": "https://api.office-integrator.com",
		"window": document.getElementById("updateIframe").contentWindow
	});
</script>

Posting messages

CopiedXDC.postMessage({
	*"message": [<MethodName: String>],
	*"data": {<Any Object>},
	*"oncomplete": function(data){
 		//Handle completion
	},
	*"onexception": function(data){
	 	//Handle exception
	}
});