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.
The guide will help you with the following:
- Set up a Connected App
- Embed a Telephony widget
- Integrate Google Drive
- Create Customized Components
- Test an Application
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:
- Dialer Active - Triggered every time when the softphone window is toggled
- 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(){
- console.log("dialer Active");
- })
- ZOHO.embeddedApp.on("Dial",function(data){
- console.log("Number Dialed with data");
- console.log(data);})
The code to initialize SDK is,
- ZOHO.embeddedApp.init()
The code to invoke an API is
- ZOHO.CRM.INTERACTION.getPageInfo().then(function(data){
- console.log(data);
- });
Authentication Support
To build a RingCentral widget with Zoho CRM, organization specific authentication is required. Two types of authentication mechanisms are used here.
- Custom variables authentication - To upload the recorded call information either in Google Drive or as a CRM attachment, two custom variables are created.
- Authentication using OAuth2.0 - To Create a Google Drive Connector with the required APIs.
Set up a Connected App
- Create an extension using the Zoho Developer Console and name the extension as "RingCentral".
- Click Connected Apps located in the left pane of the Extension Details page.
- 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/
- Click Save. A Connected App is created.
Embed a Telephony widget
- Click Telephony in the left pane of the Extension details page.
- Call Center Name : Ring Central
- Start URL : https://s3-us-west-2.amazonaws.com/production-widget/RingCentralWithRL/v1/html/Main.html
- Click Save. The Telephony Widget is created.
Integrate Google Drive
- Navigate to the Extension Details located in the left pane and create the organization specific custom variables.
- Click CRM Connectors to set up a connector in the Zoho Developer Console.
- Create a Google Drive Connector and associate it to your extension with the required APIs.
Create Customized Components
- Create a custom field named "GdriveFolderID" in the Leads module to store an auto-generated folder ID whenever a lead record is created.
- Create a Related List Widget "Recordings" in the Leads Module to store the recorded call information.
Test an Application
- Click Test Your Extension located in the top right corner of the Zoho Developer Console.
- Create a new lead record in the Sand Box with all the mandatory details and contact phone numbers in the appropriate fields.
- Click Save. You can view the GdriveFolderID value that is in the process of getting auto generated.
- Initiate a call by clicking the Telephone Icon.
- Log in to your Ring central account by providing an authorized phone number and password.
- A phone dialer opens and a call is initiated.
- 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
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Widget Support
This guide helps you with the following: Embed a Telephony Widget Create a Web Tab Create a Related List Create a Custom Button Create a Settings Widget Create a Business Card Widget Sometimes, you may want to include features in your Zoho CRM ...Widget Support
This guide will help you with the following: Embed a Telephony Widget Create a Web Tab Create a Related List Create a Custom Button Create a Getting Started Widget Create a Business Card Widget Sometimes, you may want to include features in ...Building a Zillow - Related List Widget
A Zillow widget embedded inside Zoho CRM allows users to obtain various pieces of information about properties in the US. With a Zillow widget, a CRM user can: Get complete property details by entering the property address as input information. View ...Building a Google Drive - Related List Widget
Embedding a Google Drive widget inside Zoho CRM as a Related list allows a user to accomplish three tasks, Fetch files from Google Drive and show them as a related list in the record's detail page in CRM. Upload any document from Zoho CRM to a Google ...Building a Client Side Application
This guide will help you with the following: Create a Connected App Internal Hosting External Hosting Create the "Helloworld" Widget Setup the files structure for "HelloWorld" Widget Register the Event Listeners This guide will furnish you with ...
New to Zoho LandingPage?
Zoho LandingPage Resources