이미지

Image 위젯은 HTTPS URL에서 호스팅되는 .png 또는 .jpg 이미지를 표시합니다. 표시된 이미지의 너비는 표시된 카드의 전체 너비를 채우며 높이는 이미지의 가로세로 비율을 유지하도록 조정됩니다.

Image 위젯은 사용자가 이미지를 클릭할 때 발생하는 클릭 시 작업을 지원합니다. onclick 작업의 예는 다음과 같습니다.

  • OpenLink로 연결되는 하이퍼링크(예: Google Chat 개발자 문서 https://developers.google.com/chat의 하이퍼링크)를 엽니다.
  • 커스텀 함수(예: API 호출)를 실행하는 작업을 실행합니다.

예: 클릭 가능한 이미지

다음 이미지는 Image 위젯으로 구성된 카드를 보여줍니다. Google Chat 개발자 문서의 방문 페이지 이미지를 표시합니다. 사용자가 이미지를 클릭하면 Google Chat 개발자 문서가 새 탭에서 열립니다.

Google Chat에서 텍스트 단락 위젯을 보여주는 카드 메시지
그림 1: Image 위젯을 보여주는 Google Chat의 카드 메시지

카드의 JSON은 다음과 같습니다.

JSON

{
  "cardsV2": [
    {
      "cardId": "exampleCard",
      "card": {
        "sections": [
          {
            "widgets": [
              {
                "image": {
                  "imageUrl": "https://developers.google.com/chat/images/chat-app-hero-image_1440.png",
                  "onClick": {
                    "openLink": {
                      "url": "https://developers.google.com/chat",
                    }
                  },
                  "altText": "The Google Chat developer documentation landing page image."
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

Image JSON 표현 및 필드

JSON 표현 
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "altText": string
}
필드
imageUrl

string

이미지를 호스팅하는 https URL입니다.

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

https://developers.google.com/chat/images/quickstart-app-avatar.png
onClick

object ( OnClick )

사용자가 이미지를 클릭하면 이 작업이 트리거됩니다.

altText

string

접근성을 위해 사용되는 이 이미지의 대체 텍스트입니다.

Onclick

사용자가 카드에서 버튼과 같은 상호작용 요소를 클릭할 때 응답하는 방법을 나타냅니다.

JSON 표현 
{

  // Union field data can be only one of the following:
  "action": {
    object (Action)
  },
  "openLink": {
    object (OpenLink)
  },
  "openDynamicLinkAction": {
    object (Action)
  },
  "card": {
    object (Card)
  }
  // End of list of possible types for union field data.
}
필드

공용체 필드 data .

data 는 다음 중 하나여야 합니다.

action

object ( Action )

지정하면 작업이 이 onClick 에 의해 트리거됩니다.

card

object ( Card )

지정된 경우 카드 카드를 클릭하면 새 카드가 카드 스택으로 푸시됩니다.

Google Workspace 부가기능에서는 지원되지만 Chat 앱에서는 지원되지 않습니다.

Action

양식 제출 시의 동작을 설명하는 작업입니다. 예를 들어 Apps Script를 호출하여 양식을 처리할 수 있습니다. 작업이 트리거되면 양식 값이 서버로 전송됩니다.

JSON 표현 
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction)
}
필드
function

string

포함하는 요소가 클릭되거나 부정확하게 활성화된 경우 호출할 맞춤 함수입니다.

사용 예는 대화형 카드 만들기 를 참조하세요.

parameters[]

object ( ActionParameter )

작업 매개변수 목록입니다.

loadIndicator

enum ( LoadIndicator )

작업을 호출하는 동안 작업에 표시되는 로드 표시기를 지정합니다.

persistValues

boolean

작업 후 양식 값이 유지되는지 여부를 나타냅니다. 기본값은 false 입니다.

true 인 경우 작업이 트리거된 후에도 양식 값이 유지됩니다. 작업이 처리되는 동안 사용자가 변경할 수 있도록 하려면 LoadIndicator 를 NONE 로 설정합니다. 채팅 앱의 카드 메시지 의 경우 작업의 ResponseType 을 UPDATE_MESSAGE 로 설정하고 작업이 포함된 카드에서 cardId 를 동일하게 사용해야 합니다.

false 인 경우 작업이 트리거될 때 양식 값이 삭제됩니다. 작업이 처리되는 동안 사용자가 변경하지 못하도록 하려면 LoadIndicator 를 SPINNER 로 설정합니다.

interaction

enum ( Interaction )

선택사항. 대화상자 를 열 때 필요합니다.

사용자와의 상호작용에 따른 조치(예: 사용자가 카드 메시지의 버튼을 클릭하는 경우)

지정하지 않으면 앱은 정상적으로 링크 열기 또는 함수 실행과 같은 action 를 실행하여 응답합니다.

interaction 를 지정하면 앱이 특별한 대화형 방식으로 응답할 수 있습니다. 예를 들어 interaction 를 OPEN_DIALOG 로 설정하면 앱이 대화상자 를 열 수 있습니다.

지정된 경우 로드 표시기는 표시되지 않습니다.

Chat 앱에서는 지원되지만 Google Workspace 부가기능에서는 지원되지 않습니다. 부가기능에 지정하는 경우 전체 카드가 삭제되고 클라이언트에 아무것도 표시되지 않습니다.

ActionParameter

작업 메서드가 호출될 때 제공할 문자열 매개변수의 목록입니다. 예를 들어 다시 알림 버튼 3개(지금 일시중지, 1일 일시중지, 다음 주 다시 알림)를 사용하는 것이 좋습니다. 문자열 매개변수 목록에 다시 알림 유형 및 다시 알림 시간을 전달하여 작업 메서드 = pause()를 사용할 수 있습니다.

자세한 내용은 CommonEventObject 를 참조하세요.

JSON 표현 
{
  "key": string,
  "value": string
}
필드
key

string

액션 스크립트에 해당하는 매개변수의 이름입니다.

value

string

매개변수 값입니다.

LoadIndicator

작업을 호출하는 동안 작업에 표시되는 로드 표시기를 지정합니다.

열거형
SPINNER 콘텐츠가 로드 중임을 나타내는 스피너를 표시합니다.
NONE 아무것도 표시되지 않습니다.

Interaction

선택사항. 대화상자 를 열 때 필요합니다.

사용자와의 상호작용에 따른 조치(예: 사용자가 카드 메시지의 버튼을 클릭하는 경우)

지정하지 않으면 앱은 정상적으로 링크 열기 또는 함수 실행과 같은 action 를 실행하여 응답합니다.

interaction 를 지정하면 앱이 특별한 대화형 방식으로 응답할 수 있습니다. 예를 들어 interaction 를 OPEN_DIALOG 로 설정하면 앱이 대화상자 를 열 수 있습니다.

지정된 경우 로드 표시기는 표시되지 않습니다.

Chat 앱에서는 지원되지만 Google Workspace 부가기능에서는 지원되지 않습니다. 부가기능에 지정하는 경우 전체 카드가 삭제되고 클라이언트에 아무것도 표시되지 않습니다.

열거형
INTERACTION_UNSPECIFIED 기본값 action 는 정상적으로 실행됩니다.
OPEN_DIALOG

채팅 앱이 사용자와 상호작용하는 데 사용하는 창 형식의 카드 기반 인터페이스인 대화상자 를 엽니다.

카드 메시지의 버튼 클릭에 응답하여 채팅 앱에서만 지원됩니다.

Google Workspace 부가기능에서는 지원되지 않습니다. 부가기능에 지정하는 경우 전체 카드가 삭제되고 클라이언트에 아무것도 표시되지 않습니다.

제한사항 및 고려사항

  • .png 및 .jpg 이미지만 지원됩니다.
  • 호스트 URL은 HTTPS이어야 합니다.
  • 성능이 우수한 카드를 보장하기 위해 권장되는 최대 이미지 크기는 2MB입니다.