Carousel
여러 개의 열을 구성하여 항목들을 표시할 수 있다.
캐러셀은 수평으로 스크롤할 수 있고 항목들이 순서대로 표시된다.
메시지는 다국어로 전송할 수 있다. 다국어 메시지는 클라이언트의 단말기 언어 설정에 맞게 표시된다.
캐러셀의 구조는 다음과 같다.
참고
- 모든 열에 대해 일관된 동작(action) 수를 유지해야 한다.
- 이미지 혹은 제목을 설정한다면 모든 열에 일관되게 사용해야 한다.
Request Content {#carousel-request}
common {#carousel-request-common}
| 파라미터 | 타입 | 필수 여부 | 설명 |
|---|---|---|---|
| type | string | Y | "carousel"로 고정 |
| imageAspectRatio | string | N | 이미지의 비율. 모든 열에 적용된다. • "rectangle": 1.51:1(기본값) • "square": 1:1 |
| imageSize | string | N | 이미지의 사이즈. 모든 열에 적용된다. • "cover": 이미지가 전체 영역을 채운다(기본값). 영역에 맞지 않는 이미지 부분은 표시되지 않는다. • "contain": 전체 영역에 이미지를 채운다. 세로로 긴 이미지는 좌우로 공백이 채워진다. 가로로 긴 이미지는 상하로 공백이 채워진다. |
| columns | array | Y | 캐러셀의 객체 목록 최대: 10개 |
| columns[].originalContentUrl | string | N | 이미지 URL(PNG 형식, HTTPS만 허용) originalContentUrl, fileId 중 하나만 지정해야 하며, 필수는 아니다. 최대 크기: 1MB 최대 글자수: 1,000자 |
| columns[].fileId | string | N | 이미지 파일 ID. originalContentUrl, fileId 중 하나만 지정해야 하며, 필수는 아니다. 최대 크기: 1MB |
| columns[].title | string | N | 제목 최대 글자수: 40자 |
| columns[].text | string | Y | 메시지 내용 이미지와 제목이 없을 경우 최대 길이: 4줄, 120자 • 이미지 또는 제목이 있을 경우 최대 길이: 2줄, 60자 |
| columns[].defaultAction | Action Object | N | image, title, text 영역을 눌렀을 때 동작 |
| columns[].actions | array<Action Object> | Y | Action이 정의된 버튼 최대: 3개 |
참고
- 캐러셀 본문의 최대 글자수를 초과하지 않더라도 최대 줄수를 초과하면 초과된 문자열은 노출되지 않는다.
- 따라서 기기의 화면 크기, 문자 타입 등에 따라 캐러셀 본문에 노출되는 글자수는 더 적어질 수 있다.
multi language {#carousel-request-multilang}
| 파라미터 | 타입 | 필수 여부 | 설명 |
|---|---|---|---|
| columns[].i18nOriginalContentUrls[] | array | N | 다국어 이미지 URL 목록 |
| columns[].i18nOriginalContentUrls[].language | string | Y | 다국어 언어 코드 • ko_KR • ja_JP • zh_CN • zh_TW • en_US |
| columns[].i18nOriginalContentUrls[].originalContentUrl | string | Y | 이미지 URL(PNG 형식, HTTPS만 허용) 최대 크기: 1MB 최대 글자수: 1,000자 |
| columns[].i18nFileIds[] | array | N | 다국어 이미지 파일 ID 목록 |
| columns[].i18nFileIds[].language | string | Y | 다국어 언어 코드 • ko_KR • ja_JP • zh_CN • zh_TW • en_US |
| columns[].i18nFileIds[].fileId | string | Y | 이미지 파일 ID. 최대 크기: 1MB |
Request Example {#carousel-request-example}
{ "content": { "type": "carousel", "columns": [{ "originalContentUrl": "https://example.com/example.png", "title": "Works Mobile", "text": "Press the button to visit", "defaultAction": { "type":"uri", "uri":"https://example.com" }, "actions": [{ "type":"uri", "label":"Visit", "uri":"https://example.com" }] }, { "originalContentUrl": "https://example.com/example2.png", "title": "Works Mobile", "text": "New way of working", "defaultAction": { "type":"uri", "uri":"https://example.com" }, "actions": [{ "type":"uri", "label":"Talk", "uri":"https://example.com" }] }] }}