postMessage API

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

How it works?

To integrate with Zoho Show 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 Show editor window with minimal configuration. To facilitate ease of integration and accomplish required tasks, partners will be using Zoho Show'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 Show) 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 Show Editor Window

To post messages to the Show 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

Parameter	Data Type	Description
Mandatory Parameters
message	String	Specifies the method name
data	Object	Defines the data to be sent from the host page
oncomplete	Success callback	Returns successful response
onexception	Exception callback	Returns error cases

Note: You can check the available postMessage APIs in our Show service here.

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://show.zoho.com",
		"window": document.getElementById("frame-document-preview").contentWindow
	});
</script>

Posting messages:

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