Dialer App

Introduction

In this tutorial, we will build a simple Dialer application on Catalyst by integrating with Twilio. The Dialer application allows you to initiate an outbound audio call connection between your sales team and customers.

Twilio is a cloud communication platform that provides a rich set of REST APIs to establish meaningful and quick connections through voice, video, messaging, live-streaming, emails, and more.

Twilio platform provides a variety of functionalities such as personalized customization of text-to-speech dial messages, call recordings, conference calling, call forwarding, and tracking. We will use the Programmable Voice API of Twilio for setting up an outbound call between two phone numbers through a virtual phone number.

The client application will look like this :

The Dialer application contains the following fundamental Catalyst components :

• Advanced I/O Function: The Advanced I/O function is coded in Node.js programming environment. It contains backend logic that integrates with Twilio’s Programmable Voice API to initiate outbound calls and also keep track of the call logs.

• Client: The front end of the application that is hosted on Catalyst through web client hosting.

The Dialer application uses the following Catalyst features :

• Data Store: To store information related to the calls you make, such as the phone numbers, countries from which the calls are initiated, timestamp of the calls and the call statuses.

• ZCQL: To query the Data Store and fetch the call logs after a call is completed, to be rendered in the web client.

We will use the Catalyst web console and the Catalyst Command Line Interface (CLI) to build this application. In this tutorial, we have provided the code for the files to be included in the Advanced I/O function and client components. You will just need to copy the provided code and paste it into the appropriate files as directed.

Application Architecture

The Dialer application accepts user inputs such as the sales team’s contact number and the customer’s phone number.

1. The application accepts user input, such as the sales team’s contact number and the customer’s phone number.

2. The phone numbers entered by the user are validated. Upon successful validation, the numbers will be stored in CallLogs table of Catalyst’s Data Store and a request will be sent to the Twilio’s Voice API.

3. On calling the Twilio API, an outbound call is initiated and routed from your Twilio number to the sales team’s contact number.

4. At this point, the dialer application sends TwilML instructions to the Voice API in order to dictate the actions to be presented to the user once the call is on-going. In our application, we have configured an url that returns voice instructions back to the REST API.

5. Twilio’s Voice Response function has pre-configured verbs that allow you to customize the call actions according to your preference. Here, we will use the dial() and say() verbs to dial the sales number from your account’s Twilio number and present a message to the caller once the respective call is being forwarded.

6. On successful completion of the call, the call details such as call duration, call status, called country and timestamp of the call are updated in the table. The call will be terminated when either of the parties hang up or if Twilio’s signal is busy.

7. The user can also view the call logs in the Dialer application. The logs will be fetched by querying the DataStore.

The Dialer application serves as a quick solution to initiate outbound audio call communications to your customers.