← 돌아가기

13.이미지/ 버튼대답


컨텍스트의 messge, keyboard 변수를 이용하여 기능을 구현할 수 있습니다.

 

카톡 이미지,url 응답 : message 변수이용


  • 오른쪽 대화표시를 클릭.
  • 컨텍스트 context 변수들을 관리하는 Edit JSON를 클릭
  • 아래에 있는 [message] 버튼을 클릭하여 추가된 내용을 수정합니다.
  • 카카오톡 플러스친구에서 확인 가능합니다.

 

(구현된 이미지 예시)
카톡키보드 이미지 버튼 구현예
 
 
 
 
 
*[TIP] Edit JSON의 아래에 [전체샘플] 버튼을 클릭하면, message, keyboard가 함께 들어있는
샘플 설정을 추가하게 되고 이 값만 수정해서 사용하면 편하게 설정할 수 있습니다.
 
다음  JSON포맷을 참고하면 된다.
 
{
  "message": {
    "text": "안녕하세요. Mindmap.AI입니다.!",
    "photo": {
      "url": "https://photo.src",
      "width": 640,
      "height": 480
    },
    "message_button": {
      "label": "Mr.MIND바로가기",
      "url": "http://mindmap.ai/images/mainimg/user_channel1.png"
    }
  },
}

 

카카오톡 버튼 응답 : keyboard 변수 이용


  • 오른쪽 대화표시 클릭 
  • 컨텍스트 context 변수들을 관리하는 Edit JSON를 클릭
  • 아래에 있는[keyboard] 버튼을 클릭하여 추가된 내용을 수정합니다.
  • 카카오톡 플러스친구에서 확인 가능합니다.
 
 
다음  JSON포멧을 참고해 주세요.
{
  "keyboard": {
    "type": "buttons",
    "buttons": [
      "처음으로",
      "주가정보",
      "날씨정보"
    ]
  }
}

 

카카오에서 제공하는 정식 api사이트 정보는 다음을 참고하세요.

https://github.com/plusfriend/auto_reply

 

6.1. Keyboard
  • 응답 메시지에 따라 사용자의 키보드 영역에 표현될 메시지 입력방식에 대한 정보입니다.
  • 별도로 설정하지 않는 경우 text 타입이 기본으로 설정됩니다.
필드명 타입 필수여부 설명
type String Required buttons: 객관식 응답의 목록을 구성할 수 있음 
text: 주관식 응답을 입력받을 수 있음
buttons Array[String] Optional 객관식 응답 내용의 목록
  • 직접 입력
{
  "type": "text"
}
  • 버튼 입력
{
  "type": "buttons",
  "buttons": [
    "선택 1",
    "선택 2",
    "선택 3"
  ]
}
 
[TIP] 카카오톡에서 다시 들어갈때 매번 키보드버튼이 나오게 하기 위해서는 mindmap화면의 

.start

노드의 컨텍스트에 [keyboard] 변수를 설정하면 된다.

참고로 카카오플러스 친구의 이기능이 활성화 되는 조건은 다음과 같다.

1. 처음 친구추가하기 후 챗팅화면에 처음 들어갈때

2. 챗팅화면에서 돌아가기로 빠져나와서 친구리스트상에서 대기후  10분후에 클릭후 다시 들어갈때

3. 챗팅창 "나가기"기능을 통해서 채팅탈퇴(?)후 즉 나가기기능으로 나간후 다시 1분후에 들어갈때

 
6.2. Message
  • 카카오톡 이용자가 명령어를 선택 혹은 입력했을 때 이용자에게 전송하는 응답 메시지입니다.
  • String, photo, MessageButton의 조합으로 이루어집니다.
  • 3가지 타입 중 1개 이상이 반드시 들어가야 하며, 최대 3가지 타입 모두 포함될 수 있습니다.
필드명 타입 필수여부 설명
text String Optional 사용자에게 발송될 메시지 텍스트(최대 1000자)
photo Photo Optional 말풍선에 들어갈 이미지 정보. 1장 제한, JPEG/PNG 포맷. 6.3에서 상세 기술
message_button MessageButton Optional 말풍선에 붙는 링크버튼 정보. 6.2.1에서 상세 기술
{
  "text": "안녕하세요.",
  "photo": {
    "url": "https://hello.photo.src",
    "width": 640,
    "height": 480
  },
  "message_button": {
    "label": "반갑습니다.",
    "url": "http://hello.world.com/example"
  }
}
6.2.1. MessageButton
  • 응답 메시지의 말풍선 하단에 보여지는 링크버튼 정보입니다.
필드명 타입 필수여부 설명
label String Required 링크버튼의 타이틀
url String Required 링크버튼의 연결 링크 주소
{
  "label": "쿠폰확인하기",
  "url": "http://coupon.coupon.com/~~"
}
6.3. Photo
  • 이미지 정보
필드명 타입 필수여부 설명
url String Required 이미지 url
width Int Required 이미지 width
height Int Required 이미지 height

이미지 권장 사이즈 : 720 x 630px
지원 파일형식 및 권장 용량 : jpg, png /500KB

 

 

 

{
  "url": "https://photo.src",
  "width": 640,
  "height": 480
}