Show incoming call notification in Twilio

Twilio notifies incoming calls to your media toolbar application by firing an incoming event from Twilio.Device object. From your media toolbar application listens to this event and does the necessary steps once this event is received.

The following flow diagram shows the sequence of operations performed once a customer dials your service center phone number:

Here's how it works:

1. Twilio receives an incoming call notification and fires an incoming event along with the call information as payload with type as Twilio.Call. Twilio is responsible for this step.
2. The incoming event handler in your toolbar application receives this event along with the Call payload.)
3. The newComm event is fired from your toolbar application.
4. Once the Fusion application identifies this action, it performs a contact number lookup and returns the contact details in the action response.

   To create lookup filters to create your own the default reverse lookup, see Create Lookup Filters.

5. Finally, the Fusion application notifies the agent about the incoming call offer notification through a dialog box.
6. The agent can now either Answer or Decline the call.

All you need to do this is to add the following code once the Twilio.Device object is initialized in the makeAgentAvailable function in vendorHandler.ts file.

Note: Add the following code once the Twilio.Device object is initialized in the makeAgentAvailable function in vendorHandler.ts file.

this.device.on("incoming", this.incomingCallCallback);

From the code shown, incomingCallCallback is the callback function which gets executed during the Twilio.Device incoming event. Define this function in your vendorHandler.ts file as:

public incomingCallCallback = (call: Call) => {
    this.integrationEventsHandler.incomingCallHandler(call.parameters.From, call.parameters.CallSid);
    this.call = call;
}

Call related operations such as acceptCall, rejectCall and hangupCall are performed on the call object received in the incoming event listener.

Sample code for the vendorHandler.ts file

Here's the complete code of the vendorHandler.ts file for showing the incoming call notification:

import { Call, Device } from '@twilio/voice-sdk';
import { ICtiVendorHandler } from './ICtiVendorHandler';
import { IntegrationEventsHandler } from '../integrationEventsHandler';
 
export class VendorHandler implements ICtiVendorHandler {
    private twilio: any;
    private device: Device | null;
    private integrationEventsHandler: IntegrationEventsHandler;
    private call: Call | null;
    public idAndToken: any;
 
    constructor(integrationEventsHandler: IntegrationEventsHandler) {
        this.twilio = (window as any).Twilio;
        this.device = null;
        this.idAndToken = null;
        this.integrationEventsHandler = integrationEventsHandler;
        this.call = null;
    }
 
    public async makeAgentAvailable(): Promise<void> {
        this.idAndToken = await this.getIdAndToken();
        this.device = new this.twilio.Device(this.idAndToken.token, {
            logLevel: 1,
            codecPreferences: ["opus", "pcmu"],
            enableRingingState: true
        });
        let resolve: Function;
        let reject: Function;
        if (this.device) {
            this.device.on("registered", () => {
                console.log("Registration completed ...")
                resolve();
            });
            this.device.on("error", (deviceError) => {
                console.error("Registration Failed ...", deviceError);
                reject();
            });
 
            this.device.on("incoming", this.incomingCallCallback);
 
            this.device.register();
        }
        return new Promise((res: Function, rej: Function) => {
            resolve = res;
            reject = rej;
        });
    }
 
    public incomingCallCallback = (call: Call) => {
        this.integrationEventsHandler.incomingCallHandler(call.parameters.From, call.parameters.CallSid);
        this.call = call;
    }
    public async makeAgentUnavailable(): Promise<void> {
        let resolve: Function;
        let reject: Function;
        if (this.device) {
            this.device.on("unregister", () => {
                console.log("Successfully UnRegistered ...")
                resolve();
            });
            this.device.on("error", (deviceError) => {
                console.error("Failed to unregister ...", deviceError);
                reject();
            });
            this.device.unregister();
        }
        return new Promise((res: Function, rej: Function) => {
            resolve = res;
            reject = rej;
        });
    }
    public async makeOutboundCall(phoneNumber: string, eventId: string): Promise<void> {
        throw new Error('Method not implemented.');
    }
    public async acceptCall(): Promise<void> {
        throw new Error('Method not implemented.');
    }
    public async rejectCall(): Promise<void> {
        throw new Error('Method not implemented.');
    }
    public async hangupCall(): Promise<void> {
        throw new Error('Method not implemented.');
    }
 
    private async getIdAndToken(): Promise<any> {
        const headers: Headers = (new Headers()) as Headers;
        headers.set('Accept', 'application/json');
        const request: Request = new Request('https://twilio-voice-stream.com/token', {
            method: 'GET',
            headers: headers
        }) as Request;
        const idAndToken: Response = await fetch(request);
        this.idAndToken = await idAndToken.json();
        return this.idAndToken;
    }
}

Verify your progress

After finishing these steps, use OJET server to start you application and sign in to your Fusion application. Open the media toolbar and make your agent available for calls by clicking on the Agent Availability button. Then, start a call to your customer care number. During this time, your media toolbar state will be changed to RINGING state and you can see the incoming call notification in your media toolbar application.