ringcentral-embeddable-demos

The RingCentral Web Widget demo for Salesforce Lightning is a simple demo that show cases the following use cases:

This demo is located in the salesforce_lightning folder.

Note: There is a follow-on demo that builds on this and will create additional screen-pops for Google Search and LinkedIn Search in the salesforce_lightning_plus folder. This consists of just one additional line of JavaScript for each serach.

Contents

Installation

To install this demo, clone the repo and load the file in your browser:

Create a RingCentral App

Create an app with the following characteristics:

Property Setting
Platform Type Browser-based
Grant Types Authorization Code or Implicit Grant
Permissions see ringcentral/ringcentral-web-widget

Clone the repo

git clone https://github.com/ringcentral-tutorials/ringcentral-web-widget-demos

Add the Web Widget to Salesforce

To add the RingCentral Web Widget, we need to create a Salesforce Call Center with the Visualforce page and then add users that want to use the Web Widget to the Call Center.

Create the Salesforce Call Center

In Salesforce Lightning create a Salesforce Call Center using the following steps:

  1. In Salesforce Lightning click Setup

  1. In the Quick Find, type call centers and then click Call Centers.

  2. If you see a “Say Hello to Salesforce Call Center” introduction page, click Continue.

  3. Then click the Import button and select the XML file.

You can create a file similar to the below or import the salesforce_demo-1.0.0_config_CallCenterDefinition.xml file.

You can change the settings in the XML file. The following are of note:

<callCenter>
  <section sortOrder="0" name="reqGeneralInfo" label="General Information">
    <item sortOrder="0" name="reqInternalName" label="Internal Name">RingCentralAdapterOpenCTI</item>
    <item sortOrder="1" name="reqDisplayName" label="Display Name">RingCentral Call Center Adapter Open CTI</item>
    <item sortOrder="2" name="reqAdapterUrl" label="CTI Adapter URL">/apex/RCPhone</item>
    <item sortOrder="3" name="reqUseApi" label="Use CTI API">true</item>
    <item sortOrder="4" name="reqSoftphoneHeight" label="Softphone Height">550</item>
    <item sortOrder="5" name="reqSoftphoneWidth" label="Softphone Width">300</item>
    <item sortOrder="6" name="reqSalesforceCompatibilityMode" label="Salesforce Compatibility Mode">Lightning</item>
  </section>
</callCenter>
  1. After you have created the Call Center, click Manage Call Center Users and then click Add More Users.

  1. Use the Find button to select the users you wish to use the RingCentral Widget, select the users and then click Add to Call Center

Create the Widget Visualforce Page

Create the Widget Visualforce Page

  1. Open the Developer Console by clicking the gear icon in the upper right corner.

  1. Create a new Visualforce page by clicking File > New > Visualforce Page

  1. Replace the content of the page with the following HTML. Save the page by clicking File > Save
<apex:page>
    <style>
        .hasMotif {
        margin : 0px;
        }
    </style>
    <apex:iframe src="https://ringcentral.github.io/ringcentral-web-widget/app.html" height="500" width="300" frameborder="false"/>
</apex:page>

Add the Widget to Your Salesforce App

  1. Go to the App Manager

In the Setup > Quick Find, search for and click on App Manager

Select the “Lighting” app you wish to add the Webphone too by clicking Edit. For example, you can select the “LightningSales” app as shown below, another Lightning app or click New Lightning App.

  1. Add Open CTI Softphone

Under the Utility Bar, click Add and then search for, and click, Open CTI Softphone.

  1. You do not need to change any options. Click Save.

  1. Go to your Salesforce app via the App Launcher and bring up the RingCentral Web Widget

Integrations

The following section covers three primary use cases.

Click-to-Dial

To add click-to-dial to your RingCentral Widget in Salesforce, we want to call the sforce.opencti.enableClickToDial() and sforce.opencti.onClickToDial() functions. We will register a fuction to the onClickToDial() function that uses the browser’s Window.postMessage() function message to send a message which the Widget is listening for using the rc-adapter-new-call message type.

Code for this is shown below. Open your RCPhone Visualforce page and paste the code below the <apex:iframe> tag.

<script src="/support/api/40.0/lightning/opencti_min.js"></script>
<script>
   function postMessage(data) {
       document.getElementsByTagName('iframe')[0].contentWindow.postMessage(data, '*');
   }  
   sforce.opencti.enableClickToDial();
   sforce.opencti.onClickToDial({
       listener: function(result) {
           postMessage({
               type: 'rc-adapter-new-call',
               phoneNumber: result.number,
               toCall: true,
           });
           sforce.opencti.setSoftphonePanelVisibility({ visible: true });
       }
   });
</script>

Inbound Screen-Pop

Apex class

Create the RCPhoneHelper Apex class if you don’t already have one and add a searchContact method as shown below:

global class RCPhoneHelper {

    // Inbound Screen Pop
    webService static Contact searchContact(String phone) {
        List < List < SObject >> l = [FIND: phone IN PHONE FIELDS RETURNING Contact(Id limit 1)];
        if (l.size() > 0 && l[0].size() > 0) {
            return (Contact) l[0][0];
        }
        return null;
    }
}

Visualforce page

In your Visualforce page, create a receiveMessage function to respond to the rc-call-ring-notify event and register it using window.addEventListener as shown below. If you are listening to multiple RingCentral event types such as rc-call-end-notify as shown for the Call Log use case shown below, you can use an else if clause in the receiveMessage function.

function receiveMessage(event) {
    if (event.data.type === 'rc-call-ring-notify') {
        sforce.opencti.setSoftphonePanelVisibility({
            visible: true
        });
        var fromNumberE164 = event.data.call.from;
        var fromNumber = phoneUtils.formatNational(fromNumberE164, "us");
        if (fromNumber[0] === '+') {
            fromNumber = fromNumber.substring(1);
        }

        sforce.opencti.runApex({
            apexClass: 'RCPhoneHelper',
            methodName: 'searchContact',
            methodParams: 'phone=' + fromNumber,
            callback: function(response) {
                if (response.success == true) {
                    var contactId = response.returnValue.runApex.Id;
                    if (contactId !== null) {
                        sforce.opencti.screenPop({
                            type: sforce.opencti.SCREENPOP_TYPE.SOBJECT,
                            params: {
                                recordId: contactId
                            }
                        });
                    }
                }
            }
        });
    }
}
window.addEventListener("message", receiveMessage, false);

Automatic Call Logging

Apex Class

To enable automatical call logging, first create an Apex helper method. This method should be added to your RCPhoneHelper class added above.

// Call Logging
webService static void logACall(string contactId, Integer duration, String fromNumber, String toNumber) {
    Task t = new Task(
        ActivityDate = date.today(),
        CallDurationInSeconds = duration,
        CallType = 'Inbound',
        Description = 'From: ' + fromNumber + '\nTo: ' + toNumber + '\nDuration: ' + duration + ' seconds',
        Status = 'Completed',
        Subject = 'Call log',
        TaskSubtype = 'Call',
        Type = 'Call',
        WhoId = contactId
    );
    insert t;
}

Visualforce Page

Now add the Visualforce page JavaScript that will listen for the rc-call-end-notify event, look up the contact and, if found, create a Call Log Task.

The code below can be added to the receiveMessage() function added above in the Inbound Screen-Pop section.

else if (event.data.type === 'rc-call-end-notify') {
    if (event.data.call.startTime !== null) {
        var fromNumber = event.data.call.from;
        if (fromNumber[0] === '+') {
            fromNumber = fromNumber.substring(1);
        }
        sforce.opencti.runApex({
            apexClass: 'RCPhoneHelper',
            methodName: 'searchContact',
            methodParams: 'phone=' + fromNumber,
            callback: function(response) {
                if (response.success == true) {
                    var contactId = response.returnValue.runApex.Id;
                    if (contactId !== null) {
                        sforce.opencti.runApex({
                            apexClass: 'RCPhoneHelper',
                            methodName: 'logACall',
                            methodParams: 'contactId=' + contactId +
                                '&duration=' + Math.round((event.data.call.endTime - event.data.call.startTime) / 1000) +
                                '&fromNumber=' + event.data.call.from +
                                '&toNumber=' + event.data.call.to,
                            callback: function(rr) {
                                console.log(rr);
                            }
                        });
                    }
                }
            }
        });
    }
}

Summary

The above completes this tutorial on basic Salesforce Lightning configuration using the RingCentral Web Widget.

The next tutorial covers popular use cases where a user may want to extend the functionality of the Web Widget, such as opening additional Screen-Pops to look up the user’s info in sites like Google Search and LinkedIn.

Next: Using the RingCentral Web Widget with Salesforce Lightning Google Search and LinkedIn

References