모바일 앱에 웹 채팅 추가하기

iOS, Android 또는 React Native와 같은 모바일 프레임워크에 구축된 모바일 애플리케이션을 사용하는 경우, JavaScript WebView 사용하여 앱과 watsonx Assistant 연결할 수 있습니다.

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 assistant's region, for example, 'us-south', 'us-east', 'jp-tok' 'au-syd', 'eu-gb', 'eu-de', and so on.
        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 브릿지 사용

일부 상황에서는 모바일 애플리케이션이 watsonx Assistant 웹 대화와 통신해야 할 수 있습니다. 예를 들어, 초기 컨텍스트 데이터 (예: 사용자 ID 또는 계정 정보) 를 설정하거나 웹 대화 보안 기능을 사용해야 할 수 있습니다. 이를 수행하기 위해 JavaScript 브릿지를 사용할 수 있습니다.

JavaScript 브릿지는 모든 모바일 플랫폼에서 사용할 수 있는 공통 패턴입니다. 구현 세부사항은 모바일 애플리케이션 프레임워크마다 다릅니다. 사용 중인 프레임워크에 대해 JavaScript 브릿지를 구현하는 방법에 대한 특정 예제를 찾을 수 있습니다. 그러나 모바일 앱과 웹 대화 간에 이벤트를 전송하는 핵심 개념은 모든 프레임워크에 적용됩니다.

JavaScript 사용하면 모바일 앱과 WebView, 사이에 이벤트가 전송되고, 브리지 양쪽에 이벤트 리스너가 존재하여 이러한 이벤트를 처리합니다. 각 이벤트는 메시지 페이로드를 전달합니다. 이 페이로드는 텍스트 전용이므로 데이터를 앞뒤로 전달하려면 JSON 오브젝트를 문자열로 변환하고 구문 분석해야 합니다.

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

user_defined 응답 유형 및 customResponse 이벤트를 사용하여 모바일 애플리케이션에서 동작을 구동할 수 있습니다. 그러나 JavaScript 브릿지를 통해 전달하기 전에 이벤트에서 event.data.element 특성을 제거해야 합니다. 이 특성은 문자열로 변환할 수 없는 HTML 요소를 포함하므로 제거해야 합니다. user_defined 응답 유형을 사용하여 새 보기를 웹 대화에 쓰려면 HTML및 JavaScript 로 작성되고 WebView내에서 처리되어야 합니다. ( customResponse 이벤트에 대한 자세한 정보는 웹 대화 API 참조를 참조하십시오.)