Kaizen 159 - Configuring Telephony Extension Widget in Zoho CRM

Hello Developers!

Welcome back to the Widgets fold in our Kaizen series.

In this post, we will learn how to build a custom telephony extension widget for call centers and deploy it within a Zoho CRM organization. This helps in establishing unified communication support without leaving the platform.

Why configure a Telephony?

Telephony integration with Zoho CRM is vital for businesses that rely heavily on customer communication and sales. Following are a few key reasons for its vitality:

Centralized Communication: Make and receive calls directly within the CRM, streamlining the communication process.
Automatic Call Logging: Calls are automatically logged, helping businesses track communication history without manual effort.
Enhanced Collaboration: Sales, marketing, and customer service teams can access shared communication logs for improved teamwork.
Automated Follow-Ups: After each call, you can trigger follow-up tasks or emails, ensuring no lead is forgotten.

While the Zoho Marketplace within Zoho CRM offers a variety of telephony extensions, we will look at how to create a private extension that allows you to customize the integration to suit your specific needs.

Note:

For this demonstration, we will use RingCentral as our telephony platform. Although RingCentral is available in the marketplace, we will assume it is a private connected app in this scenario.

Business Scenario

Imagine that you are running a sales agency and you want a widget that lets your sales reps make calls directly from Zoho CRM while tracking all call details seamlessly within CRM records.

The private extension should allow you to control the user interface, customize call-related actions, and manage data flow directly into the CRM, optimizing your sales process.

Creating a Private Telephony Extension

Start by logging into your Zoho CRM account and follow the below steps to build a private extension powered by Zoho Sigma.

Set Up a Private Extension

1. Navigate to Setup > Marketplace > Extension Builder.

2. Create a workspace in the new tab and click on the New Extension button.Provide the necessary details as shown in the image and choose the service as Zoho CRM.

3. Provide the necessary details as shown in the image and choose the service as Zoho CRM.

4. Click Create.

5. The private extension that you have created will be listed in the Extensions page. Choose your extension and click the edit icon.

You will be redirected to the Zoho Developer Console.

Configure the Telephony Widget

6. In the console, go to Utilities > Connected Apps on the left-side menu.

7. Follow the steps provided in this kaizen to create a new Zoho CRM widget for this use case.

8. Fill in the details of the application as shown in this image.

We have chosen External Hosting for the demo, as our sample widget code is hosted on Amazon Web Service (AWS).

Refer to the 'Code Logic for Integration' section below to see how the widget code should be handled.

9. Click Save.

Code Logic for Integration

10. Here is the core logic for handling telephony events like Dial and DialerActive using the Zoho CRM JS SDK:

DialerActive Event Listener:

This listener is triggered when the softphone icon at the bottom of your screen is toggled.
It makes a call to the dialed number using Ring Central SDK.

Dial Event Listener:

The listener is activated when a user initiates a call from a Zoho CRM record using the phone icon next to the Phone fields.
The phone button passes the specific record data to the widget, allowing Ring Central to display the record name and dial the number. Following it, the Ring Central SDKs play the role to execute call related functions.

Call Completion and Notes Update:

Once a call ends, the widget opens a note section.
The text added to the widget is fed to the Notes Related List of the corresponding record using the Add Notes SDK.

For detailed instructions and to get started, the demo code is available on our GitHub page. Ensure to replace your telephony app credentials, SDKs, and its versions in the rc.js and handler.js files to suit your production needs.

Configure the Call Center

11. Navigate to Build > Telephony in the left menu.

12. Provide a Name and the Resource Path of your widget.

13. Click Save.

Packaging and Publishing

14. Go to Package > Publish on the left-side menu and publish the extension.

15. You will receive a prompt asking if you would like to submit your extension to the Marketplace and avail it like other telephony platforms.

Once submitted, the review process will take from three weeks to one month for approval.

Instead of waiting for approval, we will proceed with deploying the extension using the private plugin deployment link.

Deploy in your Organization

16. Log into your Zoho CRM organization.

17. Replace the URL of your Zoho CRM page with the deployment link from the Developer Console to install the widget extension.

18. Approve the addition of this extension to your CRM.

19. Once installed, refresh the page and check for the softphone icon at the bottom of your screen.

Click the icon to log in to your telephony platform, such as RingCentral.

Try it Out!

Once the softphone is installed, try out the following features:

The softphone icon opens an iframe dialer pad.
You will see a phone icon near the Phone data fields, enabling quick calls directly from the record.
After calls, you can take notes and log them as a related list for the CRM record.

Additional Components

Consider adding these components to enhance the functionality of your telephony extension widget:

Call Recordings Widget: Create a related list widget that automatically stores all call recordings for future reference. Refer to this page for help.
Call Analytics: Using Ring Central SDKs support users can integrate call duration, frequency, and outcomes into a CRM dashboard Widget for performance tracking.
Custom Workflow Triggers: With the help of Insert Records SDK in the extension widget, you can automatically log the call details into the Calls module. This enables you to trigger workflow rules for follow-up tasks, notifications, or actions based on call outcomes.

From managing call center operations to automating task follow-ups, the potential of widgets is vast and adaptable to a variety of business needs. We encourage you to explore the complete potential of widgets to build custom solutions that elevate your workflows.

For further assistance, explore our Widget fold in the Kaizen collection or reach out to us at support@zohocrm.com. You can also drop your questions in the comments below.

Cheers!

-----------------------------------------------------------------------------------------------------------------------------------

Related Reading

Zoho CRM Widget - An Overview, Installation and Creation, Mobile Compatibility, other Kaizens.
Widget SDKs - An Overview, Insert Records API and SDK, Add Notes API and SDK.
Zoho Marketplace - An Overview
Zoho Developer Console - An Overview, Creating Extensions, Building Connected Apps, and a Quick Start Guide.
RingCentral - Getting Started, Ring Central SDKs.

-----------------------------------------------------------------------------------------------------------------------------------

Previous Post: Kaizen #158 - How to effectively handle API calls to optimize API credits? | Kaizen Collection: Home

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Topic Participants
Kiruthiga G

Sticky Posts
Kaizen #165 : How to call Zoho CRM APIs using Client Script
Welcome back to another exciting Client Script post! In this post, we will discuss one of the most frequently asked questions: How do you call Zoho CRM APIs from Client Scripts? In this kaizen post, 1. Ways to make calls to Zoho CRM APIs using Client
Kaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provide
Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands
Extension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use API
Kaizen #152 - Client Script Support for the new Canvas Record Forms
Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved