이 페이지에서는 카드 또는 대화상자 메시지에 텍스트와 이미지를 추가하는 방법을 설명합니다. 를 사용하세요.
카드 빌더를 사용하여 채팅 앱용 JSON 카드 메시지를 디자인하고 미리 봅니다.
카드 빌더 열기 <ph type="x-smartling-placeholder"></ph>
기본 요건
양방향 기능이 사용 설정된 Google Chat 앱 대화식 채팅 앱에서 대화식 채팅 앱을 사용하려면 다음 빠른 시작 중 하나를 완료하세요. 앱 아키텍처에 따라 다음을 수행합니다.
- Google Cloud Functions를 사용하는 HTTP 서비스
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
이미지 추가
이
Image
위젯
HTTPS URL에 호스팅된 PNG 또는 JPG 이미지를 표시합니다.
표시된 이미지의 너비가 표시된 카드의 전체 너비를 채웁니다.
이미지의 가로세로 비율을 유지하도록 높이가 조정됩니다. Image
위젯
지원
작업 onclick
개
사용자가 이미지를 클릭할 때 발생하는 프로세스입니다. onclick
작업의 예는 다음과 같습니다.
- 다음으로 하이퍼링크 열기
OpenLink
님, Google Chat 개발자 문서로 연결되는 하이퍼링크,https://developers.google.com/chat
입니다. - 다음을 실행합니다. 액션 커스텀 함수를 실행하는 API입니다.
Image
위젯에는 다음과 같은 제한사항이 있습니다.
- PNG 및 JPG 이미지만 지원됩니다.
- 호스트 URL은
HTTPS
여야 합니다. - 성능 카드를 보장하기 위해 권장되는 최대 이미지 크기는 2MB입니다.
다음은 Image
위젯으로 구성된 카드입니다. 그러면
Google Chat 개발자 문서 방문 페이지 이미지입니다. 사용자가
Google Chat 개발자 문서가 새 탭에서 열립니다.
이미지 구성요소 추가
Image
위젯은 스타일 지정이 제한된 이미지입니다.
imageCompent
위젯
를 사용하면 이미지에 cropStyle
및 borderStyle
를 적용할 수 있습니다.
다음 예는 이미지 중 하나가 잘림:
이미지 자르기
이미지의 모양을 조정하려면
cropStyle
이미지에 적용할 수 있는 여러 도형은 다음과 같습니다.
SQUARE
을 사용하여 정사각형 자르기를 적용합니다.CIRCLE
을 사용하여 원형으로 자를 수 있습니다.RECTANGLE_CUSTOM
를 사용하여 커스텀 관점으로 직사각형 자르기 적용 있습니다. 예를 들어RECTANGLE_4_3
를 사용하여 직사각형 자르기를 적용할 수 있습니다. 4:3 가로세로 비율
다음 예에서는 그리드에서 cropStyle
가 다른 5개의 이미지를 보여줍니다.
다음 각 이미지에 적용됩니다.
아이콘 추가
이
Icon
위젯
는
내장
아이콘 또는
맞춤
아이콘을 클릭합니다. 다음에서 Icon
사용 가능:
카드 메시지
및
대화상자
사용할 수 있습니다.
- 독립형 아이콘을 표시합니다.
- 콘텐츠의 일부로 관련 텍스트 앞에 아이콘 표시
DecoratedText
위젯 - 아이콘을 대화형 버튼으로 표시
ButtonList
위젯
다음은 기본 제공 아이콘이 있는 Icon
구성요소로 구성된 카드입니다.
다음 표에는 카드 메시지에 사용할 수 있는 기본 제공 아이콘이 나와 있습니다.
비행기 | 북마크 | ||
버스 | 자동차 | ||
시계 | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | 달러 | ||
이메일 | EVENT_SEAT | ||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
호텔 | HOTEL_ROOM_TYPE | ||
INVITE | MAP_PIN | ||
멤버십 | MULTIPLE_PEOPLE | ||
이름 | 전화 | ||
RESTAURANT_ICON | SHOPPING_CART | ||
별표 | 스토어 | ||
티켓 | 학습 | ||
VIDEO_CAMERA | VIDEO_PLAY |
서식이 지정된 텍스트의 단락 추가
이
TextParagraph
위젯
- 선택적 HTML 형식을 사용하여 텍스트의 단락을 표시합니다. 설정 시
텍스트 콘텐츠를 추가하려면 해당 HTML 태그만 포함하면 됩니다.
지원되는 HTML 태그에 대한 자세한 내용은
카드 텍스트 서식 지정.
예를 들어 단락 텍스트에는 다음과 같은 형식을 사용할 수 있습니다.
- HTML
<b>
,<u>
,<i>
을 사용하여 굵게, 밑줄 또는 기울임꼴이 적용된 텍스트 표시 태그 사이에 있어야 합니다. - HTML
<a href="https://www.google.com">hyperlinks</a>
을(를) 사용하여 웹사이트 링크를 제공합니다. - HTML
<font color="#ea9999">font tags</font>
을 사용하여 색상을 추가합니다.
각 TextParagraph
위젯은 새 단락으로 렌더링되며
HTML <p>
태그와 유사합니다.
다음은 다음에 사용되는 두 개의 TextParagraph
위젯으로 구성된 카드입니다.
간단한 HTML 형식으로 두 개의 단락을 표시합니다.
접을 수 있는 텍스트 단락 추가하기
접을 수 있는 텍스트 단락을 통해 사용자는 필요할 때 더 많은 정보를 표시할 수 있습니다. 이 위젯은 긴 콘텐츠나 추가 세부정보를 표시하기에 선택 시 탐색이 가능하여 동적인 양방향 사용자 생성 경험해 볼 수 있습니다
장식 요소가 있는 텍스트 표시
이
DecoratedText
위젯
선택적 레이아웃과 기능으로 텍스트를 표시합니다. 예를 들면 다음과 같습니다.
startIcon
를 사용하여 텍스트 앞에icon
를 표시합니다.topLabel
로 텍스트 앞에 제목을 표시합니다.button
로 클릭 가능한 버튼을 추가하거나switchControl
로 전환 가능한 전환을 추가합니다.
화면에 정보를 표시해야 하는 경우 DecoratedText
위젯을 사용합니다.
대화형 방식으로 배포됩니다 이 위젯은
연락처 카드, 주문 상태 업데이트, 업무 티켓 알림
DecoratedText
위젯은 간단한 텍스트 HTML 형식을 지원합니다. 설정 시
텍스트 콘텐츠를 추가하려면 해당 HTML 태그만 포함하면 됩니다. 대상
지원되는 HTML 태그에 대한 자세한 내용은
카드 텍스트 서식 지정.
다음은 표시하는 데 사용되는 DecoratedText
위젯으로 구성된 카드입니다.
전화번호, 이메일 주소, 온라인 상태, 전화번호 등
웹사이트:
문제 해결
Google Chat 앱 또는 card가 오류를 반환하는 경우 Chat 인터페이스에 '문제가 발생했습니다'라는 메시지가 표시됨 또는 '요청을 처리할 수 없습니다'와 같은 메시지가 표시됩니다. 채팅 UI가 오류 메시지가 표시되지 않지만 채팅 앱 또는 카드에서 예기치 않은 결과가 발생합니다. 예를 들어 카드 메시지가 나타납니다.
채팅 UI에 오류 메시지가 표시되지 않을 수도 있지만 오류 해결에 도움이 되는 오류 메시지 및 로그 데이터를 사용할 수 있음 채팅 앱의 오류 로깅이 사용 설정된 경우 보는 데 도움이 필요한 경우 오류를 수정하는 방법에 대한 자세한 내용은 Google Chat 오류 문제 해결하기
관련 주제
- 카드 및 대화상자를 사용하는 채팅 앱 샘플 보기
Image
imageCompent
cropStyle
Icon
TextParagraph
DecoratedText