채팅 대화상자에 적용할 수 있는 다양한 HTML 맞춤설정이 있습니다.
HTML 채팅 요소 옵션
df-messenger 요소의 하위 요소는 다음 중 하나일 수 있습니다.
df-messenger-chat: 에이전트 대화상자가 항상 열립니다.df-messenger-chat-bubble: 열기 또는 닫기 풍선 버튼으로 에이전트 대화상자를 열거나 닫을 수 있습니다.
df-messenger의 HTML 맞춤설정
df-messenger HTML 요소에는 다음과 같은 속성이 있습니다.
| 속성 | 입력 정책 | 값 |
|---|---|---|
agent-id |
필수 | Dialogflow 에이전트와 연결된 에이전트 ID입니다. |
allow-feedback |
선택사항 | 최종 사용자가 에이전트의 응답에 대해 피드백을 제공할 수 있도록 all로 설정합니다. |
language-code |
필수 | 기본 언어 코드입니다. |
project-id |
필수 | 에이전트의 프로젝트 ID입니다. |
location |
선택사항 | 에이전트의 리전입니다. 기본값은 global입니다. |
intent |
선택사항 | 채팅 대화상자가 열릴 때 호출되는 커스텀 이벤트입니다. 이 이벤트에 대해 호출되고 첫 번째 에이전트 메시지를 생성하는 이벤트 핸들러를 사용할 수 있습니다. |
oauth-client-id |
선택사항 | OAuth 인증에 필요합니다. 기본값은 null입니다. 값을 제공하지 않고 Dialogflow CX Messenger의 인증되지 않은 액세스를 사용 설정하면 인증되지 않은 사용자가 에이전트와 상호작용할 수 있습니다. 값을 제공하면 에이전트 대화상자에 '인증 요청'(텍스트 제어 가능, request-auth-text 알림 참조)이 오버레이되며, 이는 사용자가 에이전트를 사용하려면 먼저 로그인해야 함을 나타냅니다. |
storage-option |
선택사항 | 대화 메시지의 로컬 스토리지를 지정합니다. 메시지를 저장하지 않을 경우에는 none을 사용합니다. none을 사용하면 페이지를 새로고침하거나 다시 로드할 때 모든 메시지가 삭제됩니다. 기본값은 sessionStorage입니다. |
session-ttl |
선택사항 | 세션을 유지할 기간(초)으로 설정되며 반드시 86400(1d) 미만이어야 하고 기본값은 1800(30분)입니다. |
url-allowlist |
선택사항 | 쉼표로 구분된 URL 프리픽스 목록에서 이미지를 로드할 수 있습니다. HTML 또는 마크다운 응답에 사용되는 이미지 URL은 나열된 프리픽스 중 하나로 시작해야 합니다. 모든 URL을 허용하려면 *를 사용합니다. |
max-query-length |
선택사항 | 텍스트 쿼리의 최대 길이를 정의합니다. 값이 음수이면 길이는 무제한입니다. 기본값은 256입니다. 추가 문서 |
df-messenger-chat의 HTML 맞춤설정
df-messenger-chat HTML 요소에는 다음과 같은 속성이 있습니다.
| 속성 | 입력 정책 | 값 |
|---|---|---|
chat-title |
선택사항 | 위에 표시된 채팅 상자의 제목입니다. |
chat-subtitle |
선택사항 | 위에 표시되어 있고 chat-title 아래에 있는 채팅 상자의 자막입니다. |
chat-title-icon |
선택사항 | 위에 표시되어 있고 기본적으로 chat-title 왼쪽에 있는 채팅 상자 제목에 표시된 아이콘입니다. |
bot-writing-text |
선택사항 | 에이전트가 쓰는 동안 표시되는 텍스트 |
bot-writing-image |
선택사항 | 에이전트가 쓰는 동안 표시되는 이미지이며 bot-writing-text보다 우선 적용됩니다. |
request-auth-text |
선택사항 | 인증이 필요한 경우의 버튼 텍스트입니다. |
placeholder-text |
선택사항 | 비어 있는 동안 입력 필드에 표시되는 텍스트입니다. 기본값은 'Ask something…'입니다. |
bot-actor-image |
선택사항 | 에이전트의 작업 수행자 이미지에 사용할 이미지 소스입니다. 각 에이전트 응답 그룹에 표시됩니다. |
user-actor-image |
선택사항 | 사용자의 작업 수행자 이미지에 사용할 이미지 소스입니다. 각 사용자 메시지에 표시됩니다. |
df-messenger-chat-bubble의 HTML 맞춤설정
df-messenger-chat-bubble HTML 요소에는 df-messenger-chat와 동일한 속성 및 다음 추가 속성이 포함됩니다.
| 속성 | 입력 정책 | 값 |
|---|---|---|
expanded |
선택사항 | 채팅이 처음부터 열리는지 여부를 결정하는 불리언입니다. 설정하지 않으면 채팅의 마지막 상태가 저장됩니다. |
chat-icon |
선택사항 | 채팅 풍선 아이콘입니다. 공개적으로 사용 가능한 URI여야 합니다. |
chat-close-icon |
선택사항 | 채팅 풍선의 닫기 아이콘입니다. 공개적으로 사용 가능한 URI여야 합니다. |
chat-collapse-icon |
선택사항 | 제목 표시줄의 접기 버튼 아이콘입니다. 공개적으로 사용 가능한 URI여야 합니다. |
anchor |
선택사항 | 열기 또는 닫기 풍선을 기준으로 채팅 대화상자가 배치되는 위치를 정의합니다. 값은 -로 구분된 2개의 방향 단어(top, bottom, left, right)로 구성됩니다. 기본값은 top-left입니다. 첫 번째 방향은 앵커 포인트를 정의하고 두 번째 방향은 풍선에서 나가는 기본 확장 방향을 정의합니다. 예들 들어 top-left가 풍선 위에 배치된 경우 풍선을 기준으로 왼쪽 위로 확장됩니다. |
chat-width |
선택사항 | 채팅 창의 너비를 정의합니다. 숫자 값(픽셀)입니다. 기본값은 320px입니다. |
chat-height |
선택사항 | 채팅 창의 높이를 정의합니다. 숫자 값(픽셀)입니다. 기본값은 480px입니다. |
allow-fullscreen |
선택사항 | 채팅 창을 전체 화면으로 열 수 있는지 정의합니다. always로 설정하면 모든 화면 크기에서 전체 화면으로 열립니다. small로 설정하면 화면 크기가 500px 미만인 경우 전체 화면으로 열리고 그 밖의 경우에는 일반 창으로 열립니다. 설정된 경우 chat-width, chat-height, anchor를 재정의할 수 있습니다. |
minimized |
선택사항 | 채팅이 처음에 최소화된 형태로 열릴지 여부를 결정합니다. anchor와 동일한 로직을 사용합니다. 지정된 경우 로드 시 초기 intent를 실행합니다. |