1<apex:page doctype="html-5.0" standardstylesheets="false" showHeader="false">
2 <html>
3 <head>
4<!-- easyXDM.min.js compiled and minified JavaScript to communicate with Salesforce CPQ-->
5<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/easyXDM/2.4.20/easyXDM.min.js" crossorigin="anonymous">
6</script>
7 </head>
8 <body>
9 <div>
10 <button onclick="broadcastSend()">Send</button>
11 <button onclick="broadcastCancel()">Cancel (Customer's Cancel Button)</button>
12 <br></br>
13 <textarea id="output" type="text" style="width:1400px; height:700px"></textarea>
14 </div>
15 <script type="text/javascript">
16 // Set up the EasyXDM connection to Salesforce CPQ
17 var rpc = new easyXDM.Rpc({},{
18 remote: {
19 postMessage: {}
20 },
21 local: {
22 //Method that receives the configuration information.
23 postMessage: function(message) {
24 // Display the JSON received from Salesforce CPQ.
25 document.getElementById('output').value = JSON.stringify(JSON.parse(message), null, 4);
26 }
27 }
28 });
29 function broadcastSend() {
30 //Return the configuration information to Salesforce CPQ
31 rpc.postMessage(document.getElementById('output').value);
32 }
33 function broadcastCancel() {
34 rpc.postMessage(null);
35 }
36 </script>
37 </body>
38</html>
39</apex:page>