셀프 서비스 위젯 및 WebViews를 통해 모바일 앱에 챗봇 배포

WebView를 사용하여 모바일 앱에 봇을 임베드할 수 있습니다. WebView는 네이티브 모바일 애플리케이션 내부에 임베드 가능한 브라우저입니다. 네이티브 모바일 애플리케이션, 즉 앱은 특정 플랫폼(Android, iOS)을 위해 설계된 언어와 UI 프레임워크로 작성됩니다. WebView는 앱에서 iframe처럼 실행되는 브라우저 엔진입니다. 앱은 WebView를 사용하여 최종 사용자에게 웹사이트를 제공합니다.

WebView는 각 모바일 플랫폼에 맞게 특별히 설계되어야 합니다. 특정 플랫폼에 대한 다음 지침을 사용하여 WebView를 생성할 수 있습니다. 

• WebView (Android) 또는 
• UIWebView (iOS)

WebView로 봇을 로드할 때 웹 브라우저 위젯에 대한 모든 사용자 정의를 WebView에도 적용할 수 있습니다. 모바일 앱에서 셀프 서비스 위젯을 사용할 때 원활한 고객 경험을 제공하기 위해 할 수 있는 몇 가지 사용자 정의가 있습니다.

WebView가 트리거될 때 위젯 확장

• 위젯을 확장하려면 다음 스크립트를 사용할 수 있습니다. 코드에서 클라이언트 해시와 봇 해시를 교체해야 합니다.

<script>
(function(d, w, c) {
    if (!d.getElementById("spd-busns-spt")) {
        var n = d.getElementsByTagName('script')[0],
            s = d.createElement('script');
        var loaded = false;
        s.id = "spd-busns-spt";
        s.async = "async";
        s.setAttribute("data-self-init", "false");
        s.setAttribute("data-init-type", "opt");
        s.src = 'https://cdn.in-freshbots.ai/assets/share/js/freshbots.min.js';
        s.setAttribute("data-client", "< client - hash >");
        s.setAttribute("data-bot-hash", "< bot - hash > ");
        s.setAttribute("data - env ", "prod ");
        s.setAttribute("data - region ", " in ");
        if (c) {
            s.onreadystatechange = s.onload = function() {
                if (!loaded) {
                    c();
                }
                loaded = true;
            };
        }
        n.parentNode.insertBefore(s, n);
    }
})(document, window, function() {
    Freshbots.initiateWidget({
        autoInitChat: false,
        getClientParams: function() {
            return {};
        }
    }, function(successResponse) {
        Freshbots.showWidget(true);
//이 코드 줄은 고객이 페이지에 도착할 때 위젯을 열어 둡니다
 
    }, function(errorResponse) {});
}); < /script>

WebView에 대한 다른 사용자 정의 가능한 매개변수에는 data-init-type 매개변수가 포함되며, 이는 세 가지 다른 값 중 하나로 설정할 수 있습니다. 이들은 다음과 같습니다.

• normal | s.setAttribute("data-init-type", "normal"); 
  normal로 설정하면 성능 최적화 없이 코드를 초기화하고 실행합니다.
  
  
• opt | s.setAttribute("data-init-type", "opt"); 
  매개변수의 값을 "opt"로 설정하면 사용 가능한 모든 성능 최적화 기술로 코드를 초기화하고 실행합니다.
   
• delayed | s.setAttribute("data-init-type", "delayed");
  매개변수의 값을 "delayed"로 설정하면 채팅을 초기화하지 않고 위젯을 숨긴 상태로 코드를 초기화하고 실행합니다. 

• delayed 매개변수는 고객이 특정 작업을 수행한 후 채팅 위젯을 표시하고자 할 때 이상적이며, 초기 페이지 또는 WebView에서 코드를 실행할 수 있습니다.

채팅을 초기화하고 위젯을 표시하기 위한 아래 함수 호출

• Freshbots.initiateChat();
  
• Freshbots.showWidget(true);  최대화된 위젯
• Freshbots.showWidget(false); 최소화된 위젯

봇 위젯에서 헤더 제거

• 네비게이션 바에서 위젯 사용자 정의를 클릭 > 사용자 정의 CSS 적용 > 헤더를 제거하기 위해 다음 CSS 코드를 적용합니다.

.chat - head {
  visibility: hidden!important;
}

• 헤더를 제거한 후에는 앱 화면에 Freshbots.hideWidget(true); 함수를 호출하는 뒤로 가기 버튼을 제공할 수 있습니다. 이 함수는 봇 위젯을 숨기고 고객을 모바일 앱으로 되돌립니다.
  
  
• 헤더를 유지하려는 경우 CSS를 사용하여 최소화 아이콘을 숨길 수 있습니다. 이렇게 하면 모바일 앱 환경에서 채팅 위젯이 최소화되지 않고 채팅 버블이 표시되지 않습니다. 

더 나은 컨텍스트를 위한 데이터 미리 채우기

• 사용자 정의 매개변수와 사용자 정의 JS 함수를 사용하여 봇을 미리 채워 고객에게 더 나은 경험을 제공할 수 있습니다. 예를 들어, 봇이 로드되기 전에 이메일 주소나 전화번호와 같은 세부 정보를 미리 채워 고객이 개인화된 경험을 즐길 수 있도록 할 수 있습니다.