Button Block

Button Block(버튼 블록)은 말풍선에서 버튼을 표현하는 블록으로, 레이아웃 블록을 구성하는 엘리먼트의 속성으로 사용되기도 합니다. 중첩하여 사용할 경우 네 개 이상의 버튼 사용은 지양하며, 더 중요한 버튼을 상단에 위치시키는 것을 권장합니다. 버튼명은 직관적인 명칭으로 가능하면 짧은 명사형을 사용하고, 버튼의 Action Type에 따라 적당한 버튼명을 사용해야 합니다.
Button Block 정책에 관한 자세한 설명은 정책 및 UX 가이드 문서를 참고하시기 바랍니다.

기능 소개

한 개의 행에 한 개의 버튼을 표현할 때 사용하며, 여러 개의 Button Block을 연속하여 쌓는 것도 가능합니다.

버튼 표현

색상

버튼 및 중첩 표시

블록 속성

Button Block은 버튼을 클릭했을 때 수행되는 동작에 따라 기본 동작을 수행하는 Compatibility와 기본 동작이 아닌 OS/플랫폼별 다른 동작을 수행하는 Exclusive 속성으로 구분됩니다.

카카오워크 1.11 버전 이후부터 Button Block의 표준 포맷이 다음과 같이 변경되었습니다.

• OS 또는 플랫폼 별로 다른 동작 수행을 설정할 수 있는 Exclusive 속성 추가

안내
한 개의 행에 여러 버튼을 표현하고 싶은 경우에는 레이아웃 블록인 Action Block을 활용합니다.

• Button Block 정책에 대한 자세한 설명은 정책 및 UX 가이드 문서를 참고하시기 바랍니다.

Compatibility Action

버튼의 기본적인 동작을 정의합니다.

open_system_browser

action의 type을 open_system_browser로 설정하면 value 속성값의 URL을 시스템 브라우저로 연결할 수 있습니다.

코드예제open_system_browser Sample Code

{
  "type": "button",
  "text": "자세히보기",
  "style": "primary",
  "action": {
    "type": "open_system_browser",
    "name": "button1",
    "value": "http://example.com/details/999"
  }
}

open_inapp_browser

action의 type을 open_inapp_browser로 설정하면 value 속성값의 URL을 카카오워크 내부 팝업으로 호출할 수 있습니다.

코드예제open_inapp_browser Sample Code

{
  "type": "button",
  "text": "자세히보기",
  "style": "primary",
  "action": {
    "type": "open_inapp_browser",
    "name": "button1",
    "value": "http://example.com/details/999"
  }
}

action의 standalone을 true로 설정하면 PC 인앱 브라우저를 별도 창으로 띄울 수 있습니다.

코드예제standalone 속성 적용 Sample Code

{
  "type": "button",
  "text": "새 창에서 보기",
  "style": "default",
  "action": {
    "type": "open_inapp_browser",
    "name": "button1",
    "value": "http://example.com/details/999",
    "standalone": true,
    "width": 980,
    "height": 720
  }
}

open_external_app

action의 type을 open_external_app로 설정하면 value 속성값의 커스텀 앱 스킴(Custom App Scheme)을 호출할 수 있습니다.

코드예제open_external_app Sample Code

{
  "type": "button",
  "text": "카카오 지도에서 보기",
  "action": {
    "type": "open_external_app",
    "value": "ios=kakaomap%3A%2F%2Flook%3Fp%3D37.537229%2C127.005515&aos=kakaomap%3A%2F%2Flook%3Fp%3D37.537229%2C127.005515"
  }
}

주의
사용자의 디바이스 플랫폼에 앱 스킴(App Scheme)에 해당하는 앱이 설치되어 있지 않을 수 있습니다.

• Query String 형식을 이용해 각 플랫폼별 scheme을 담고 있는 value 속성에는 디바이스 플랫폼에 해당하는 값이 없을 수 있습니다.(iOS 앱만 제공하는 경우 등)

submit_action

action의 type을 submit_action로 설정 시, name과 value를 필수로 설정해야 합니다. 문맥 정보와 함께 name과 value 값을 고객사 서버에 콜백(Callback)으로 전달할 수 있으며, value 속성을 활용하면 다시 돌려 받기를 원하는 값을 자유롭게 설정할 수 있습니다. submit_action 속성을 활용한 Bot과 멤버 간 대화 시나리오는 반응형 메시지 문서를 참고하시기 바랍니다.

코드예제submit_action Sample Code

{
  "type": "button",
  "text": "일정 수락",
  "action": {
    "type": "submit_action",
    "name": "accept",
    "value": "event_id=20210301-0024"
  }
}

안내
Block Kit을 활용한 다양한 메시지 시나리오는 Bot 메시지 시나리오 문서를 참고하시기 바랍니다.

call_modal

action의 type을 call_modal로 설정하면, 버튼 클릭 시 Modal을 화면에 띄우고 사전에 등록한 Bot의 Request URL로 Modal안에 표시할 블록 데이터를 요청합니다. value 속성을 활용하여 다시 돌려받길 원하는 값으로 자유롭게 설정할 수 있습니다. call_modal 속성을 활용한 Bot과 멤버 간 대화 시나리오는 반응형 Modal 문서를 참고하시기 바랍니다.

코드예제call_modal Sample Code

{
  "type": "button",
  "text": "결재창 띄우기",
  "action": {
    "type": "call_modal",
    "value": "number=20200401-PR-0024"
  }
}

안내
Block Kit을 활용한 다양한 메시지 시나리오는 Bot 메시지 시나리오 문서를 참고하시기 바랍니다.

• Button Block 정책에 대한 자세한 설명은 정책 및 UX 가이드 문서를 참고하시기 바랍니다.

{
  "type": "button",
  "text": "자세히보기",
  "style": "primary",
  "action_type": "open_system_browser",
  "value": "http://example.com/details/999"
}

{
  "type": "button",
  "text": "카카오 지도에서 보기",
  "action_type": "open_external_app",
  "value": "ios=kakaomap%3A%2F%2Flook%3Fp%3D37.537229%2C127.005515&aos=kakaomap%3A%2F%2Flook%3Fp%3D37.537229%2C127.005515"
}

{
  "type": "button",
  "text": "일정 수락",
  "action_type": "submit_action",
  "action_name": "accept",
  "value": "event_id=20210301-0024"
}

{
  "type": "submit_action",
  "action_time": "2021-03-08T10:10:09.563323Z",
  "message": {
    "blocks": [
      {
        "type": "button",
        "text": "일정 수락",
        "action_type": "submit_action",
        "action_name": "accept",
        "value": "event_id=20210301-0024"
      }
    ],
    "conversation_id": 123456,
    "id": 123456852531597310,
    "text": "lcfuePYPdxnfTcVG+x4mihoEEcChqHInrBCBEDY5Adc=",
    "user_id": 123456
  },
  "react_user_id": 654321,
  "action_name": "accept",
  "value": "event_id=20210301-0024"
}

{
  "type": "button",
  "text": "결재창 띄우기",
  "action_type": "call_modal",
  "value": "number=20200401-PR-0024"
}

Exclusive Action

exclusive 속성을 적용하여 특정 플랫폼(PC, Mobile) 또는 특정 OS(Windows, macOS, Android, iOS) 별로 다른 동작을 설정할 수 있습니다. 설정은 OS, 플랫폼, default순으로 적용합니다.

코드예제exclusive Sample Code

{
  "type": "button",
  "text": "자세히보기",
  "style": "primary",
  "action": {
    "type": "exclusive",
    "default": {
      "type": "open_system_browser",
      "value": "https://example.com"
    },
    "ios": {
      "type": "open_inapp_browser",
      "value": "http://m.example.com"
    },
    "android": {
      "type": "open_external_app",
      "value": "geo:37.537229,127.005515"
    }
  }
}