Simple 3rd party app to load inside Agent Work Space to display Contact Details

Question

Not able to get hands on a simple 3rd party HTML app that will load inside the Agent Wrk Space when a contact is active and just dump the Contact Attributes like Phone and Email.

For clarification, most samples are for 3rd party apps that in turn load the CCP inside them.  These use amazon-connect-streams and have to initialize it with the CCP URL and login popups etc.

Here the intent is to simply load a 3rd party app inside the Agent Work Space where the CCP is already running.
If the iframe is being loaded inside the Agent Work Space  can it not inherit the curent contact object ?

However, it seems that the contact object can not be found.

The agents have permissions to load this app and it appears on the 3rd party dropdowns inside the Agent Work Space.  The permissions are allowed to get Userdetails etc.

`            // Example function to retrieve and display contact attributes
            function fetchContactAttributes() {
                const contact = window.connect && window.connect.contact;
                
                if (contact) {
                    contact.getAttributes(function(attributes) {
                        console.log("Contact Attributes:", attributes);
                        document.getElementById('contact-name').innerText = attributes.Name ? attributes.Name.value : 'N/A';
                        document.getElementById('contact-email').innerText = attributes.Email ? attributes.Email.value : 'N/A';
                        document.getElementById('contact-phone').innerText = attributes.Phone ? attributes.Phone.value : 'N/A';
                    });
                } else {
                    console.log("No active contact.");
                }
            }`
```
(I understand Contact Details can be shown using Views as well - this is just the start of a more complex app that will use the Contact Details to fetch additional information )
`

Magda · Answer

The contact object is only available if you use Amazon Connect Streams API. If all you want to do is display contact information in a view as the call is presented to the agent you do not need 3P apps. You can create a simple Step-by-step guide view and display the information you need as soon as the call connects.

If you need a foundational understanding of the step by step guides check out this course: https://explore.skillbuilder.aws/learn/course/internal/view/elearning/20251/amazon-connect-flow-modules-and-step-by-step-guides.

For practical exercises check out this workshop: https://catalog.workshops.aws/amazon-connect-agent-empowerment/en-US. 
The workshop shows you how to create step-by-step guides, but also how to integrate a 3P application in the agent workspace.

And another helpful blogpost. https://aws.amazon.com/blogs/contact-center/getting-started-with-third-party-applications-in-the-agent-workspace/

If you provide more information about your specific use case, we can help you narrow down your best approach for the challenge you are trying to solve.

Magda · Answer

Amazon Connect does not support OpenID authentication, so Streams integration using hidden CCP for event handling is not your best integration option here.

You can use the events available for the 3P application integrations: https://docs.aws.amazon.com/agentworkspace/latest/devguide/integrate-with-agent-data.html. Also, check out this documentation page that describes the events available: https://docs.aws.amazon.com/connect/latest/adminguide/3p-apps-events-requests.html.

I am not sure what framework you use for your application, so I cannot tell if this ^^ integration method works for you, but it may work.
Cover all the information in the Getting started with third-party development in the Amazon Connect Agent Workspace: https://docs.aws.amazon.com/agentworkspace/latest/devguide/getting-started.html to better understand how applications are loaded in the agent workspace, as well as 3P APIs and requests that give you access to the contact data.

If your current application architecture does not allow this level of integration (make sure your app is iFrame-able), you can always revert to a data backplane where you store the current contact data in a backend DB and you restore it as the call is presented to the desktop app using whatever means you have available in your app. The trick here will be to find the unique identifier. Depending on the timing of your data display (ringing or connect) you can use as key for the data the agent id that gets the incoming contact. In the agent whisper flow you can save the contact Id with all the contact info and the id of the agent that will be available in the Agent property of the whisper flow. You app will need to query by agent Id, so that means you will need to have a "translation" of your agent Id unless the OpenID and Connect user use different IDs for the agent.

I hope this helps.

Simple 3rd party app to load inside Agent Work Space to display Contact Details

Add your answer

Relevant content