Kakao i Web Chatbot::부록 A. 개발 시나리오

페이지 이동경로

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

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

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

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

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

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

      • false를 반환하도록 구현하면 기본 동작이 수행되지 않으며, true를 반환하도록 구현하면 기본 동작이 수행됩니다.
    • 이를 통해 개발자는 플랫폼 또는 특정 Label을 갖는 Button 등을 클릭했을 때, 실행할 동작을 분기할 수 있습니다.

    Web Chatbot 시작 화면

    그림Web Chatbot 시작 화면

    코드예제createChat() Syntax

    Kakaoi.UI.createChat({
        // ... 생략
        blockButtonClickInterceptor: (buttonInfo) => { 
        }
    });
    
  2. 예시로 사용자가 [주문/배송] 버튼을 클릭했을 때, Button 정보를 확인해 보면 다음과 같은 내용을 볼 수 있습니다.

    코드예제blockButtonClickInterceptor() Syntax

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

안내
SDK에서 제공하는 메서드를 호출하여 다양한 UI 구성 요소를 변경하는 방법은 Web Chatbot 메서드 문서를 참고하시기 바랍니다.
이 문서가 만족스러운 이유를 알려주세요.
이 문서에 아쉬운 점을 알려주세요.
평가해주셔서 감사합니다.

더 자세한 의견은 documentation@kakaoenterprise.com 으로 제보해주세요.