본문 바로가기

C#

Genesys API를 사용하여 채팅 기록 가져오기: HTML 및 JavaScript 샘플 가이드

반응형

Genesys API를 사용하여 채팅 기록을 가져오는 방법을 소개하려고 합니다.
Genesys Cloud는 고객과의 모든 상호작용을 기록하고 관리할 수 있는 강력한 기능을 제공합니다. 특히, 고객 서비스와 관련된 채팅 기록을 분석하거나 저장하는 것은 고객 지원의 품질을 향상시키는 데 매우 유용합니다.
이번에는 Genesys Cloud의 JavaScript SDK를 활용하여 채팅 기록을 가져오는 간단한 HTML 및 JavaScript 예제를 만들어 보겠습니다.

Genesys Cloud와 채팅 기록 API

Genesys Cloud는 다양한 커뮤니케이션 채널을 통해 고객과의 상호작용을 기록합니다. 이러한 상호작용은 이메일, 전화, 채팅 등을 포함하며, 각 상호작용은 고유한 대화 기록으로 관리됩니다. Genesys Cloud의 채팅 기록 API를 사용하면 특정 상호작용에 대한 세부 정보를 가져올 수 있으며, 이를 통해 고객의 문제를 더 잘 이해하고 대응할 수 있습니다.

프로젝트 설정

이번 예제에서는 Genesys API를 사용하여 특정 상호작용(Interaction)의 채팅 기록을 가져오는 HTML 및 JavaScript 프로젝트를 설정해 보겠습니다.

1. 개발 환경 준비

이 예제에서는 HTML 및 JavaScript를 사용하여 간단한 웹 애플리케이션을 만들 것입니다. 먼저, HTML 구조를 설정하고 Genesys Cloud JavaScript SDK를 불러옵니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Genesys API 채팅 기록 가져오기</title>
    <script src="https://sdk-cdn.mypurecloud.com/javascript/genesys-cloud-client.js"></script>
</head>
<body>
    <h1>Genesys 채팅 기록 가져오기</h1>
    <input type="text" id="interactionId" placeholder="상호작용 ID를 입력하세요" />
    <button onclick="getChatTranscript()">채팅 기록 가져오기</button>
    <div id="chat-transcript"></div>
</body>
</html>

위의 HTML 코드는 기본적인 페이지 구조를 설정합니다. 여기에서는 사용자가 상호작용 ID를 입력할 수 있는 텍스트 입력 필드와 채팅 기록을 가져오는 버튼을 추가했습니다.

2. Genesys Cloud 클라이언트 설정

Genesys Cloud API를 사용하려면 먼저 Genesys Cloud 애플리케이션을 등록하고, 클라이언트 ID와 리다이렉션 URI를 설정해야 합니다. 이 과정은 이전 블로그에서 설명한 사용자 정보 가져오기 예제와 동일합니다.

Genesys Cloud 클라이언트를 초기화하는 JavaScript 코드는 다음과 같습니다.

<script>
    // Genesys Cloud 초기화 설정
    const clientId = 'YOUR_CLIENT_ID';
    const redirectUri = 'YOUR_REDIRECT_URI'; // 예: 'http://localhost/callback'

    // Genesys Cloud 클라이언트 생성
    const platformClient = require('platformClient');
    const client = platformClient.ApiClient.instance;

    client.setEnvironment('mypurecloud.com'); // 지역에 맞게 환경 설정
    client.setPersistSettings(true, 'my_app');

    // 사용자 인증
    client.loginImplicitGrant(clientId, redirectUri)
        .then(() => console.log('로그인 성공'))
        .catch(err => console.error('로그인 실패:', err));
</script>

위 코드는 Genesys Cloud API 클라이언트를 초기화하고, OAuth 2.0 인증을 통해 사용자를 인증합니다.

3. 채팅 기록 가져오기

이제 특정 상호작용 ID에 대한 채팅 기록을 가져오는 기능을 추가해 보겠습니다. Genesys Cloud의 ConversationsApi를 사용하여 상호작용의 채팅 기록을 조회할 수 있습니다. 다음은 이 기능을 구현하는 JavaScript 코드입니다.

<script>
    function getChatTranscript() {
        const interactionId = document.getElementById('interactionId').value;
        if (!interactionId) {
            alert('상호작용 ID를 입력하세요');
            return;
        }

        const conversationsApi = new platformClient.ConversationsApi();
        conversationsApi.getConversationMessages(interactionId)
            .then(transcript => {
                console.log('채팅 기록:', transcript);
                document.getElementById('chat-transcript').innerText = JSON.stringify(transcript, null, 2);
            })
            .catch(err => console.error('채팅 기록 가져오기 실패:', err));
    }
</script>

위 코드는 getChatTranscript 함수를 정의하여 사용자가 입력한 상호작용 ID를 기반으로 채팅 기록을 가져옵니다. getConversationMessages 메서드는 주어진 상호작용 ID에 대한 채팅 기록을 조회하며, 결과를 콘솔에 출력하고 HTML 페이지의 div 요소에 표시합니다.

4. 결과 확인

모든 설정이 완료되면 HTML 파일을 웹 서버에 호스팅하거나 로컬에서 열어 테스트할 수 있습니다. 페이지를 열고 상호작용 ID를 입력한 후 "채팅 기록 가져오기" 버튼을 클릭하면 Genesys API를 통해 해당 상호작용의 채팅 기록을 가져와 화면에 표시됩니다.

추가 고려사항

이 예제에서는 클라이언트 인증 방식(Implicit Grant)을 사용했지만, 실제 애플리케이션에서는 보안상의 이유로 코드 인증(Authorization Code) 방식을 사용하는 것이 좋습니다. 또한, API 호출 시 에러 처리를 추가하여 네트워크 오류나 잘못된 상호작용 ID 입력 등 다양한 상황을 처리할 수 있도록 해야 합니다.

결론

Genesys API를 사용하여 채팅 기록을 가져오는 HTML 및 JavaScript 예제를 만들어 보았습니다. Genesys Cloud의 강력한 API 기능을 통해 고객과의 상호작용을 효과적으로 관리하고, 고객 지원의 품질을 향상시킬 수 있습니다. 이번 예제를 통해 Genesys Cloud API의 사용 방법을 더욱 깊이 이해하고, 실제 프로젝트에 적용하는 데 도움이 되길 바랍니다.

반응형