모바일 애플리케이션에 웹 채팅 추가하기

참고 : 이 섹션의 내용은 AI 어시스턴트에 적용됩니다.

iOS, Android 또는 React Native와 같은 모바일 프레임워크에 구축된 모바일 애플리케이션을 사용하는 경우 JavaScript 브릿지가 있는 WebView 사용하여 앱과 AI 어시스턴트 빌더 웹 채팅 간에 통신할 수 있습니다.

JavaScript 브릿지와 함께 WebViews 사용하는 것은 모든 모바일 프레임워크에서 유사한 구현을 하는 일반적인 패턴입니다.

웹 채팅을 WebView 포함

웹 채팅 인터페이스를 모바일 앱 페이지의 일부로 포함하거나 앱에서 열리는 별도의 패널로 포함할 수 있습니다. 두 경우 모두 웹 채팅 임베드 스크립트가 포함된 HTML 페이지를 호스팅한 다음 해당 페이지를 앱에 WebView 포함시켜야 합니다.

임베드 스크립트에서 ' showLauncher ' 옵션을 사용하여 웹 채팅 런처 아이콘을 숨기고 ' openChatByDefault ' 옵션을 사용하여 페이지가 로드될 때 웹 채팅을 자동으로 열 수 있습니다. 대부분의 경우 ' hideCloseButton ' 옵션을 사용하고 앱의 기본 컨트롤을 사용하여 웹 채팅 페이지 또는 패널이 닫히는 방식을 제어하고 싶을 것입니다. 임베드 스크립트에서 지정할 수 있는 구성 옵션에 대한 자세한 내용은 웹 채팅 API 참조를 참조하세요.

다음 예는 이러한 구성 옵션이 포함된 임베드 스크립트를 보여줍니다:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <script>
      window.watsonAssistantChatOptions = {
        // A UUID like '1d7e34d5-3952-4b86-90eb-7c7232b9b540' included in the embed code.
        integrationID: "YOUR_INTEGRATION_ID",
        // Your assistants region e.g. 'us-south', 'us-east', 'jp-tok' 'au-syd', 'eu-gb', 'eu-de', etc.
        region: "YOUR_REGION",
        // A UUID like '6435434b-b3e1-4f70-8eff-7149d43d938b' included in the embed code.
        serviceInstanceID: "YOUR_SERVICE_INSTANCE_ID",
        // The callback function that is called after the widget instance has been created.
        onLoad: function(instance) {
          instance.render();
        },
        showLauncher: false, // Hide the web chat launcher, you will open the WebView from your mobile application
        openChatByDefault: true, // When the web chat WebView is opened, the web chat will already be open and ready to go.
        hideCloseButton: true // And the web chat will not show a close button, instead relying on the controls to close the WebView
      };
      setTimeout(function(){const t=document.createElement('script');t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js";document.head.appendChild(t);});
    </script>
  </body>
</html>

앱에서 기기가 오프라인 상태일 때 웹 채팅 시작 메커니즘을 숨기는 로직을 포함해야 합니다. 대화 도중에 디바이스가 오프라인 상태가 되면 적절한 오류 메시지와 재시도가 발생합니다.

JavaScript 브릿지 사용

경우에 따라 모바일 애플리케이션이 AI 어시스턴트 빌더 웹 채팅과 통신해야 할 수도 있습니다. 예를 들어, 초기 컨텍스트 데이터(예: 사용자 ID 또는 계정 정보)를 설정하거나 웹 채팅 보안 기능을 사용해야 할 수도 있습니다. 이를 위해 JavaScript 브릿지를 사용할 수 있습니다.

JavaScript 브릿지는 모든 모바일 플랫폼에서 사용할 수 있는 일반적인 패턴입니다. 구현 세부 사항은 모바일 애플리케이션 프레임워크마다 다르므로 사용 중인 프레임워크에 대한 JavaScript 브릿지 구현 방법에 대한 구체적인 예시를 확인할 수 있습니다. 그러나 모바일 앱과 웹 채팅 간에 이벤트를 주고받는 핵심 개념은 모든 프레임워크에 적용됩니다.

' JavaScript 브리지를 사용하면 모바일 앱과 ' WebView, ' 간에 이벤트가 전송되고 브리지 양쪽에 이벤트 리스너가 존재하여 해당 이벤트를 처리합니다. 각 이벤트는 메시지 페이로드를 전달하며, 이 페이로드는 텍스트 전용이므로 데이터를 주고받으려면 JSON 객체를 문자열화하고 구문 분석해야 합니다.

모바일 애플리케이션에서 웹 채팅 인스턴스 메서드를 호출해야 하는 경우 JavaScript 브릿지를 사용하여 앱에서 WebView 이벤트를 전송하여 메서드를 호출해야 합니다. 마찬가지로 웹 채팅의 동작에 대한 응답으로 모바일 애플리케이션에서 코드를 실행해야 하는 경우 JavaScript 브릿지를 통해 웹 채팅에서 모바일 애플리케이션으로 이벤트를 보낼 수 있습니다.

' user_defined 응답 유형과 ' customResponse ' 이벤트를 사용하여 모바일 애플리케이션에서 행동을 유도할 수 있습니다. 하지만 이벤트에서 ' event.data.element ' 속성을 제거한 후 JavaScript 브릿지를 통해 전달해야 합니다. 이 속성은 문자열화할 수 없는 HTML 요소를 포함하므로 제거해야 합니다. 웹 채팅에 새 보기를 작성하기 위해 ' user_defined 응답 유형을 사용하는 경우 HTML 및 JavaScript 작성하고 WebView 내에서 처리해야 합니다. (' customResponse ' 이벤트에 대한 자세한 내용은 웹 채팅 API 참조를 참조하세요.)