튜토리얼: 호스트 웹 페이지와 상호 작용하기

사용자 지정 응답 및 이벤트를 사용하여 웹 채팅이 표시되는 웹 페이지와 상호 작용하도록 설정할 수 있습니다.

예를 들어 고객은 양식을 작성하는 데 필요한 정보를 찾기 위해 어시스턴트를 사용할 수 있습니다. 고객이 이 정보를 양식에 수동으로 복사하는 대신 웹 채팅에서 자동으로 정보를 완성하도록 할 수 있습니다.

이 튜토리얼에 소개된 예제의 완성된 실행 버전은 ‘AI 어시스턴트 웹 채팅을 위한 페이지 상호작용’을 참조하세요.

이 예에서는 사용자 지정 응답을 사용하여 웹 채팅에서 고객의 계좌 번호로 양식 필드를 채우는 버튼을 렌더링합니다:

1. 이 customResponse 이벤트에 대한 핸들러를 생성합니다. 이 핸들러는 사용자 정의 버튼을 렌더링하고 클릭 핸들러를 생성합니다. 클릭 핸들러는 ' Document.querySelector() ' 메서드를 사용하여 DOM과 상호 작용하고 고객의 계좌 번호가 포함된 양식 필드를 작성합니다.

이 예에서는 하드코딩된 계정 번호 ' 1234567'을 사용합니다. 일반적인 프로덕션 어시스턴트에서는 어시스턴트가 세션 변수에서 이 값을 검색하거나 외부 시스템에서 쿼리합니다.

    function customResponseHandler(event) {
      const { element } = event.data;

      const button = document.createElement('button');
      button.type = 'button';
      button.innerHTML = 'Enter account number';
      button.addEventListener('click', () => {
        // Look for the account number element in the document, and enter the account number.
        document.querySelector('#account-number').value = '1234567';
      });

      element.appendChild(button);
    }

1. 이벤트 onLoad 핸들러에서 인스턴스 on() 메서드를 사용하여 이벤트에 customResponse 구독하고, 핸들러를 콜백으로 등록하십시오. 이렇게 하면 어시스턴트가 계좌 번호 입력 버튼을 표시하는 사용자 지정 응답을 보낼 수 있습니다.

    instance.on({
      type: 'customResponse',
      handler: (event, instance) => {
        const { message } = event.data;
        if (message.user_defined && 
            message.user_defined.user_defined_type === 'fill_account_number') {
              accountNumberResponseHandler(event, instance);
            }
      },
    });

이 예에서는 사용자 지정 응답의 사용자 지정 ' user_defined_type 속성을 확인하고 지정된 유형이 ' fill_account_number'인 경우에만 ' accountNumberResponseHandler() ' 함수를 호출하고 있습니다. 이것은 사용자 지정 속성을 사용하여 여러 개의 서로 다른 사용자 지정 응답을 정의하는 방법(각각 ' user_defined_type 값이 다른)을 보여주는 선택적 확인 사항입니다.

완전한 실행 코드는 ‘AI 어시스턴트 웹 채팅 예제: 페이지 상호작용’을 참조하세요.