Building a Ring Central Telephony Widget

A RingCentral widget embedded inside Zoho CRM allows users to perform various activities. A CRM user can:

  • Load the telephony dial pad as an iframe in the Zoho CRM interface by using the telephone icon at the bottom right corner of the screen.
  • Make a call from Zoho CRM, by using the telephone icon near the Phone or Mobile field that points to a particular record.
  • Record the call and view the recording in a Google Drive related list.

How can I ...

Import the Zoho JS SDK

To import the Zoho JS SDK, please visit the link https://github.com/ZohoDevelopers/RingCentralWidget, download and extract it to your path.

Initialising the framework and Registering for Call Center Events

To use the embedded app framework, you will have to register for appropriate events (Dial, Dialer Active) where contextual data has to be passed from Zoho CRM. Registering for the appropriate event means defining the function that will be performed when a certain event is triggered by your embedded application. The events are:

  1. Dialer Active - Triggered every time when the softphone window is toggled
  2. Dial - Triggered every time when Call icon inside the zohoCRM is clicked.

These events can be triggered by including the following code snippet into your source code.

ZOHO.embeddedApp.on("DialerActive",function(){

})
ZOHO.embeddedApp.on("Dial",function(data){

        })

The code to initialize SDK is,

ZOHO.embeddedApp.init()

The code to invoke an API is

ZOHO.CRM.INTERACTION.getPageInfo().then(function(data){

});

Authentication Support

To build a RingCentral widget with Zoho CRM, organization specific authentication is required. Two types of authentication mechanisms are used here.

  1. Custom variables authentication - To upload the recorded call information either in Google Drive or as a CRM attachment, two custom variables are created.
  2. Authentication using OAuth2.0 - To Create a Google Drive Connector with the required APIs.

Set up a Connected App

  1. Create an extension using the Zoho Developer Console and  name the extension as "RingCentral".
  2. Click Connected Apps located in the left pane of the Extension Details page.
  3. Enter the following information in the Connected Apps page:,
    • Connected App Name : RingCentralWithRL
    • Description : A short description about the connected app.
    • Choose Hosting : select the Server side application.
    • Specify Base URL : https://s3-us-west-2.amazonaws.com/production-widget/RingCentralWithRL/v1/html/
  4. Click Save. A Connected App is created.

Embed a Telephony widget

  1. Click Telephony in the left pane of the Extension details page.
  2. Call Center Name : Ring Central
  3. Start URL : https://s3-us-west-2.amazonaws.com/production-widget/RingCentralWithRL/v1/html/Main.html
  4. Click Save. The Telephony Widget is created.

Integrate Google Drive

  1. Navigate to the Extension Details located in the left pane and create the organization specific custom variables.

  2. Click CRM Connectors to set up a connector in the Zoho Developer Console.
  3. Create a Google Drive Connector and associate it to your extension with the required APIs.

Create Customized Components

  1. Create a custom field named "GdriveFolderID" in the Leads module to store an auto-generated folder ID whenever a lead record is created

  2. Create a Related List Widget "Recordings" in the Leads Module to store the recorded call information.

Test an Application

  1. Click Test Your Extension located in the top right corner of the Zoho Developer Console.
  2. Create a new lead record in the Sand Box with all the mandatory details and contact phone numbers in the appropriate fields.
  3. Click Save. You can view the GdriveFolderID value that is in the process of getting auto generated.

  4. Initiate a call by clicking the Telephone Icon.
  5. Log in to your Ring central account by providing an authorized phone number and password.
  6. A phone dialer opens and a call is initiated.

  7. Add short notes after the call to know the status of the call.

  8. If the call recorder is enabled during the call, then a recordling list is created as a Related list.