웹 위젯

웹 위젯은 사용자가 채팅 또는 음성을 사용하여 에이전트 애플리케이션과 상호작용할 수 있도록 웹 및 모바일 애플리케이션에서 사용할 수 있는 웹 기반 클라이언트입니다. 이 가이드에서는 개요와 설정 안내를 제공합니다.

위젯이 열리면 오른쪽 하단 모서리에 플로팅 대화상자 창으로 표시되거나, 기본 콘텐츠 옆에 패널로 표시되거나, 집중된 대화를 위해 확장된 대화상자 모드로 열릴 수 있습니다.

제한사항

현재는 영어로만 리치 콘텐츠 대답이 지원됩니다.

웹 위젯 설정

웹사이트에 위젯을 삽입하려면 다음 단계를 따르세요.

에이전트 빌더 상단에서 배포를 클릭합니다.
채널 만들기 또는 새 채널을 클릭합니다.
웹 위젯 채널 유형을 선택합니다.
채널 이름을 입력합니다.
에이전트 애플리케이션 버전을 선택하거나 만듭니다.
색상 테마, 환경 유형 (채팅, 통화 또는 혼합)과 같은 기타 환경설정을 구성합니다.
채널 만들기를 클릭하여 배포 코드를 생성합니다.
웹사이트의 HTML에 배포 코드를 추가합니다.
최종 사용자의 인증을 설정합니다. 인증을 구성하지 않고 수정되지 않은 삽입 코드를 사용하면 위젯에 경고가 표시됩니다. 옵션 및 설정에 관한 자세한 내용은 인증 구성 섹션을 참고하세요.

웹사이트에 위젯 삽입

웹사이트에 위젯을 추가하려면 다음 HTML 스니펫을 추가해야 합니다.

아래 스니펫에는 reCAPTCHA에 필요한 스크립트가 포함되어 있습니다. 위젯에서 reCAPTCHA를 사용하는 경우 사이트가 Google에 의해 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용된다는 알림이 위젯 하단에 표시됩니다. RECAPTCHA 배지를 숨길 수도 있습니다.

반응형 레이아웃을 지원하려면 chat-messenger-layout.css도 선택적으로 로드할 수 있습니다. chat-messenger-layout.css 파일은 반응형 스타일 지정에 사용되며 render-mode="slide-in" 또는 render-mode="slide-over"을 사용할 때 메신저를 뷰 안팎으로 슬라이드합니다. body의 스타일을 지정하므로 웹사이트에 영향을 미칠 수 있습니다. 따라서 chat-messenger-layout.css를 로드하지 않거나 콘텐츠를 복사하여 자체 CSS에 통합할 수 있습니다.

최상의 성능을 위해 반응형 레이아웃을 보장하려면 다음 게재위치를 따르세요.

<header> 섹션에서 다음을 수행합니다.

<header>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script defer src="https://www.gstatic.com/ces-console/fast/chat-messenger/prod/v1/chat-messenger.js"></script>

  <!-- Chat Messenger CSS -->
  <link rel="stylesheet" href="https://www.gstatic.com/ces-console/fast/chat-messenger/prod/v1/themes/chat-messenger-default.css">

  <!-- Optional responsive styling  -->
  <!-- <link rel="stylesheet" href="https://www.gstatic.com/ces-console/fast/chat-messenger/prod/v1/themes/chat-messenger-layout.css"> -->

  <!-- CSS customization -->
  <style>
    chat-messenger {
      z-index: 999;
      position: fixed;
      <!-- Your CSS customization goes here if needed -->
    }
  </style>
</header>

<body> 섹션에서 다음을 수행합니다.


<body>
  <!-- Your website's main content goes here -->

  <script>
    window.addEventListener("chat-messenger-loaded", () => {
      chatSdk.registerContext(
        chatSdk.prebuilts.ces.createContext({
          deploymentName: "projects/YOUR_PROJECT_ID/locations/YOUR_REGION/apps/YOUR_APP_ID/deployments/YOUR_DEPLOYMENT_ID",
          tokenBroker: {
            enableTokenBroker: true,
            // If you enabled reCAPTCHA for the token broker, set enableRecaptcha to true.
            // enableRecaptcha: true,
          },
        }),
      );
    });
  </script>

  <!-- Messenger component -->
  <chat-messenger
    language-code="en"
    max-query-length="-1">
    <chat-messenger-chat-bubble
      chat-title="${your-chat-title}">
    </chat-messenger-chat-bubble>
  </chat-messenger>

  <!-- Page content continues -->
</body>

보안 고려사항

위젯을 맞춤 요소(<chat-messenger>)로 웹사이트에 직접 삽입하면 위젯이 호스트 페이지의 섀도우 DOM에서 실행됩니다. 기본적으로 엄격한 샌드박스 (예: iframe)를 적용하지 않습니다.

위젯이 애플리케이션과 창 출처를 공유하기 때문에 다음이 가능합니다.

공유 저장소 액세스: 위젯 맞춤 구성요소 내에서 실행되는 스크립트는 호스트 페이지의 window.sessionStorage 및 window.localStorage에 액세스할 수 있습니다. 여기에는 위젯 자체에서 저장한 인증 토큰이나 민감한 세션 데이터가 포함됩니다.
크로스 사이트 스크립팅 (XSS): 맞춤 구성요소 코드 또는 리치 콘텐츠 페이로드에 정리되지 않은 입력이 포함된 경우 이를 악용하여 기본 애플리케이션 컨텍스트에서 임의의 JavaScript를 실행할 수 있습니다.

애플리케이션과 사용자 데이터의 보안을 유지하려면 다음을 충족해야 합니다.

맞춤 코드 정리: 맞춤 구성요소 또는 페이로드에 사용되는 모든 맞춤 JavaScript 및 HTML이 엄격하게 정리되었는지 확인합니다.
입력 유효성 검사: 외부 소스(에이전트 응답 포함)에서 위젯으로 전달되는 모든 데이터를 신뢰할 수 없는 것으로 취급합니다.
핸들 격리: 보안 요구사항에 따라 채팅 위젯과 애플리케이션의 데이터 간에 엄격한 격리가 필요한 경우 자체 샌드박스를 구현해야 합니다(예: 제어하고 격리하는 컨테이너에 위젯 구성요소를 래핑).

상담사 전달 구성

위젯을 구성하기 전에 필요한 리소스가 생성되고 WebChat Proxy 배포가 완료되었는지 확인합니다.

에스컬레이션 번호를 설정합니다.
1. 프로젝트의 PhoneNumber 리소스를 만듭니다.
  1. 에이전트 애플리케이션에 맞게 구성된 유효한 대화 프로필을 사용합니다.
  2. 시스템에서 사람 에스컬레이션을 처리할 수 있도록 대화 프로필을 전화번호와 연결합니다.
2. 안내에 따라 WebChat Proxy를 설정합니다.

Webchat 클라이언트 구성:

WebChat 프록시에서 속성을 설정하여 실시간 핸드오프 기능을 사용 설정합니다. 코드 스니펫 예시:

<chat-messenger service='{"name":"ces","deployment-id":"projects/YOUR_PROJECT_ID/locations/YOUR_REGION/apps/YOUR_APP_ID/deployments/YOUR_DEPLOYMENT_ID"}'
  liveHandoff="true"
escalationNumber="projects/YOUR_PROJECT_ID/locations/global/phoneNumbers/YOUR_PHONE_NUMBER_ID"
  url-allowlist="*"
>
  </chat-messenger>

HTML 맞춤설정

채팅 대화상자가 표시되고 작동하는 방식에 대해 다양한 측면을 맞춤설정할 수 있습니다. chat-messenger 및 chat-messenger-container HTML 요소에는 다음과 같은 속성이 있습니다.

속성	구성요소 출처 표시	값(선택사항)	효과
서비스	chat-messenger		연결된 백엔드 서비스에 필요한 서비스 이름입니다.
url-allowlist	chat-messenger	*	(쉼표로 구분된 이미지 도메인 목록
logging-level	chat-messenger	디버그	<OMIT>
enable-audio-input-only	chat-messenger-container		음성 전용 모드
start-with-recording	chat-messenger-container		음성 전용 모드가 필요합니다. 채팅 메신저 컨테이너가 렌더링되는 순간 음성 전용 모드가 시작됩니다.
enable-audio-input	chat-messenger-container		다중 모달 채팅을 허용하는 버튼 추가
enable-file-upload	chat-messenger-container		이미지 업로드를 사용 설정합니다.
bot-writing-image	chat-messenger-container	문자열	봇이 '생각'하는 동안 렌더링되는 이미지의 URL
chat-title-icon	chat-messenger-container	문자열	채팅 상단에 렌더링되는 이미지의 URL (브랜드 이미지)
chat-title	chat-messenger-container	문자열	채팅 제목 텍스트
render-mode	chat-messenger	문자열 ('slide-in' 또는 'slide-over')	페이지의 나머지 부분과 관련된 채팅 대화상자의 렌더링 모드입니다. 옵션은 '슬라이드 오버' 또는 '슬라이드 인'입니다. 지정되지 않은 경우 클라이언트에서 위치를 지정할 수 있습니다. 렌더링 모드를 지원하려면 스타일이 필요합니다. `chat-messenger-layout.css`를 기준선으로 사용할 수 있습니다.

CSS 맞춤설정

위젯 모양 맞춤설정은 CSS 토큰 시스템을 통해 처리됩니다. 이러한 토큰을 수정하면 레이아웃 무결성과 접근성을 유지하면서 채팅 인터페이스가 브랜드와 일관되도록 할 수 있습니다.

색상 토큰

이러한 토큰은 위젯 표면, 대화형 요소, 텍스트, 상태의 색상 팔레트를 정의합니다.

속성	설명	기본 밝은 테마	기본 어두운 테마
컨테이너 / 표면
--chat-messenger-color--surface	채팅 본문 및 바닥글 영역의 기본 배경색입니다.	#F8FAFD	#1B1B1B
--chat-messenger-color--surface-container	채팅 내에 중첩된 위젯 컨테이너 (예: 제품 카드 및 캐러셀)의 배경 색상입니다.	#FFFFFF	#131314
--chat-messenger-color--surface-container-high	위젯 내 요소 (예: 입력 필드)의 강조 배경	#F0F4F9	#1E1F20
브랜드 / 악센트
--chat-messenger-color--primary	높은 강조 채우기 및 기본 버튼에 사용되는 기본 브랜드 색상입니다.	#303030	#E3E3E3
--chat-messenger-color--primary-container	사용자 메시지 풍선과 같은 주요 구성요소의 눈에 띄는 배경 색상	#E9EEF6	#282A2C
--chat-messenger-color--secondary	'보내기' 버튼 또는 톤 버튼과 같은 보조 상호작용 요소의 색상입니다.	#DDE3EA	#333537
텍스트 및 아이콘
--chat-messenger-color--on-surface	표준 표면 배경에 표시되는 텍스트 및 아이콘의 기본 색상입니다.	#1F1F1F	#E3E3E3
--chat-messenger-color--on-surface-variant	보조 텍스트 및 장식 아이콘의 강조가 낮은 색상입니다.	#444746	#C4C7C5
--chat-messenger-color--on-primary	기본 브랜드 배경 위에 배치된 텍스트와 아이콘의 색상	#F2F2F2	#303030
--chat-messenger-color--on-primary-container	primary-container 배경 위에 배치된 텍스트와 아이콘의 색상입니다.	#1F1F1F	#E3E3E3
--chat-messenger-color--on-secondary	보조 브랜드 배경 위에 배치된 텍스트 및 아이콘의 색상	#444746	#C4C7C5
주
--chat-messenger-color--state-layer-on-surface	표준 표면에서 마우스 오버 또는 선택 상태를 나타내는 데 사용되는 반투명 오버레이입니다. 사용 중지된 구성요소의 채우기입니다.	#1F1F1F 8%	#E3E3E3 8%
--chat-messenger-color--state-layer-on-primary	기본 색상 요소 위에 있는 상호작용 상태에 사용되는 반투명 오버레이입니다.	#FFFFFF 8%	#062E6F 8%
--chat-messenger-color--state-layer-on-secondary	보조 색상 요소 위에 있는 상호작용 상태에 사용되는 반투명 오버레이입니다.	#1F1F1F 8%	#E3E3E3 8%
--chat-messenger-color--state-on-surface-mute	사용 중지된 텍스트 및 아이콘의 색상입니다.	#444746 (38%)	#C4C7C5 (38%)
유틸리티
--chat-messenger-color--outline	일반 테두리, 구분선, 장식 윤곽선의 색상입니다.	#C4C7C5	#444746
--chat-messenger-color--outline-variant	미묘한 테두리 (예: 위젯의 외부 프레임)의 색상	#747775(16%)	#8E918F(16%)
--chat-messenger-color--outline-active	포커스가 있거나 활성 상태일 때 입력란 및 드롭다운의 테두리 색상	#747775	#8E918F
--chat-messenger-color--error	긴급성을 나타내는 채우기, 아이콘, 텍스트의 표면에 대한 시선을 사로잡는 색상입니다.	#B3261E	#F2B8B5
--chat-messenger-color--error-container	오류 배너 또는 대화형 알림 컨테이너의 배경 채우기 색상입니다.	#F9DEDC	#8C1D18
--chat-messenger-color--on-error-container	오류 컨테이너 배경에 배치된 텍스트와 아이콘	#8C1D18	#F9DEDC
--chat-messenger-color--link	메시지 또는 설명 내에서 클릭 가능한 하이퍼링크에 사용되는 색상입니다.	#0B57D0	#A8C7FA

모양 및 고도 토큰

이러한 토큰은 채팅 구성요소의 모서리 반경과 시각적 깊이 (그림자)를 제어합니다.

속성	설명	기본값
--chat-messenger-shape--corner-value-small	위젯 내 작은 중첩 요소의 모서리 반경 (예: 제품 이미지 썸네일)	8px
--chat-messenger-shape--corner-value-medium	위젯 내 중첩된 요소 (예: 입력란, 이미지)의 모서리 반경	16px
--chat-messenger-shape--corner-value-large	위젯 내 중첩된 컨테이너의 모서리 반지름 (예: 캐러셀 카드, 빠른 작업 카드)	20px
--chat-messenger-shape--corner-value-extra-large	기본 채팅 창 및 위젯 컨테이너의 모서리 반지름입니다.	28px
--chat-messenger-shape--corner-fully-rounded	버튼과 알약 모양의 대화형 요소에 사용하여 완전히 원형인 끝을 보장합니다.	100px
--chat-messenger-elevation	플로팅 요소와 기본 채팅 구성요소에 적용된 box-shadow입니다.	0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15)

서체 토큰

이러한 토큰은 인터페이스 전체에서 사용되는 서체와 특정 스케일 (크기, 두께, 간격)을 정의합니다.

속성	사용 목적	기본값
--chat-messenger-font-family	기본 글꼴 모음	Google Sans
제목 large	명시적 헤더
--chat-messenger-typescale--title-large-font-size		18px
--chat-messenger-typescale--title-large-font-weight		400
--chat-messenger-typescale--title-large-line-height		24px
--chat-messenger-typescale--title-large-letter-spacing		0
제목 중간	위젯 내 섹션 헤더
--chat-messenger-typescale--title-medium-font-size		16px
--chat-messenger-typescale--title-medium-font-weight		500
--chat-messenger-typescale--title-medium-line-height		24px
--chat-messenger-typescale--title-medium-letter-spacing		0
Title small
--chat-messenger-typescale--title-small-font-size	작은 카드 내의 부제목 또는 제목	14px
--chat-messenger-typescale--title-small-font-weight		500
--chat-messenger-typescale--title-small-line-height		20px
--chat-messenger-typescale--title-small-letter-spacing		0
Body large	긴 설명
--chat-messenger-typescale--body-large-font-size		16px
--chat-messenger-typescale--body-large-font-weight		400
--chat-messenger-typescale--body-large-line-height		24px
--chat-messenger-typescale--body-large-letter-spacing		0
Body medium	표준 UI 텍스트
--chat-messenger-typescale--body-medium-font-size		14px
--chat-messenger-typescale--body-medium-font-weight		400
--chat-messenger-typescale--body-medium-line-height		20px
--chat-messenger-typescale--body-medium-letter-spacing		0
Body small	보조 메타데이터 및 설명
--chat-messenger-typescale--body-small-font-size		12px
--chat-messenger-typescale--body-small-font-weight		400
--chat-messenger-typescale--body-small-line-height		16px
--chat-messenger-typescale--body-small-letter-spacing		0.1
라벨 large	버튼 및 기본 작업 칩 내의 텍스트
--chat-messenger-typescale--label-large-font-size		14px
--chat-messenger-typescale--label-large-font-weight		500
--chat-messenger-typescale--label-large-line-height		20px
--chat-messenger-typescale--label-large-letter-spacing		0
라벨 매체	보조 버튼 텍스트 및 필드 라벨
--chat-messenger-typescale--label-medium-font-size		12px
--chat-messenger-typescale--label-medium-font-weight		500
--chat-messenger-typescale--label-medium-line-height		16px
--chat-messenger-typescale--label-medium-letter-spacing		0.1
라벨 small	마이크로 라벨 및 배지 텍스트
--chat-messenger-typescale--label-small-font-size		11px
--chat-messenger-typescale--label-small-font-weight		500
--chat-messenger-typescale--label-small-line-height		16px
--chat-messenger-typescale--label-small-letter-spacing		0.1

간격 토큰

이러한 토큰은 일관된 레이아웃 밀도를 유지하여 요소 간의 여백, 패딩, 간격을 정의합니다.

속성	기본값
--chat-messenger-spacing--half	4px
--chat-messenger-spacing--one	8px
--chat-messenger-spacing--one-and-half	12px
--chat-messenger-spacing--two	16px
--chat-messenger-spacing--two-and-half	20px
--chat-messenger-spacing--three	24px
--chat-messenger-spacing--three-and-half	28px
--chat-messenger-spacing--four	32px

자바스크립트 이벤트

메신저는 이벤트 리스너를 만들 수 있는 다양한 이벤트를 트리거합니다. 이러한 이벤트의 이벤트 대상은 chat-messenger 요소입니다.

chat-messenger 요소에 이벤트 리스너를 추가하려면 다음 JavaScript 코드를 추가합니다. 여기서 event-type은 이 섹션에 설명된 이벤트 이름 중 하나입니다.


const chatMessenger = document.querySelector('chat-messenger');
chatMessenger.addEventListener('event-type', function (event) {
  // Handle event
  ...
});

지원되는 이벤트 유형은 다음과 같습니다.

chat-messenger-loaded: 이 이벤트는 chat-messenger 요소가 완전히 로드되고 초기화되면 트리거됩니다.
chat-messenger-close
chat-messenger-error: 이 이벤트는 CES 상담사가 오류 상태 코드를 전송하면 발생합니다. 이벤트 구조는 다음과 같습니다.
```
eventId= `chat-messenger-error-v2`
event.details {
  message: string;
  code: number | undefined;
  status: number | string;
}
```
df-update-cart-count: 이 이벤트는 product_carousel, product_detail, product_comparison 리치 콘텐츠 요소에서 '장바구니에 추가', '상품 수량 조정', '상품 삭제'가 발생할 때 발생합니다. 이벤트 구조는 다음과 같습니다.
```
{
  "detail": {
    "count": <cart_item_count>,
  }
}
```

자바스크립트 함수

chat-messenger 요소는 동작에 영향을 주기 위해 호출할 수 있는 함수를 제공합니다.

renderCustomEvent

이 함수는 에이전트 애플리케이션에서 텍스트 응답으로 제공된 것처럼 텍스트 메시지를 렌더링합니다.

예를 들면 다음과 같습니다.

const chatMessenger = document.querySelector('chat-messenger');
chatMessenger.renderCustomText('Custom text');

renderCustomCard

이 함수는 커스텀 카드를 에이전트 애플리케이션에서 서식 있는 응답 메시지로 제공된 것처럼 렌더링합니다. 커스텀 페이로드 응답 형식은 서식 있는 응답 메시지 섹션에 정의됩니다.

예를 들면 다음과 같습니다.

const chatMessenger = document.querySelector('chat-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "src": {
        "rawUrl": "https://example.com/images/logo.png"
      }
    },
    "actionLink": "https://example.com"
  }];
chatMessenger.renderCustomCard(payload);

인증 구성

웹 위젯이 Google의 백엔드 서비스에 보내는 모든 API 요청은 인증되어야 합니다. 이는 수명이 짧은 OAuth 2.0 액세스 토큰을 사용하여 이루어집니다.

이 토큰과 연결된 ID(최종 사용자 또는 서비스 계정)에는 에이전트와 상호작용하는 데 필요한 IAM 권한이 있어야 합니다.

나머지 하위 섹션에서는 인증을 설정하는 방법을 설명합니다.

토큰 브로커 설정

토큰 브로커는 Google Cloud 프로젝트에서 실행되며 내가 소유한 서비스 계정을 대신하여 액세스 토큰을 생성하는 웹 서비스입니다. 웹 위젯은 대화 시작 시 토큰 브로커의 URL을 자동으로 호출하여 CX Agent Studio API와 통신할 때 사용할 새 토큰을 가져올 수 있습니다.

Google 호스팅 또는 자체 호스팅의 두 가지 방법으로 토큰 브로커를 설정할 수 있습니다.

Google 호스팅

Google에서 제공하는 토큰 브로커를 사용하여 채팅 위젯에 공개 액세스를 허용합니다.

배포 및 위젯 구성을 만들 때 공개 액세스를 사용 설정하고, 원하는 경우 출처 및 reCAPTCHA 확인을 사용 설정합니다(스푸핑 및 악용 방지 권장).
채팅 위젯은 Google에서 제공하는 토큰 브로커로부터 세션 범위 토큰을 요청하고 이를 채팅 세션에 사용합니다.

자체 호스팅

다음 단계에 따라 자체 호스팅 토큰 브로커를 설정하세요.

프로젝트에서 서비스 계정을 만들고 고객 참여 스위트 클라이언트 역할을 부여합니다.
Google에서 제공하는 토큰 브로커 샘플 코드를 사용하여 Cloud Run Functions 함수를 배포합니다.

자세한 단계별 안내는 오픈소스 저장소를 참고하세요.

OAuth2 설정

OAuth2 클라이언트를 사용하면 웹 위젯이 최종 사용자의 인증 흐름을 시작할 수 있습니다. 일반적으로 이는 사용자가 Google 계정 (또는 기타 제공업체)에 로그인하는 대화상자 창이 열리고 웹 위젯이 사용자를 대신하여 작동하는 토큰을 수신한다는 의미입니다.

사용자 인증 정보가 에이전트 애플리케이션에 액세스하는 데 사용되는 경우 최종 사용자가 에이전트를 사용하기 전에 로그인하도록 하려면 이 옵션을 선택하세요.

다음은 따라야 하는 주요 단계입니다.

Google Cloud 콘솔에서 Google 인증 플랫폼으로 이동하여 클라이언트를 선택합니다.
클라이언트 만들기를 클릭합니다.
클라이언트 유형으로 웹 애플리케이션을 선택합니다.
새 클라이언트의 이름을 입력합니다.
승인된 JavaScript 원본과 승인된 리디렉션 URI에 모두 웹사이트 URL을 추가합니다.
만들기를 클릭하고 5분 정도 기다린 후 계속합니다.

단계를 따르면 다음과 같은 형식의 클라이언트 ID가 표시됩니다.

123456789012-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com

chat-messenger 웹 구성요소의 oauth-client-id 속성에 이를 제공합니다.

자체 인증 API 빌드

최종 사용자의 인증 및 승인을 처리하는 자체 API를 빌드합니다. 이 API는 앱에서 runSession를 호출할 권한이 있는 Google 액세스 토큰 또는 서명된 JWT를 반환합니다.

CX Agent Studio API 사용에 대한 자세한 내용은 API 액세스를 참고하세요.

웹 위젯 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.