Show incoming call notification in Amazon

The Contact API provides event subscription methods and action methods which can be called on behalf of a specific contact. From your media toolbar application, you need to listen to connecting event and do 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 from their phone:

1. Amazon Connect receives an incoming call notification and fires a connecting event along with the call information as payload.
2. The connecting event listener on the contact object of Amazon Connect Streams API in your toolbar application receives this event along with the Call payload.
3. The newComm is fired from your toolbar application.
4. Once the Fusion application identifies this action, it performs the contact number lookup and returns the contact details in the action response.

   To configure the default reverse look up to suit your requirements, 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 either Answer or Decline the call.

Update VendorHandler Class to subscribe the Amazon Connect Streams API events

Add the following code in the makeAgentAvailable function in the vendorHandler.ts file and add the eventId property on the VendorHandler class.

private eventId: string = '';
 
private subscribeContactEvents() {
    this.connect.contact((contact: any) => {
       this.contact = contact;
       this.eventId = contact.contactId;
       contact.onConnecting((contact: any) => {
            console.log("Contact onConnecting >", contact);
            const phoneNumber = contact.getActiveInitialConnection().getEndpoint().phoneNumber;
            this.integrationEventsHandler.incomingCallHandler(phoneNumber, this.eventId);
       });
 
       contact.onAccepted((contact: any) => {
            console.log("Contact onAccepted >", contact);
       });
 
       contact.onEnded(async (contact: any) => {
            console.log("Contact onEnded >", contact);
       });
 
       contact.onMissed((contact: any) => {
           console.log("Contact onMissed >", contact);
       });
    });
}

Complete Code

import { ICtiVendorHandler } from './ICtiVendorHandler';
import "amazon-connect-streams";
import { IntegrationEventsHandler } from '../integrationEventsHandler';
 
export class VendorHandler implements ICtiVendorHandler {
    private connect: any;
    private agent: any;
    private contact: any;
    private integrationEventsHandler: IntegrationEventsHandler;
    private eventId: string = '';
 
    constructor(integrationEventsHandler: IntegrationEventsHandler) {
        this.integrationEventsHandler = integrationEventsHandler;
        this.connect = (window as any)["connect"];
    }
    public async makeAgentAvailable(): Promise<void> {
        if (!this.agent) {
            this.init();
            this.subscribeForAmazonEvents();
            this.subscribeContactEvents();
        } else {
            let state = this.agent.getAgentStates()[0];
            this.agent.setState(state);
        }
    }
    public async makeAgentUnavailable(): Promise<void> {
        let state = this.agent.getAgentStates()[1];
        this.agent.setState(state);
    }
    public async makeOutboundCall(phoneNumber: string, eventId: string): Promise<void> {
    }
    public async acceptCall(): Promise<void> {
    }
    public async rejectCall(): Promise<void> {
    }
    public async hangupCall(): Promise<void> {
    }
 
    // Intialize Amazon connect ccp
    private init() {
        const containerDiv = document.getElementById("amazon-connect-cca-container");
        this.connect.core.initCCP(containerDiv, {
            ccpUrl: 'https://cti-amazon-connect-demo.my.connect.aws/ccp-v2', // REQUIRED
            loginPopup: true, // optional, defaults to `true`
            loginPopupAutoClose: true, // optional, defaults to `false`
            loginOptions: {
                // optional, if provided opens login in new window
                autoClose: true, // optional, defaults to `false`
                height: 600, // optional, defaults to 578
                width: 400, // optional, defaults to 433
                top: 0, // optional, defaults to 0
                left: 0, // optional, defaults to 0
            },
            region: "eu-west-2", // REQUIRED for `CHAT`, optional otherwise
            softphone: {
                // optional, defaults below apply if not provided
                allowFramedSoftphone: true, // optional, defaults to false
                disableRingtone: false, // optional, defaults to false
            },
            pageOptions: {
                //optional
                enableAudioDeviceSettings: false, //optional, defaults to 'false'
                enableVideoDeviceSettings: false, //optional, defaults to 'false'
                enablePhoneTypeSettings: true, //optional, defaults to 'true'
            },
            ccpAckTimeout: 5000, //optional, defaults to 3000 (ms)
            ccpSynTimeout: 3000, //optional, defaults to 1000 (ms)
            ccpLoadTimeout: 10000, //optional, defaults to 5000 (ms)
        });
    }
 
    private subscribeForAmazonEvents() {
        this.connect.agent((agent: any) => {
            this.agent = agent;
            let state = this.agent.getAgentStates()[0];
            this.agent.setState(state);
        });
    }
 
    private subscribeContactEvents() {
        this.connect.contact((contact: any) => {
            this.contact = contact;
            this.eventId = contact.contactId;
            contact.onConnecting((contact: any) => {
                console.log("Contact onConnecting >", contact);
                const phoneNumber = contact.getActiveInitialConnection().getEndpoint().phoneNumber;
                this.integrationEventsHandler.incomingCallHandler(phoneNumber, this.eventId);
            });
            contact.onAccepted((contact: any) => {
                console.log("Contact onAccepted >", contact);
            });
  
            contact.onEnded(async (contact: any) => {
                console.log("Contact onEnded >", contact);
            });
  
            contact.onMissed((contact: any) => {
                console.log("Contact onMissed >", contact);
            });
        });
    }
}

Verify your progress

Sign in to your Fusion application and open the media toolbar. Click the Agent Availability button from your media toolbar application. Make an inbound call and you'll see the incoming call notification on both the Fusion application and the toolbar window.