Accept incoming call in Amazon

All call related operations such as call accept, reject, disconnect, mute and so on are performed on the Connect Streams API. You can use contact.accept() function to accept a call.

The following flow diagram shows the sequence of operations performed once an agent accepts the call from the Fusion application or from the media toolbar application:

1. An agent can accept the call either from the Fusion application or from the media toolbar application. When the agent clicks the Answer button in the Fusion application, the onToolbarInteractionCommand event is fired with command of accept. When the agent accepts the call from media toolbar application, supplier API accept can be called directly.
2. The media toolbar application receives this event and if the event is to accept a call, the Amazon Connect Streams API to accept the call is called.
3. When the CTI supplier notifies the media toolbar application that the call is accepted, the partner application can fire the startCommEvent action.
4. Once the Fusion application identifies this action, the matched contact and an engagement panel is opened based on the rules configured in the Fusion configuration management for the screen pop. See Configure Screen Pop Pages for more information.

During the incoming event, you can use contact.accept() function to accept a call as shown in the following example:

public async acceptCall(): Promise<void> {
    this.contact.accept();
}

Also update subscribeContactEvents as in the following example:

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);
            this.integrationEventsHandler.outboundCallAcceptedHandler(this.eventId);
        });
        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> {
        this.contact.accept();
    }
    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);
                this.integrationEventsHandler.outboundCallAcceptedHandler(this.eventId);
            });
            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 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. Accept the call and the screen pop appears with a new contact.