웹 사이트에 채팅 사용자 인터페이스 추가 - Amazon Connect

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

웹 사이트에 채팅 사용자 인터페이스 추가

채팅을 통해 고객을 지원하기 위해 Amazon Connect Connect에서 호스팅하는 웹 사이트에 채팅 위젯을 추가할 수 있습니다. Amazon Connect 콘솔에서 채팅 위젯을 구성할 수 있습니다. 글꼴과 색상을 사용자 지정하고 웹 사이트에서만 실행할 수 있도록 위젯을 보호합니다. 결과적으로 웹 사이트에 추가하는 짧은 코드 조각이 생깁니다.

Amazon Connect 위젯을 호스팅하기 때문에 항상 최신 버전이 웹 사이트에 게시되도록 합니다.

작은 정보

채팅 위젯의 사용에는 각 메시지에 필요한 문자 수와 같은 기본 서비스 할당량이 적용됩니다. 채팅 위젯을 프로덕션으로 시작하기 전에 서비스 할당량이 조직의 요구 사항에 맞게 설정되어 있는지 확인하세요. 자세한 정보는 Amazon Connect 서비스 할당량을 참조하세요.

지원되는 브라우저

사전 빌드된 채팅 위젯은 다음 브라우저 버전 이상을 지원합니다.

  • 구글 크롬 85.0

  • 사파리 13.1

  • Microsoft Edge 버전 85

  • 모질라 파이어폭스

채팅 위젯은 데스크톱 장치에 대한 브라우저 알림을 지원합니다. 자세한 정보는 브라우저 알림을 참조하세요.

1단계: 채팅 위젯 사용자 지정

이 단계에서 고객에 맞게 채팅 위젯의 환경을 사용자 지정합니다.

  1. https://로 고객 센터에 로그인하십시오.인스턴스 이름.my.connect.aws/.. 선택채팅 위젯 사용자 정의.

  2. 서체에서 드롭다운 메뉴를 사용하여 채팅 위젯의 텍스트 글꼴을 선택합니다.

  3. 채팅 위젯에서 위젯 헤더, 채팅 메시지 풍선의 색상을 선택하고 16진수 값 (HTML 색상 코드) 웹 사이트 브랜딩에 맞게 채팅 위젯을 조정합니다.

    색상을 선택하면 채팅 미리 보기가 자동으로 업데이트되므로 위젯의 모양을 확인할 수 있습니다.

  4. 채팅 최소화 아이콘에서 고객이 선택할 아이콘의 색상을 선택하거나 탭하여 채팅 위젯을 최소화합니다.

  5. 채팅 아이콘에서 고객이 선택할 아이콘의 색상을 선택하거나 탭하여 고객 센터와 채팅을 시작합니다.

  6. 흐름 선택에서 고객이 채팅을 시작할 때 시작되는 인바운드 흐름을 선택합니다.

  7. 다음(Next)을 선택합니다.

2단계: 채팅 위젯을 표시할 웹 사이트 도메인을 지정합니다.

  1. 채팅 위젯을 배치하고자 하는 웹 사이트 도메인을 입력합니다. 이 단계에서 선택하는 웹사이트에서만 채팅이 로드됩니다.

    선택도메인 추가를 사용하여 최대 5개의 도메인을 추가할 수 있습니다.

    중요
    • 웹 사이트 URL이 유효하고 오류가 없는지 다시 확인하십시오. https://로 시작하는 전체 URL을 포함합니다.

    • 프로덕션 웹 사이트 및 애플리케이션에는 https: //를 사용하는 것이 좋습니다.

  2. Under채팅 위젯에 보안 추가, 선택하는 것이 좋습니다웹 사이트 관리자와 협력하여 새 채팅 요청에 대해 JSON 웹 토큰 (JWT) 을 발행하도록 웹 서버를 설정합니다. 이렇게 하면 Amazon Connect Connect로 전송된 채팅 요청이 인증된 사용자의 것인지 확인하는 기능을 포함하여 새 채팅을 시작할 때 더 많은 제어가 가능합니다.

    고르는결과는 다음과 같습니다.

    • Amazon Connect 다음 페이지에서 JWT를 생성하는 데 사용할 수 있는 44자 보안 키를 제공합니다.

    • Amazon Connect 채팅 위젯 임베드 스크립트 내에 채팅이 시작될 때 JWT를 확인하는 콜백 함수를 추가합니다.

      다음 예와 같이 포함된 조각에 콜백 함수를 구현해야 합니다.

      amazon_connect('authenticate', function(callback) { window.fetch('/token').then(res => { res.json().then(data => { callback(data.data); }); }); });

    이 옵션을 선택하면 다음 단계에서 웹 사이트에서 시작된 모든 채팅 요청에 대한 보안 키를 받게 됩니다. 웹 사이트 관리자에게 이 보안 키를 사용하여 JWT를 발급하도록 웹 서버를 설정하도록 요청하십시오.

  3. 저장(Save)을 선택합니다.

3단계: 채팅 위젯 코드 및 보안 키 확인 및 복사

이 단계에서는 선택을 확인하고 채팅 위젯의 코드를 복사하여 웹사이트에 임베드합니다. 에서 JWT (JSON) 를 선택한 경우2단계에서 비밀 키를 복사하여 만들 수도 있습니다.

보안 키

이 44자 보안 키를 사용하여 웹 서버에서 JSON 웹 토큰을 생성할 수 있습니다. 키를 변경해야 하는 경우 키를 업데이트하거나 회전할 수도 있습니다. 이렇게 하면 Amazon Connect Connect에서 새 키를 제공하고 교체할 기회가 생길 때까지 이전 키를 유지합니다. 새 키를 배포한 후 Amazon Connect Connect로 돌아와서 이전 키를 삭제할 수 있습니다.

고객이 웹 사이트의 채팅 시작 아이콘과 상호 작용할 때 채팅 위젯은 웹 서버에 JWT를 요청합니다. 이 JWT가 제공되면 위젯은 Amazon Connect Connect에 대한 최종 고객의 채팅 요청의 일부로 해당 JWT를 포함합니다. 그런 다음 Amazon Connect 보안 키를 사용하여 토큰을 해독합니다. 성공하면 웹 서버에서 JWT를 발급한 것으로 확인되고 Amazon Connect Connect가 채팅 요청을 콜센터 상담원에게 라우팅합니다.

JSON 웹 토큰의 세부

  • 알고리즘: HS256

  • 클레임:

    • sub:위젯 ID

      ReplacewidgetId사용자 고유의 위젯ID 를 사용합니다. WidgetId를 찾으려면 예제를 참조하십시오.채팅 위젯 스크립트.

    • iat: *발행 시점.

    • EXP: *만료 기간 (최대 10분).

    * 날짜 형식에 대한 자세한 내용은 Internet Engineering Task (EETF) 문서를 참조하십시오. JWT (JSON 웹 토큰), 5 페이지.

다음 코드 조각은 Python에서 JWT를 생성하는 방법의 예를 보여줍니다.

payload = { 'sub': widgetId, // don't add single quotes, such as 'widgetId' 'iat': datetime.utcnow(), 'exp': datetime.utcnow() + timedelta(seconds=JWT_EXP_DELTA_SECONDS) } header = { 'typ': "JWT", 'alg': 'HS256' } encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm=JWT_ALGORITHM, headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect

채팅 위젯 스크립트

다음 그림에 관련 예를 보여 줍니다. JavaScript 고객이 상담원과 채팅하기를 원하는 웹 사이트에 임베드합니다. 이 스크립트는 웹 사이트의 오른쪽 하단 모서리에 위젯을 표시합니다.

  1. 위젯 ID를 찾을 수 있는 위치의 예입니다.

웹사이트가 로드되면 고객은 먼저채팅 시작아이콘. 고객이 이 아이콘을 선택하면 채팅 위젯이 열리고 고객이 상담원에게 메시지를 보낼 수 있습니다.

언제든지 채팅 위젯을 변경하려면Edit.

참고

저장된 변경 사항은 고객 경험을 몇 분 내에 업데이트합니다. 위젯 구성을 확인한 후 저장합니다.

웹사이트의 위젯 아이콘을 변경하려면 웹사이트를 직접 업데이트할 수 있는 새로운 코드 스니펫을 받게 됩니다.

채팅 위젯에 대한 추가 사용자 지정

채팅 환경을 사용자 지정하는 방법에 대해 자세히 알아보려면 다음 주제 단원을 참조하십시오.