AWS Contact Center

Enable agent contact history in Amazon Connect agent workspace as a third-party (3P) application

Contact center agents juggle dozens of customer interactions daily. Without easy access to their recent call history, valuable context gets lost between conversations. Amazon Connect provides agents with powerful tools to manage real-time voice and digital interactions. One valuable enhancement is the ability for agents to view a personalized summary of their recently handled voice contacts—such as calls—in a single, consolidated view.

By giving agents visibility into their recent call history, organizations can enhance service continuity. This context empowers agents to follow up seamlessly, maintain conversation continuity, and take proactive action—all from within the Amazon Connect agent workspace.

This blog demonstrates how to implement a serverless agent voice contact history solution using AWS services. You’ll learn to create and integrate a custom widget within the Amazon Connect agent workspace that gives agents easy access to their recent call history.

By the end, you’ll have step-by-step guidance on how to build and embed an agent voice contact history widget in Amazon Connect. It empowers agents with recent call details at their fingertips, improving both customer and employee experience.

Business value

Enhancing the agent experience with accessible contact history supports several high-impact outcomes:

  • Faster resolutions: Agents reduce time spent switching between applications to retrieve past call details.
  • Improved customer experience: Agents can continue conversations with recent context for smoother interactions.
  • Greater agent confidence: Visibility into recent handled contacts supports better follow-ups and callbacks.
  • Scalable, serverless architecture: By using AWS services, organizations can reduce operational overhead.

Prerequisites

Before you get started, make sure you have:

Walkthrough

Here’s how the solution works:

  1. Amazon Connect streams data: CTRs and Agent Events are streamed via Amazon Kinesis.
  2. AWS Lambda processes events: A Lambda function listens to the stream, filters relevant agent events, and formats the data.
  3. DynamoDB stores history: Processed data is stored in a DynamoDB table using Agent ID as the key.
  4. API Gateway provides access: A secure API is created to serve contact history data to the front end.
  5. React app shows data: A React JS widget is embedded into the Agent Workspace to display the agent’s own contact history.

 

Figure 1. Architecture Diagram

Steps to be detailed

Step 1: Create a contact history DynamoDB Table

  • Create a DynamoDB table to store contact history events in following format with Connect user id as the primary key and time of occurrence as sort key
{
 "pk": "<Connect_User_Id>",
 "sk": <TIME_STAMP>,
 "AgentInteractionDuration": <TIME_DURATION>
 "ContactId": "<CONTACT_ID>",
 "CustomerEndpointAddress": "<INCOMING/DIALED CUSTOMER PHONE NUMBER>",
 "DisconnectReason": "<AGENT/CUSTOMER DISCONNECT>"
 "ExpirationTime": 1745273239,
 "InitiationMethod": "<INBOUND OR OUTBOUND>",
 "QueueName": "<NAME OF INBOUND OR OUTBOUND QUEUE>"
}

Step 2: Create a Lambda function to process CTR stream events in contact history table

  • Create a Lambda function which gets triggered by the Kinesis stream. The function will:
    • Decode and parse incoming Kinesis records
    • Filter events related to contact handling (e.g., CONNECTED, DISCONNECTED)
    • Extract relevant fields like agent ID, contact ID, ANI, timestamps, channel, and call type
    • Store the processed data into a DynamoDB table
    • Test with valid CTR events (INBOUND, OUTBOUND).
    • Simulate malformed records and verify they are caught and logged.
const ctrProcessor = new CtrProcessor(region);
const ctrEvent = JSON.parse(JSON.stringify(event[0], null, 2));
await ctrProcessor.ProcessCTREvent(ctrEvent);

Step 3: Create a lambda function to query contact history table

  • Create a Lambda function to query the contact history table by passing the Amazon Connect user id. This lambda will be consumed by API gateway endpoint to fetch and display contact history details from the DynamoDB table. This lambda function will:
    • Query for Amazon Connect user id
    • Returns all contact events for the day
    • Mock DynamoDB responses and verify correct handling for:
      • Agent with contact history
      • Agent with no data
      • Invalid agent ID input

Step 4: Create API Gateway and Lambda integration

  • Create a REST or HTTP API using Amazon API Gateway
  • Link it to a Lambda function that queries DynamoDB for a given agent ID and returns contact history
  • Inject sample CTR events into the Kinesis stream and confirm:
    • Lambda processes and stores them in DynamoDB correctly.
    • Query Lambda retrieves the data as expected.

Step 5: Build a 3P app for the agent workspace

  • Use React to create a simple UI that:
      • Add authentication to authenticate with the same IDP as the agent workspace for SSO(Note: This blog doesn’t provide the details on how to do authentication).
      • Use AgentClient to get the ARN using Amazon Agent Workspace SDK.
      • Parse the Agent ID from the ARN.
      • Call a REST API via API Gateway using that Agent ID.
      • Displays results in a tabular or card format showing recent contacts, type, ANI, timestamp, etc.
      • Load the React widget in a local environment or Amazon Connect workspace.
      • Validate:
        • Correct API calls with parsed Agent ID.
        • Table populates with real data.
        • Error and loading states display properly.
        • Behavior with empty results or API failure.
      • Given below is the sample Contact History component for a react-ts app.
import React, { useEffect, useState } from 'react';
import { AgentClient } from '@amazon-connect/contact';

const API_ENDPOINT = 'https://your-api-id.execute-api.your-region.amazonaws.com/prod/contact-history';
interface ContactRecord {
  ContactId: string;
  CustomerEndpointAddress: string;
  AgentInteractionDuration: string;
  DisconnectReason: string;
  InitiationMethod: string;
  QueueName: string;
  Timestamp: string;
}

const ContactHistory: React.FC = () => {
  const [records, setRecords] = useState<ContactRecord[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const agentClient = new AgentClient();

    const fetchContactHistory = async () => {
      try {
        const arn = await agentClient.getARN();
        const agentId = arn.split('/').pop();
        if (!agentId) {
          throw new Error('Agent ID not found');
        }

        const response = await fetch(`${API_ENDPOINT}?agentId=${agentId}`);
        if (!response.ok) {
          throw new Error(`API error: ${response.status}`);
        }

        const data = await response.json();
        setRecords(data.contacts || []);
      } catch (err: any) {
        console.error('Error fetching contact history:', err);
        setError('Failed to load contact history. Please try again later.');
      } finally {
        setLoading(false);
      }
    };

    fetchContactHistory();
  }, []);

  return (
    <div style={{ padding: '1rem', fontFamily: 'Arial' }}>
      <h3>Agent Contact History</h3>

      {error && <p style={{ color: 'red' }}>{error}</p>}
      {loading && <p>Loading...</p>}

      {!loading && records.length === 0 && !error && (
        <p>No recent contact history found.</p>
      )}

      {!error && records.length > 0 && (
        <table border={1} cellPadding={8}>
          <thead>
            <tr>
              <th>Time</th>
              <th>Contact ID</th>
              <th>Customer Number</th>
              <th>Queue</th>
              <th>Duration</th>
              <th>Initiation</th>
              <th>Disconnect Reason</th>
            </tr>
          </thead>
          <tbody>
            {records.map((r) => (
              <tr key={r.ContactId}>
                <td>{r.Timestamp}</td>
                <td>{r.ContactId}</td>
                <td>{r.CustomerEndpointAddress}</td>
                <td>{r.QueueName}</td>
                <td>{r.AgentInteractionDuration}</td>
                <td>{r.InitiationMethod}</td>
                <td>{r.DisconnectReason}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
};

export default ContactHistory;

Step 6: Embed the widget in the Amazon Connect agent workspace

  • Register your React widget as a 3P App using 3rd party application feature in Amazon Connect Agent Workspace.
  • Configure permissions and embed URL for API access

Cleaning up

Once you’ve tested and validated the Agent Contact History integration, it’s important to clean up unused AWS resources to prevent ongoing charges. Below are the components you may want to delete:

  • DynamoDB contact history table
    • Navigate to the DynamoDB console
    • Locate the table created to store contact history events
    • Select it and choose Delete table
  • CTR processing Lambda function
    • Go to the Lambda console.
    • Find and delete the Lambda function that processed CTR events from Kinesis.
  • Contact history query Lambda function
    • Locate and remove the Lambda function that served contact history via API Gateway.
  • API Gateway
    • In the API Gateway console, identify the API created to expose contact history.
    • Delete the API to prevent any further external calls and usage charges.
  • Kinesis Stream for Contact Trace Records
    • If a dedicated Kinesis stream was created for CTRs, and it’s not used elsewhere:
      • Go to the Kinesis console.
      •  Select the stream and delete it.
  • EventBridge rules
    • If EventBridge rules were configured to trigger Lambda:
      • Open the EventBridge console.
      • Delete any custom rules associated with the solution.
  • React JS 3P widget in the agent workspace
    • Navigate to the Amazon Connect console.
    • Under Agent Application Settings, remove the 3P app (React widget) from the workspace configuration.
  • IAM roles & permissions
    • Review any IAM roles created for the Lambda functions, API Gateway, or DynamoDB.
    • Detach unnecessary policies or delete unused roles to maintain a clean IAM setup.

Conclusion:

By integrating Agent Contact History directly into Amazon Connect Agent Workspace, organizations can unlock new levels of service continuity and operational insight. This enhancement complements existing features by adding a personalized, real-time view of handled contacts—without requiring context-switching or external tools.

Built entirely on AWS-native services, this solution is cost-effective, scalable, and easy to maintain. It supports agents in delivering thoughtful, consistent service while opening the door for deeper analytics, performance monitoring, and future AI-driven innovations.

Empowering agents with the information they need—at the moment they need it—is a proven way to elevate both employee experience and customer satisfaction. This solution helps you do exactly that, all within your existing contact center ecosystem.

About the Authors

Agnel Joseph is a Senior AWS Professional Services consultant specializing in Amazon Connect and cloud-native contact center modernization. With deep expertise in customer experience solutions, he helps enterprises design and deploy scalable, resilient, and intelligent agent experience platforms that transform their customer service operations. A passionate technologist and lifelong learner, Agnel consistently stays at the forefront of emerging technologies and industry best practices to deliver innovative solutions for complex business challenges. He has successfully led numerous large-scale contact center migrations and modernization initiatives across various industries.

Thiru Subramanian is an AWS Professional Services consultant specializing in Amazon Connect, bringing 20+ years of expertise in the contact center space. He excels at transforming traditional enterprise call centers into Amazon Connect solutions, with a focus on creating customer-centric implementations and seamless integrations. Outside of professional pursuits, Thiru enjoys traveling and reading books.

Rama Krishna Yalla is an Associate Delivery Consultant at AWS, adept at designing scalable, reliable, and secure cloud environments. He leverages automation and CI/CD best practices to streamline software delivery, reduce downtime, and enhance operational efficiency. He specializes in Amazon Connect, where he helps customers implement and optimize cloud-based contact center solutions tailored to business needs. Outside of work, Rama enjoys playing badminton and often participates in local tournaments.

Mohit Bansal is a Senior Engagement Manager at Amazon Web Services Professional Services with over two decades of IT industry experience. He specializes in partnering with enterprise customers and AWS teams to plan and deliver cloud transformation solutions that drive business value. Mohit holds an MS in Computer Science and enjoys music and tennis in his free time.