버튼 클릭 동작 커스터마이징하기

다음은 실제 사용자가 Web Chatbot 사용 시 봇 응답 내 버튼을 클릭했을 때 커스터마이징 할 수 있는 시나리오 예시입니다.

그림플로팅 버튼과 Web Chatbot 화면

1. createChat() 메서드 인자로 blockButtonClickInterceptor가 존재합니다.

   • 해당 Interceptor는 Bot 응답 구성 요소 중 Button에 해당하는 요소 클릭 시, 일어나는 동작을 개발자가 가로챌 수 있도록 합니다.

   • 사용자가 Button을 클릭하면 Button 정보를 인자로 Interceptor가 우선 호출됩니다.

     • false를 반환하도록 구현하면 기본 동작이 수행되지 않으며, true를 반환하도록 구현하면 기본 동작이 수행됩니다.

   • 이를 통해 개발자는 플랫폼 또는 특정 Label을 갖는 Button 등을 클릭했을 때, 실행할 동작을 분기할 수 있습니다.

   

   그림Web Chatbot 시작 화면

   코드예제createChat() Syntax

   JavaScript

   Kakaoi.UI.createChat({
       // ... 생략
       blockButtonClickInterceptor: (buttonInfo) => { 
       }
   });
   

2. 예시로 사용자가 [주문/배송] 버튼을 클릭했을 때, Button 정보를 확인해 보면 다음과 같은 내용을 볼 수 있습니다.

   • Button 정보에 대한 자세한 설명은 Web Chatbot 메서드 > blockButtonClickInterceptor() 문서를 참고하시기 바랍니다.

   코드예제blockButtonClickInterceptor() Syntax

   JavaScript

   {
       "blockId": "61823b83b369be50098220d2"
       "data": {
           "blockId": "61823b83b369be50098220d2"
       },
       "highlight": false,
       "label": "주문/배송",
       "message": "주문/배송",
       "type": "block"
   }
   

안내
SDK에서 제공하는 메서드를 호출하여 다양한 UI 구성 요소를 변경하는 방법은 Web Chatbot 메서드 문서를 참고하시기 바랍니다.