AWS Connect Third Party Applications

Using Persistent Storage

One approach is to use a form of persistent storage to save the state of your application. When the application is refreshed or reloaded, it can retrieve its previous state from this storage. You can use:

Local Storage or Session Storage: Store the application state in the browser's local storage or session storage.

// Saving state to local storage
localStorage.setItem('appState', JSON.stringify(appState));

// Retrieving state from local storage
const savedState = localStorage.getItem('appState');
if (savedState) {
    appState = JSON.parse(savedState);
}

Cookies: Use cookies to save and retrieve the state.

Backend Database: Save the state in a backend database and retrieve it when the application loads.

Custom Logic in Your Application You can implement custom logic to check if the application is being loaded due to a new contact or if it's a refresh. Based on this check, you can decide whether to reload the application state or not.

// Check if the contact is the same as the previous one
if (previousContactId === newContactId) {
    // Restore the state
} else {
    // Load new state
}

Amazon Connect Streams API

The Amazon Connect Streams API allows you to integrate with the CCP and manage interactions programmatically. You can use it to handle contact events and maintain the state of your application.

Here's an example of using the Streams API to detect when a new contact is received and manage the application state accordingly:

// Initialize the CCP
connect.core.initCCP(containerDiv, {
    ccpUrl: ccpUrl,            // 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: "us-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
        ringtoneUrl: "./ringtone.mp3" // optional, defaults to CCP’s default ringtone if a falsy value is set
    }
});

// Listen for contact events
connect.contact(function(contact) {
    // Handle the new contact event
    contact.onConnected(handleConnected);
    contact.onEnded(handleEnded);
});

function handleConnected(contact) {
    const contactId = contact.getContactId();
    // Check if it's a new contact
    if (previousContactId !== contactId) {
        // Load new state
        previousContactId = contactId;
    } else {
        // Restore previous state
    }
}

function handleEnded(contact) {
    // Clear state if needed
    previousContactId = null;
}