웹 채팅 개발 개요

웹 채팅 설정의 스타일 탭에서 사용할 수 있는 옵션 외에 웹 채팅의 스타일과 모양을 사용자 지정하려면 다른 카본 디자인 테마를 선택하면 됩니다.

지원되는 테마는 IBM Carbon Design에서 정의한 색상 테마입니다. 카본 테마를 설정하려면 ' carbonTheme 구성 옵션을 사용합니다.

테마 내에서 개별 변수를 설정하여 특정 UI 요소를 사용자 지정할 수도 있습니다. 예를 들어, 대화 창에 표시되는 텍스트는 IBMPlexSans, Arial, Helvetica, sans-serif 글꼴을 사용합니다. 다른 글꼴을 사용하려면 ' updateCSSVariables() 인스턴스 메서드를 사용하여 지정할 수 있습니다.

홈 화면에서 고객을 맞이하고 선택적으로 추천 대화 시작 목록을 표시합니다. 홈 화면의 스타일 및 컨텐츠를 사용자 정의할 수 있습니다.

• 홈 화면에 요소를 추가하려면 ' writeableElements.homeScreenAfterStartersElement 테마 변수를 사용하여 사용자 정의 HTML을 정의할 수 있습니다:

  instance.writeableElements.homeScreenAfterStartersElement.innerHTML = 
    '<div class="MyCustomClass">This is my custom element</div>';
  

  예제: 홈 화면에 사용자 지정 요소를 추가하는 방법을 보여주는 작업 예제는 AI 어시스턴트 빌더 웹 채팅용 홈 화면 사용자 지정 요소를 참조하세요.

• 홈 화면 스타일을 변경하려면 CSS 헬퍼 클래스를 사용하세요.

웹 채팅에 표시되는 다양한 레이블과 하드코딩된 문구를 정의하는 문자열을 사용자 지정할 수 있습니다. 문자열을 사용자 지정하려면 ' updateLanguagePack() 인스턴스 메서드를 사용하여 현재 언어팩의 문자열을 대체하세요. 자세한 내용은 언어를 참조하세요.

기본적으로 웹 채팅에 표시되는 문자열은 영어로 되어 있습니다. 다른 언어로 변경하려면 ' updateLanguagePack() 인스턴스 메서드를 사용하여 현재 언어 팩을 사용 가능한 번역된 언어 팩 중 하나로 바꾸면 됩니다. 자세한 내용은 웹 채팅에서 글로벌 대상 지원하기를 참조하세요.

웹사이트와 더 잘 통합하려면 기본 제공 런처 아이콘을 웹 채팅을 여는 다른 메커니즘으로 교체할 수 있습니다. 기본 런처를 숨기려면 ' showLauncher 구성 옵션을 ' false' 로 설정합니다. 다른 상호작용을 기반으로 웹 채팅을 열려면 ' openWindow ' 인스턴스 메서드를 사용하세요.

튜토리얼을 참조하세요: 사용자 지정 런처를 구현하는 방법을 보여주는 튜토리얼은 사용자 지정 런처 사용을 참조하세요.

페이지에서 웹 채팅을 항상 열어두려면 ' openChatByDefault 설정을 열어 채팅 창이 열린 상태로 페이지를 렌더링하고, ' hideCloseButton ' 옵션을 사용하여 고객이 닫지 못하도록 합니다.

웹사이트 디자인에 따라 웹사이트의 웹 채팅 창이 렌더링되는 위치와 방식을 변경해야 할 수도 있습니다. 예를 들어 페이지의 다른 위치, 다른 크기로 표시하거나 페이지의 다른 요소 안에 중첩하여 표시할 수 있습니다.

웹 채팅 창의 크기를 변경하려면 updateCSSVariables() 인스턴스 메서드를 사용하여 CSS 스타일을 수정할 수 있습니다.

웹 채팅 창의 위치를 변경해야 하거나 CSS에서 허용하는 한도를 초과하여 크기를 변경해야 하는 경우 사용자 지정 DOM 요소를 사용하여 웹 채팅 창을 포함할 수 있습니다. 이렇게 하려면 ' element 구성 옵션을 사용합니다.

' 튜토리얼: 사용자 지정 요소에서 웹 채팅을 렌더링하는 방법을 보여주는 튜토리얼은 ' 튜토리얼: 웹 채팅의 크기와 위치 사용자 지정하기'을 참조하세요.

JavaScript 브릿지가 있는 WebView 사용하여 모바일 애플리케이션에 웹 채팅을 추가할 수 있습니다. 자세한 내용은 모바일 애플리케이션에 웹 채팅 추가하기를 참조하세요.

이벤트를 구독하면 코드가 고객과 어시스턴트 간에 주고받는 메시지를 가로채고 그 내용을 수정할 수도 있습니다.

고객의 메시지가 AI 어시스턴트에게 전송되기 전에 가로채고 싶다면 ' pre:receive 이벤트를 신청하세요. 예를 들어, 메시지 텍스트에서 개인 식별 정보를 제거하거나 메시지 페이로드에 컨텍스트 변수를 추가할 수 있습니다.

AI 어시스턴트로부터 수신되는 응답이 고객에게 표시되기 전에 가로채려면 ' pre:send 이벤트를 신청하세요. 예를 들어 웹 채팅에 특정한 서식, 링크 또는 기타 요소를 추가하고 싶을 수 있습니다.

튜토리얼을 참조하세요: ' pre:receive ' 이벤트를 사용하여 수신 메시지를 가로채고 수정하는 방법을 알려주는 자습서는 자습서: 웹 채팅에서 사용자 지정 옵션 버튼 구현하기를 참조하세요.

AI 어시스턴트가 사용자 지정(user_defined) 응답 유형을 사용하여 특수 응답을 보내는 경우 이러한 응답을 웹 채팅 창에 표시하도록 사용자 지정 보기를 구현할 수 있습니다. 이렇게 하려면 ' user_defined ' 응답이 수신될 때마다 실행되는 ' customResponse ' 이벤트를 구독하세요. 그런 다음 이벤트 핸들러 메서드에서 응답의 내용을 읽고 자체 요소를 사용하여 출력을 렌더링할 수 있습니다.

튜토리얼을 참조하세요: 기본 옵션 응답을 대체하여 사용자 지정 응답 유형을 렌더링하는 방법을 보여주는 튜토리얼은 튜토리얼: 웹 채팅에서 사용자 지정 옵션 버튼 구현하기를 참조하세요.

웹 채팅 스타터 키트 중 하나를 사용하여 기본 제공 AI 어시스턴트 빌더 통합으로 제공되는 것 이외의 컨택 센터(서비스 데스크) 플랫폼과 통합할 수 있습니다. 여러 컨택 센터 플랫폼에 대해 모든 기능을 갖춘 참조 구현이 제공되며, 스타터 키트를 사용하여 원하는 플랫폼과의 사용자 지정 통합을 개발할 수도 있습니다.

자세한 내용은 문의 센터 지원 추가하기를 참조하세요.

웹 채팅은 AI 어시스턴트에게 보내는 각 메시지에 사용자 ID를 연결하며, 이 사용자 ID는 사용자 기반 청구 및 기타 용도로 사용됩니다. 웹 채팅에서 각 사용자에 대해 익명 ID를 생성하도록 허용하거나 사용자 ID를 직접 제어할 수 있습니다.

웹 채팅에 보안을 사용 설정했는지 여부에 따라 ' updateUserID 인스턴스 메서드 또는 ' updateIdentityToken ' 메서드를 사용하여 사용자 신원 정보를 지정할 수 있습니다.

사용자 ID 정보 지정 방법 및 사용 방법에 대한 자세한 내용은 웹 채팅에서 사용자 ID 정보 관리하기를 참조하세요.

웹 채팅의 보안을 유지하기 위해 JSON 웹 토큰(JWT)을 사용하여 사용자를 인증하고 비공개 데이터를 암호화할 수 있습니다. 자세한 내용은 웹 채팅 보안하기를 참조하세요.

IBM Cloud 호스팅하는 웹 채팅 코드는 개선 사항과 새로운 기능으로 정기적으로 업데이트됩니다. 기본적으로 임베드 스크립트는 최신 버전의 웹 채팅을 자동으로 사용합니다. 웹사이트에 영향을 미칠 수 있는 예기치 않은 변경 사항을 방지하려면 웹사이트에서 사용하는 웹 채팅 버전을 제어하여 운영 환경에 배포하기 전에 각각의 새 버전을 테스트할 수 있는 기회를 제공하는 것이 좋습니다, 를 사용하여 새 버전이 출시될 때 예상치 못한 변경 사항을 방지할 수 있습니다.

웹 채팅 버전 관리에 대한 자세한 내용은 웹 채팅 버전 관리하기를 참조하세요.