튜토리얼: 웹 채팅에서 사용자 지정 옵션 버튼 구현하기

온라인에서 편집하기

이 튜토리얼에서는 옵션 응답의 기본 렌더링을 사용자 지정 클릭 가능한 버튼으로 대체하는 방법을 보여 줍니다.

이 튜토리얼에서 설명한 예제의 완성된 실행 버전은 ‘AI 어시스턴트 웹 채팅용 사용자 지정 버튼’을 참조하세요.

기본적으로 웹 채팅은 항상 옵션 응답을 클릭 가능한 버튼 세트(옵션이 4개 이하인 경우) 또는 드롭다운 목록(옵션이 5개 이상인 경우)으로 표시합니다. 이 예는 옵션이 3개인 옵션 응답의 기본 렌더링을 보여줍니다:

3개의 버튼으로 렌더링되는 옵션 응답

이 튜토리얼에서는 이 기본 렌더링을 더 큰 카드 스타일의 버튼으로 대체하겠습니다:

3개의 사용자 지정 카드 스타일 버튼으로 렌더링된 옵션 응답

옵션 응답의 렌더링은 수정할 수 없으므로 어시스턴트로부터 들어오는 모든 옵션 응답을 가로채서 사용자 지정(user_defined) 응답으로 변환하는 방식으로 이를 수행합니다. 그런 다음 이러한 응답에 대한 사용자 지정 렌더링을 구현할 수 있습니다.

  1. 이 pre:receive 이벤트에 대한 핸들러를 생성합니다. 이 핸들러에서 메시지 페이로드에서 ' option 응답을 찾아서 ' user_defined ' 응답으로 변환합니다.

    function preReceiveHandler(event) {
      const message = event.data;
      if (message.output.generic) {
        message.output.generic.forEach(messageItem => {
          if (messageItem.response_type === 'option') {
            messageItem.response_type = 'user_defined';
          }
        })
      }
    }

  1. 이 customResponse 이벤트에 대한 핸들러를 생성합니다. 이 핸들러는 CSS에서 정의할 수 있는 사용자 정의 ' CardButton 스타일을 사용하여 사용자 정의 버튼을 렌더링합니다. (이 스타일의 정의는 전체 예제 에서 확인할 수 있습니다.)

    function customResponseHandler(event) {
      const { message, element, fullMessage } = event.data;
      message.options.forEach((messageItem, index) => {
        const button = document.createElement('button');
        button.innerHTML = messageItem.label;
        button.classList.add('CardButton');
        button.addEventListener('click', () => onClick(messageItem, button,     fullMessage, index));
        element.appendChild(button);
      });
    }

  1. 이벤트 onLoad 핸들러에서 인스턴스 on() 메서드를 사용하여 및 customResponse pre:receive 이벤트를 구독하고, 핸들러를 콜백으로 등록하십시오.

    instance.on({ type: 'customResponse', handler: customResponseHandler });
    instance.on({ type: 'pre:receive', handler: preReceiveHandler });

  1. 고객이 사용자 지정 버튼 중 하나를 클릭할 때 응답할 클릭 핸들러를 만듭니다. 핸들러에서 인스턴스 send() 메서드를 사용하여 버튼 레이블을 메시지 텍스트로 지정해 어시스턴트에게 메시지를 전송합니다.

또한 클릭한 버튼에 사용자 정의 CSS 클래스 ' CardButton--selected '을 추가하여 해당 버튼이 선택되었음을 표시하도록 모양을 변경합니다. (이 클래스는 전체 예제에서도 정의되어 있습니다.)

    function onClick(messageItem, button, fullMessage, itemIndex) {
      webChatInstance.send({ input: { text: messageItem.label }});
      button.classList.add('CardButton--selected');
    }

  1. 사용자가 페이지를 새로고침하거나 다른 페이지로 이동하면 세션 기록에서 웹 채팅이 다시 로드됩니다. 이 경우 클릭한 버튼의 '선택됨' 상태를 유지하려고 합니다.

이를 위해 onClick 핸들러 내에서 인스턴스 updateHistoryUserDefined 메서드를 사용하여, 어떤 버튼이 클릭되었는지 나타내는 변수를 세션 기록에 저장하십시오.

    webChatInstance.updateHistoryUserDefined(fullMessage.id, { selectedIndex:     itemIndex });

그런 다음 ' customResponse 핸들러에서 이 값을 읽고 세션 기록에 이미 있는 모든 사용자 지정 응답에서 버튼의 초기 상태를 설정하는 데 사용합니다.

    if (fullMessage.history?.user_defined?.selectedIndex === index) {
      button.classList.add('CardButton--selected');
    }

완전한 실행 코드는 ‘AI 어시스턴트 웹 채팅용 사용자 지정 버튼’ 예제를 참조하세요. 이 예에서는 고객이 메시지를 보낸 후 사용자 지정 응답에서 버튼을 비활성화하여 버튼을 사용하여 메시지를 순서대로 보내지 못하게 하는 방법도 보여줍니다.