Integrate RWC into the SalesForce Canvas App ​

The RWC can be embedded into the SalesForce system as a third-party application and can be used in the VisualForce or Lightning templates.

Instruction ​

  1. Sign in to the developer console.
  2. Go to the Setup view.
  1. In the Search field type "app manager" and select the suggested setting.
  1. To add a third-party app, click New connected app on the right.
  1. Fill in all required fields adding the chat URL here:
  1. Now you can use RWC as a Canvas App in VisualForce or Lightning templates.

How to share events between RWC and SalesForce ​

WARNING

To receive events on the Canvas App, the application has to be authorized. Find more about authorization at SalesForce canvas developer guide.

  1. To send events from SalesForce to the RWC app, add Canvas SDK to the VisualForce app: Setup

  2. Publish events using the Sfdc helper:

html
<apex:page >
    <script type="text/javascript" src="/canvas/sdk/js/31.0/controller.js"></script>
    <script type="text/javascript" src="/soap/ajax/31.0/connection.js">

    <button id="closeBtn">click</button>

    <apex:canvasApp developerName="YOUR_APP_NAME_HERE" height="400px" width="300px"/>

    <script>
        var ctxlink = document.querySelector('#closeBtn')

        ctxlink.onclick=function() {
        Sfdc.canvas.controller.publish({
          name : 'EVENT_NAME_HERE',
          payload : {
            myData: 'Some payload'
          }
        });
      }
    </script>
</apex:page>
<apex:page >
    <script type="text/javascript" src="/canvas/sdk/js/31.0/controller.js"></script>
    <script type="text/javascript" src="/soap/ajax/31.0/connection.js">

    <button id="closeBtn">click</button>

    <apex:canvasApp developerName="YOUR_APP_NAME_HERE" height="400px" width="300px"/>

    <script>
        var ctxlink = document.querySelector('#closeBtn')

        ctxlink.onclick=function() {
        Sfdc.canvas.controller.publish({
          name : 'EVENT_NAME_HERE',
          payload : {
            myData: 'Some payload'
          }
        });
      }
    </script>
</apex:page>
  1. To create a subscription to the events, it is necessary to use SalesForce CanvasSdk in the RWC. To create the subscription:

a. Click on the Wait for Chat (RWC) Step of your Flow

b. Scroll down to and expand the Advanced Settings section

c. Enable the Extend page head by custom template

Setup

d. Add the following code to the HTML template field

js
<script type="text/javascript" src="https://home-6f2-dev-ed.my.salesforce.com/canvas/sdk/js/31.0/canvas-all.js" onload="onCanvasSdkLoad()"></script>
<script>
  const onCanvasSdkLoad = function () {
    const client = window.Sfdc.canvas.oauth.client();
    // auth required. token below is initial token from App Manager
    client.oauthToken = 'AUTH_TOKEN_HERE'

    window.Sfdc.canvas.client.subscribe(client, {
      name: 'EVENT_NAME_HERE',
      onData: function() {
        // some actions
      }
    })
  }
</script>
<script type="text/javascript" src="https://home-6f2-dev-ed.my.salesforce.com/canvas/sdk/js/31.0/canvas-all.js" onload="onCanvasSdkLoad()"></script>
<script>
  const onCanvasSdkLoad = function () {
    const client = window.Sfdc.canvas.oauth.client();
    // auth required. token below is initial token from App Manager
    client.oauthToken = 'AUTH_TOKEN_HERE'

    window.Sfdc.canvas.client.subscribe(client, {
      name: 'EVENT_NAME_HERE',
      onData: function() {
        // some actions
      }
    })
  }
</script>

e. Save & Activate the Flow