Building a Client Side App

Building a Client Side Application

This guide will help you get started with building your first connected call center application for Zoho CRM in no time. To make it easy for your understanding, we have used an example application that will integrate Telephony with Zoho CRM.

Telephony widget is a replacement for the existing telephony integration provided inside ZohoCRM where developers are provided a platform to phonebridge their solution. This framework facilitates any organization to customize a telephonic application based on their requirement. These resources(Html+JavaScript) are contextually embedded inside ZohoCRM through IFrames. Access to CRM's data is provided via CRM's V2 API wrapped around a Java Script layer provided as a part of our embeddedApp SDK.

Telephony Overview

By embedding Telephony widget inside Zoho CRM, the CRM users will be able to,

  • Use the Telephone icon at the bottom right corner of their CRM screen to load the Telephony dialpad as an iframe in Zoho CRM interface itself.
  • Use the Telephone icon near the Phone or Mobile field corresponding to a particular record to make a call from the Zoho CRM interface itself.
  • Add notes about the call once the call is completed.

Telephony Widget Creation

Telephony widgets can subscribe to Events that happen inside ZohoCRM (Dial, Dialer Active) as well as request data via JS API Wrapper. API's are executed on active users scope and separate permission handling has also been done for Widgets.

You can create a connected application with telephony widget in two ways,

  1. Import Ring Central widget from here,download and extract it to your path. To create a connected app, refer the procedure given here.
  2. Create your telephony application with the Required HTML, Java Script Sources and build them on the top of Zoho embeddedApp-js-sdk by visiting this github page.

Register the Event Listeners

To make use of the Connected 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 certain event is triggered by your connected 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.

console.log("Dialer Activated");})
console.log("Number Dialed with data");

The complete documentation of all the available API wrappers are given here.

Configure your Telephony widget

To configure a telephony widget in your extension, a connected App has to be created. To create a connected app, visit this page.

Embed the widget in Zoho CRM

Inorder to embed your Telephony app inside Zoho CRM, provide appropriate details of your application. Please note that you can add only one call center application per extension.

After creating the Connected App, embed the call center application by following these steps.

  1. Click Telephony in the left pane of your Extension's details page.
  2. Provide a Name for the widget and the Start URL in the Telephony Widget page.
    The Start URL is the URL of the domain in which your application is being hosted.
    • Call Center Name : Telephony
    • Start URL : https://localhost:4443/html/Main.html (Sandbox URL & Production URL)
  3. Click Save. You will get a Telephony widget as shown below.

Test your Extension

Once you have created the call center widget in your extension, test your extension in a sandbox environment and make sure it works as expected. Ensure the server is started before testing the extension. After testing and debugging your extension, publish your extension to make it live and accessible to all Zoho CRM users. Once this extension is made live you can sell them to your customers by your own means or get it listed in Zoho Marketplace. Any user Zoho CRM user who installs this extension will get a small button  at the bottom right corner. Clicking on this will load the telephony window in an IFrame inside Zoho CRM using which the user can perform the required operations.

When tested, the output screen in Zoho CRM sandbox environment appears as,

Share this post : FacebookTwitter

Still can't find what you're looking for?

Write to us: